地图引擎(WebGIS)之MapBox的基础使用
目录
一、MapBox
1.1、js显示(高德地图)
1.2、l7&mapbox
1.3、案例
1.3.1、加载深圳市数据
1.3.2、漫游(flyTo)效果
1.3.3、底层(layer-style)切换
1.3.4、地形数据加载
1.3.5、事件控制地球自转与暂停
1.3.6、沙盘的白天黑夜切换
1.3.7、地图控件
1.3.8、geojson加载数据
1.3.9、addSource
1.3.10、设置鼠标形状
1.4、vue3中引入并应用
1.4.1、安装配置
1.4.2、代码应用
一、MapBox
官网： Mapbox Docs
JS语法模块： Mapbox GL JS | Mapbox
Openlayer、Leaflet相关应用：4、leaflet · 语雀
1.1、js显示(高德地图)
效果展示：
跟随鼠标操作可以放大缩小、俯仰角观看，左右摇摆式观看
代码分析：
1.2、l7&mapbox
L7(地理数据可视化)官网： 快速上手 | AntV L7 地理空间数据可视化引擎
科普：7代表7大洲
1.3、案例
1.3.1、加载深圳市数据
https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json
效果展示:
核心代码：
// L7.PolyonLayer scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json') .then(res => res.json()) .then(data => { console.log(data); const layer = new L7.PolyonLayer({});//实例化(区域)图层 layer.source(data)//加载数据 .shape('extrude')//视图区域层有高度 .size('h20')//可以直接获取geojson中properties里的属性值 .active(true) scene.addLayer(layer) }) })1.3.2、漫游(flyTo)效果
1.3.3、底层(layer-style)切换
设置不同样式：Styles API | API Docs | Mapbox
1.3.4、地形数据加载
相当于地图中的山脉形状也清晰可见了。
1.3.5、事件控制地球自转与暂停
地球自转本质：每间隔一段时间经度累加，通过easeTo()开始旋转,通过stop()停止旋转;
//===========================模仿原理==================== map.on('click', () => { setInterval(() => { let center = map.getCenter(); center.lng += 10;//地球自转：经度累加 map.setCenter(center) }, 50) }) //===========================官方api实现==================== let isUserInterface = false; map.on('click', () => { isUserInterface = !isUserInterface; if (isUserInterface) { map.stop();//停止旋转 } else { rotateMap(); } }) map.on('moveend', () => { rotateMap();//当地球停止旋转时，触发旋转事件 }) function rotateMap() { const zoom = map.getZoom() if (zoom < 5 && !isUserInterface) { let center = map.getCenter(); center.lng += 10;//地球自转：经度累加 map.easeTo({//easeTo相当于setInterval center, duration: 1000,//间隔时长 easing: n => n }) } } rotateMap();1.3.6、沙盘的白天黑夜切换
其实就是设置不同的setFog；
map.on('moveend', () => { rotateMap();//当地球停止旋转时，触发旋转事件 }) function rotateMap() { let bearing = map.getBearing(); bearing += 10; if (bearing < 0) { map.setFog({ range: [-1, 2], 'horizon-blend': 0.3, color: "#242B4B",//黑夜 "high-color": '#161B36', "space-color": '#0B1026', 'star-intensity': 0.8 }) } else { map.setFog({ range: [-1, 2], 'horizon-blend': 0.3, color: "white",//白天 "high-color": '#add8e6', "space-color": '#d8f2ff', 'star-intensity': 0.0 }) } map.easeTo({//easeTo相当于setInterval bearing: bearing, duration: 1000,//间隔时长 easing: n => n }) }1.3.7、地图控件
1.3.8、geojson加载数据
获取湖北省的地图数据：DataV.GeoAtlas地理小工具系列
1.3.9、addSource
addLayer可以单独使用，也可以结合addSource一起使用；
// http请求后的图层已经加载到map的style属性中了 map.addSource("hubei", { type: 'geojson', data: res }) map.addLayer({ id: 'hubei-layer', type: 'fill', source: "hubei", // 绘制地图样式 paint: { 'fill-color': '#ff2d51', 'fill-opacity': .5 } })1.3.10、设置鼠标形状
map.on("load", function () { map.on('mouseenter', 'Point', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'Point', () => { map.getCanvas().style.cursor = 'default'; }); })1.4、vue3中引入并应用
1.4.1、安装配置
(1)、npm i mapbox-gl
(2)、设置.env,这里的token 是临时的，可以去官网注册一个新的
VITE_TOKEN ='pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
(3)、配置main.js
1.4.2、代码应用
(1)、初始化地图
(2)、将地图挂载到全局
BoxMap.vue代码：
BoxGeoJSON.vue代码：geojson加载-点击事件漫游
注意：这些只是基础使用，其他的属性和方法自行查找官网，慢慢研究。