MapboxGL基础

1. 概述

Mapbox GL 是一套开源库，用于在 Web、移动和桌面应用程序中嵌入可自定义且响应迅速的客户端地图。Mapbox GL 贴图以高帧速率呈现。缩写“GL”来自行业标准的Open Graphics Library （OpenGL）。

Mapbox官网：Mapbox GL JS

Mapbox中文站点：Mapbox

Mapbox GitHub地址：mapbox/mapbox-gl-js: Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL (github.com)

中文站点的官方示例：www.mapbox.cn/mapbox-gl-js/examples/

中文站点的API文档：www.mapbox.cn/mapbox-gl-js/api/

2. 初始化

使用CDN加载MapboxGL ：

<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">

<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>

使用Mapbox的资源需要申请Token，可以参考：access token | Help | Mapbox

设置Token：

mapboxgl.accessToken = 'pk.eyJ1IjoieWFuZ2ppYW4iLCJhIjoiY2phaG1neno0MXFkNDMzbWhwNWw0bWM4aiJ9.CFmrh0LVWAbmVeed-Xr7wA';

初始化一个地图：

const map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/mapbox/streets-v11',

center: [-73.935242, 40.730610],

zoom: 2,

projection: 'globe'

});

具体参数参考：Map | Mapbox GL JS | Mapbox

3. 地图漫游

这里的地图漫游是使用flyTo函数实现：

map.flyTo({

    center: [112.92850, 28.18],

    zoom: 14,

    speed: 0.4,

    pitch: 60,

})

具体参数参考：Map | Mapbox GL JS | Mapbox

4. 地图样式

这里的地图样式是使用·setStyle·函数进行切换：

map.setStyle('mapbox://styles/mapbox/dark-v10')

具体参数参考：Map | Mapbox GL JS | Mapbox

5. 加载地形

参考官方示例：Add 3D terrain to a map | Mapbox GL JS | Mapbox

map.on('load', () => {

map.addSource('mapbox-dem', {

'type': 'raster-dem',

'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',

'tileSize': 512,

'maxzoom': 14

});

// add the DEM source as a terrain layer with exaggerated height

map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

})

具体参数参考：Map | Mapbox GL JS | Mapbox

6. 自动旋转

这里的旋转是指按照经纬度进行移动：

function rotate() {

    let center = map.getCenter();

    map.easeTo({

        center: [center.lng + 40, center.lat],

        zoom: 2,

        speed: 0.5

    })

    requestAnimationFrame(rotate);

}

具体参数参考：Map | Mapbox GL JS | Mapbox

7. 地图控件

这里加载有全屏控件、定位控件、比例尺控件、地理搜索控件和导航控件，其中地理搜索控件作为插件需要额外添加CDN：

<!-- Load the `mapbox-gl-geocoder` plugin. -->

<script

        src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>

<link rel="stylesheet"

      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"

      type="text/css">

添加控件：

map.addControl(new mapboxgl.FullscreenControl());

map.addControl(new mapboxgl.GeolocateControl({

    positionOptions: {

        enableHighAccuracy: true

    },

    trackUserLocation: true

}));

map.addControl(new mapboxgl.ScaleControl({

    maxWidth: 200,

    unit: 'metric'

}), 'bottom-left');

map.addControl(new MapboxGeocoder({

    accessToken: mapboxgl.accessToken,

    mapboxgl: mapboxgl

}), 'top-left');

map.addControl(new mapboxgl.NavigationControl(), 'top-left');

具体参数参考：Map | Mapbox GL JS | Mapbox

8. 相机转动

这里的相机转动是一种视角的转动，使用rotateTo函数实现：

function rotateCamera(timestrip) {

    map.rotateTo(timestrip / 100 % 360, { duration: 0 });

    rotateFlag = requestAnimationFrame(rotateCamera);

}

具体参数参考：Map | Mapbox GL JS | Mapbox

9. 代码小结

上述代码的实现效果可见：Document (mapboxstudy.netlify.app)

上述的全部代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>

    <!-- Load the `mapbox-gl-geocoder` plugin. -->

    <script

        src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>

    <link rel="stylesheet"

        href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"

        type="text/css">

    <div id="info"></div>

    <style>

        #map {

            position: absolute;

            top: 0;

            left: 0;

            height: 100%;

            width: 100%;

        }

        #select_div {

            position: absolute;

            top: 20px;

            right: 168px;

            width: 20px;

            height: 20px;

            z-index: 100;

            border-radius: 20%;

        }

        #coordinate_div {

            position: absolute;

            bottom: 60px;

            left: 20px;

            color: blue;

            z-index: 100;

        }

        #coordinate_div>p {

            margin: 2px;

        }

    </style>

</head>

<body>

    <div id="select_div">

        <select name="" id="select">

            <option value="Select">--Select--</option>

            <option value="streets-v11">streets-v11</option>

            <option value="dark-v10">dark-v10</option>

            <option value="satellite-streets-v11">satellite-streets-v11</option>

        </select>

    </div>

    <div id="coordinate_div">

        <p>Lng: <span id="longitude"></span></p>

        <p>Lat: <span id="latitude"></span></p>

    </div>

    <div id='map'></div>

    <script>

        mapboxgl.accessToken = 'pk.eyJ1IjoieWFuZ2ppYW4iLCJhIjoiY2phaG1neno0MXFkNDMzbWhwNWw0bWM4aiJ9.CFmrh0LVWAbmVeed-Xr7wA';

        const map = new mapboxgl.Map({

            container: 'map',

            style: 'mapbox://styles/mapbox/streets-v11',

            center: [-73.935242, 40.730610],

            zoom: 2,

            projection: 'globe'

        });

        map.addControl(new mapboxgl.FullscreenControl());

        map.addControl(new mapboxgl.GeolocateControl({

            positionOptions: {

                enableHighAccuracy: true

            },

            trackUserLocation: true

        }));

        map.addControl(new mapboxgl.ScaleControl({

            maxWidth: 200,

            unit: 'metric'

        }), 'bottom-left');

        map.addControl(new MapboxGeocoder({

            accessToken: mapboxgl.accessToken,

            mapboxgl: mapboxgl

        }), 'top-left');

        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        map.on('load', function () {

            rotate();

        })

        map.on('style.load', function () {

            map.setFog({})

        })

        map.on('mousemove', function (e) {

            document.getElementById('longitude').innerHTML = e.lngLat.lng.toFixed(5);

            document.getElementById('latitude').innerHTML = e.lngLat.lat.toFixed(5);

        });

        map.on('click', function (e) {

            if (!initFlag && rotateFlag) {

                // if (rotateFlag) {

                cancelAnimationFrame(rotateFlag);

                rotateFlag = null;

                // } else {

                //     startTime = Date.now();

                //     rotateCamera(Date.now())

                // }

            }

        })

        map.on('move', function (e) {

        })

        document.querySelector('#select').addEventListener('change', function () {

            map.setStyle('mapbox://styles/mapbox/' + this.value);

        })

        setTimeout(() => {

            cancelAnimationFrame(rotateFlag);

            map.flyTo({

                center: [112.92850, 28.18],

                zoom: 14,

                speed: 0.4,

                pitch: 60,

            })

            map.addSource('mapbox-dem', {

                'type': 'raster-dem',

                'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',

                'tileSize': 512,

                'maxzoom': 14

            });

            map.setTerrain({

                source: 'mapbox-dem',

                exaggeration: 2,

            });

            setTimeout(() => {

                initFlag = false;

                startTime = Date.now();

                rotateCamera(Date.now())

            }, 14000)

        }, 20000);

        let rotateFlag = false;

        let initFlag = true;

        let startTime;

        function rotate() {

            let center = map.getCenter();

            map.easeTo({

                center: [center.lng + 40, center.lat],

                zoom: 2,

                speed: 0.5

            })

            rotateFlag = requestAnimationFrame(rotate);

        }

        function rotateCamera(timestrip) {

            map.rotateTo((Date.now() - startTime) / 100 % 360, { duration: 0 });

            rotateFlag = requestAnimationFrame(rotateCamera);

        }

    </script>

</body>

</html>

10. 参考资料

[1]Map | Mapbox GL JS | Mapbox

[2]Examples | Mapbox GL JS | Mapbox

[3]Mapbox

巴特西

MapboxGL基础

1. 概述

2. 初始化

3. 地图漫游

4. 地图样式

5. 加载地形

6. 自动旋转

7. 地图控件

8. 相机转动

9. 代码小结

10. 参考资料

最新文章

热门文章