mapbox地图的使用方法-总结
今天刚好有时间就来总结下mapbox的用法吧
自己选择的路跪着也要走完
在使用mapbox之前需要到官网去注册账号，然后会拿到一个Access tokens，只有拿到了这个token你才能使用mapbox地图，我们可以用两种方式引入mapbox GL js
- 使用mapbox的cdn
<script src='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
next
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10'
});
</script>
-
使用npm模板绑定
下载npm包
npm install mapbox-gl --save引入css文件
<link href='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />添加地图
var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js'); mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA'; var map = new mapboxgl.Map({ container: 'YOUR_CONTAINER_ELEMENT_ID', style:'mapbox://styles/mapbox/streets-v10' })这样地图的初始化就完成了，然后自己就可以在原有的地图上添加事件了。下面是我做的一张demo的图片
设置语言显示
map.addControl(new MapboxLanguage({
defaultLanguage: 'zh'
}));
设置water,buildings颜色
map.setPaintProperty('water','fill-color','#a1dab4');
1. 3D绘制
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
// 'filter': ['==', 'extrude', 'true'], /* 过滤器 */
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#ffffff',//颜色
'fill-extrusion-height': { /* 使用source中的height属性为fill-extrusion-height赋值 */
'type': 'identity',
'property': 'height',
},
'fill-extrusion-base': {
'type': 'identity',
'property': 'min_height'
},
'fill-extrusion-opacity': 1//透明度
}
});
2.绘制阴影面积
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
104.06616926193237,
30.553872161234633
],
[
104.05172824859619,
30.55372433465804
],
[
104.05170679092407,
30.55132212123368
],
[
104.05044078826904,
30.54932639102504
],
[
104.06657695770264,
30.54932639102504
],
[
104.06616926193237,
30.553872161234633
]
]
]
},
id:'3'
}
},
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity':["case",
["boolean", ["feature-state", "hover"], false],//判断鼠标移上去显示颜色
1,
0.5
]
}
});
3.地图上自定义建筑体
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': {
'type': 'geojson',
'data': {
"features": [
{
"type": "Feature",
"properties": {
"level": 1,
"name": "Bird Exhibit",
"height": 10,
"base_height": 0,
"color": "red"
},
"geometry": {
"coordinates": [
[
[104.061089, 30.547254],
[104.061089, 30.547380],
[104.061180, 30.547380],
[104.061180, 30.547250],
[104.061089, 30.547254],
]
],
"type": "Polygon"
},
"id": "08a10ab2bf15c4d14669b588062f7f08"
},
{
"type": "Feature",
"properties": {
"level": 1,
"name": "Ancient Egypt",
"height": 30,
"base_height": 0,
"color": "blue"
},
"geometry": {
"coordinates": [
[
[104.061089, 30.547254],
[104.061089, 30.547140],
[104.061180, 30.547140],
[104.061180, 30.547200],
[104.061180, 30.547254]
]
],
"type": "Polygon"
},
},
],
"type": "FeatureCollection",
}
},
'paint': {
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'base_height'],
'fill-extrusion-opacity': 0.5
}
});
4.绘制line且颜色渐变
map.addSource('line', {
type: 'geojson',
lineMetrics: true,
data: geojson
});
map.addLayer({
type: 'line',
source: 'line',
id: 'line',
paint:{
'line-color':'red',
'line-width':5,
'line-gradient':[
'interpolate',
['linear'],
['line-progress'],
0,'blue',
0.1,'royalblue',
0.3,'cyan',
0.5,'lime',
0.7,'yellow',
1,'red'
]
},
layout:{
'line-cap':'round',
'line-join':'round'
}
});
5.0绘制图片
map.loadImage('./dingwei.png', function(error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [104.061089,30.547254]
},
"properties": {
"name": '坐标点1'
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 104.05436754226685, 30.55174713255279]
},
"properties": {
"name": '坐标点2asfdasfdas
'
}
}
],
},
},
"layout": {
"icon-image": "cat",
"icon-size": 0.1
}
});
});
地图事件
var hoveredStateId = null;
//鼠标放上去
map.on('mousemove','maine',function (e) {
if(hoveredStateId){
map.setFeatureState({source: 'maine', id: hoveredStateId}, { hover: false});
}
hoveredStateId = e.features[0].id;
map.setFeatureState({source: 'maine',id:hoveredStateId}, { hover: true});
});
// 鼠标移开
map.on('mouseleave','maine',function(e){
if(hoveredStateId){
map.setFeatureState({source: 'maine',id:hoveredStateId}, { hover: false})
}
hoveredStateId = null;
})；
//点击定位点弹出内容框
map.on('click','points',function (e) {
console.log(e);
// map.setCenter()
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map)
})
还有一般我们在地图上添加个gif图地图能自动识别这样我们在定位时就会有一个动态的效果，但是mapbox不能自动识别gif图，他会将gif图还是识别成静态的png图片放在地图上，如果需要在mapbox中实现图片的动态效果，需要将gif图通过工具转换成无数张的png图片，然后mapbox通过setInterval方法去调用不同的png图片（连续帧下的gif图的分解），然后用户看到的就是能动的动画啦
