mapbox地图的使用方法

在使用mapbox之前需要到官网去注册账号，然后会拿到一个Access tokens，只有拿到了这个token你才能使用mapbox地图，我们可以用两种方式引入mapbox GL js

1. 使用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>

2 使用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": '坐标点2<p>asfdasfdas</p>'
                                    }
                                }
                            ],

                        },
                    },
                    "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图的分解），然后用户看到的就是能动的动画啦