地图引擎(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显示(高德地图)
效果展示：
跟随鼠标操作可以放大缩小、俯仰角观看，左右摇摆式观看
代码分析：
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
1.2、l7&mapbox
L7(地理数据可视化)官网： 快速上手 | AntV L7 地理空间数据可视化引擎
科普：7代表7大洲
1.3、案例
1.3.1、加载深圳市数据
http://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json
效果展示:
核心代码：
// L7.PolyonLayer
scene.on('loaded', () => {
fetch('http://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)效果
#btn {
width: 200px;
height: 50px;
position: fixed;
top: 20px;
right: 30px;
z-index: 100;
}
1.3.3、底层(layer-style)切换
设置不同样式：Styles API | API Docs | Mapbox
#btn {
width: 200px;
height: 50px;
position: fixed;
top: 20px;
right: 30px;
z-index: 100;
}
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 n
})
}
}
rotateMap();1.3.6、沙盘的白天黑夜切换
其实就是设置不同的setFog；
map.on('moveend', () => {
rotateMap();//当地球停止旋转时，触发旋转事件
})
function rotateMap() {
let bearing = map.getBearing();
bearing += 10;
if (bearing 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)、初始化地图
#map{
position: absolute;
top:0;
right:0;
left:0;
bottom: 0;
}
(2)、将地图挂载到全局
BoxMap.vue代码：
#map {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
BoxGeoJSON.vue代码：geojson加载-点击事件漫游
#btn {
width: 200px;
height: 50px;
background-color: #ff2d51;
position: fixed;
z-index: 100;
top: 10px;
right: 50px;
}
注意：这些只是基础使用，其他的属性和方法自行查找官网，慢慢研究。
