地图框架之mapbox——（二）
一、地图控件
1、全屏控件
map.addControl(new mapboxgl.FullscreenControl());2、导航控件
const nav = new mapboxgl.NavigationControl(
{
//是否显示指南针按钮，默认为true
"showCompass": true,
//是否显示缩放按钮，默认为true
"showZoom":true
}
);
//添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
map.addControl(nav, 'top-left');3、属性控件
map.addControl(new mapboxgl.AttributionControl({
//是否折叠属性信息
compact:true,
//自定义属性信息
customAttribution:["测绘工程","GIS"]
}));4、比例尺
const scale = new mapboxgl.ScaleControl({
unit:'metric|imperial' //默认为公里
})
map.addControl(scale);5、鼠标位置
先在页面创建一个展示坐标的div，在使用鼠标事件获取经纬度填充到div中
//1、创建div
<div id="map">
<div id="mouse-position">
</div>
</div>
//2、给div一个样式
#mouse-position{
position: fixed;
z-index: 100;
}
//3、获取经纬度并填充到div中
map.on('mousemove', (e)=> {
const {lng,lat} = e.lngLat;
document.getElementById('mouse-position').innerHTML = `
经度:${lng.toFixed(2)},纬度:${lat.toFixed(2)}
`
});上面整体的代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<script src="./utils/mapboxgl-control-minimap.js"></script>
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
#mouse-position {
position: fixed;
z-index: 100;
top: 20px;
left: 60px;
}
</style>
</head>
<body>
<div id="mouse-position">
</div>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [116.391361, 39.904310], // starting position [lng, lat]
zoom: 14, // starting zoom
})
map.addControl(new mapboxgl.FullscreenControl());
const nav = new mapboxgl.NavigationControl(
{
//是否显示指南针按钮，默认为true
"showCompass": true,
//是否显示缩放按钮，默认为true
"showZoom": true
}
);
//添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.AttributionControl({
//是否折叠属性信息
compact: true,
//自定义属性信息
customAttribution: ["中地数码", "GIS高校论坛"]
}));
const scale = new mapboxgl.ScaleControl({
unit: 'metric|imperial' //默认为公里
})
map.addControl(scale);
map.on('mousemove', function (e) {
const { lng, lat } = e.lngLat;
document.getElementById('mouse-position').innerHTML = `
经度:${lng.toFixed(2)},纬度:${lat.toFixed(2)}
`
});
map.on("load", function () {
/* 这个不是mapbox本身的 插件 */
map.addControl(new mapboxgl.Minimap({
center: [114, 30],
zoom: 6,
zoomLevels: []
}), 'top-right');
});
</script>
</body>
</html>二、加载geojson数据
GeoJSON是一种基于JSON的地理空间数据格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据
Geojson数据得格式
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "入口1"
},
"geometry": {
"type": "Point",
"coordinates": [
114.121636,
30.463967
]
}
}
]
}如何制作geojaon数据呢？
这里给大家一个网站，想要什么样的geojson数据，自己造就行！！
json数据加载方法
1、ajax请求加载
<body>
<!-- 2、设置地图容器的挂载点 -->
<div id="map">
</div>
<script>
/* 3、实例化地图 */
mapboxgl.accessToken = '你的token';
const map = new mapboxgl.Map({
/* 将地图挂载到对应的DOM上 相当于ol的target */
container: "map",
/* 相当于ol的layers */
style: "mapbox://styles/mapbox/streets-v12",
center: [114.30, 30.50],
zoom: 5
})
/* 定制化背景 */
map.on("style.load", () => {
map.setFog({
})
$.ajax({
url: "https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json"
}).then(res => {
console.log(res)
map.addLayer({
id: "hubei",
type: "fill",
source: {
type: "geojson",
data: res
},
/* 绘制地图的样式 */
paint: {
'fill-color': "#ff2d51",
'fill-opacity':0.5
}
})
})
})
</script>
</body>2、直接加载geojson数据的url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [116.391361, 39.904310], // starting position [lng, lat]
zoom: 1, // starting zoom
})
let data = 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson';
map.on("style.load", () => {
map.addSource("source", {
type: "geojson",
/* data可以接收geojson的变量,也可以接收geojson的url地址 */
data
})
map.addLayer({
id: "layer",
source: "source",
type: "fill",
paint: {
'fill-color': "red"
}
})
})
</script>
</body>
</html>3、文件形式加载
导入geojson文件
加载
4、以声明变量的形式加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* token */
mapboxgl.accessToken = '你的token'
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [114.40218, 30.473101], // starting position [lng, lat]
zoom: 14, // starting zoom
})
let data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"height": 100,
"color": "#ff2d51"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[114.401964, 30.463747],
[114.401964, 30.467473],
[114.407109, 30.467473],
[114.407109, 30.463747],
[114.401964, 30.463747]
]
]
}
},
{
"type": "Feature",
"properties": {
"height": 200,
"color": "#652e80"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[114.409703, 30.465349],
[114.409703, 30.468815],
[114.415324, 30.468815],
[114.415324, 30.465349],
[114.409703, 30.465349]
]
]
}
},
{
"type": "Feature",
"properties": {
"height": 300,
"color": "green"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[114.40218, 30.470865],
[114.40218, 30.473101],
[114.408579, 30.473101],
[114.408579, 30.470865],
[114.40218, 30.470865]
]
]
}
}
]
}
map.on("style.load", () => {
map.addSource("source", {
type: "geojson",
data
})
/* 算法 加载海量数据 */
map.addLayer({
id: "layer",
source: "source",
type: "fill-extrusion",
paint: {
"fill-extrusion-height": ['get', 'height'],
// 'fill-extrusion-height': ["get", "people"], bug
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-opacity': 0.5,
/* 设置要素离水平面的高度 */
}
})
})
</script>
</body>
</html>ok，今天先到这里，掌握以上内容，geojson数据你就可以想怎么加载就怎么加载了！！
原文地址：https://blog.csdn.net/qq_45751819/article/details/143487348
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！