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. mapboxgl 互联网地图纠偏插件（一）

    之前写过一个 leaflet 互联网地图纠偏插件,引用插件后一行代码都不用写,就能解决国内互联网地图瓦片的偏移问题. 最近想对 mapboxgl 也写一个这样的插件. 原因是自己发布的OSM矢量瓦片地 ...

  2. mapboxgl 互联网地图纠偏插件（二）

    前段时间写的mapboxgl 互联网地图纠偏插件(一)存在地图旋转时瓦片错位的问题. 这次没有再跟 mapboxgl 的变换矩阵较劲,而是另辟蹊径使用 mapboxgl 的自定义图层,重新写了一套加载 ...

  3. mapboxgl 中插值表达式的应用场景

    目录 一.前言 二.语法 三.对地图颜色进行拉伸渲染 1. 热力图 2. 轨迹图 2. 模型网格渲染 四.随着地图缩放对图形属性进行插值 五.interpolate的高阶用法 六.总结 一.前言 in ...

  4. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  5. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  8. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  9. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  10. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

随机推荐

  1. 《HTTP权威指南》– 6.代理

    代理的概念: Web代理服务器是网络的中间实体.位于客户端和服务器之间,扮演"中间人"的角色,在各端点之间来回传送HTTP报文. 私有和共享代理: 代理服务器可以是某个客户端专用的 ...

  2. 获取Exceptionless的日志

    简言: 最近做项目要用到Exceptionless这个分布式日志组件,由于领导说日志需要提供给客户看,废话不多讲,咱直入主题了: 第一步:查看API文档 打开:http://127.0.0.1:500 ...

  3. docker registry（私库）搭建，使用，WEB可视化管理部署

    Docker Registry 是Docker官方一个镜像,可以用来储存和分发Docker镜像.目前比较流行的两个镜像私库是Docker Registry ,HarBor 其中HarBor最合适企业级 ...

  4. python 之匿名函数(lambda)

    什么是匿名函数?匿名函数就是不用def关键字,使用lambda关键字定义的一个函数.匿名函数简约而不简单. 匿名函数的格式: lambda[ paramters1, paramters2 , .... ...

  5. 基于容器的PaaS混合云的几种形式

    概述 这是 Gartner 的一个图,提供了全球的基于容器的 PaaS 公有云.混合云服务的梳理展示: 这里提供一个其他的视角: 中国市场,基于容器的 PaaS 混合云(公有云 + 私有云)的相关厂商 ...

  6. Redis基础学习笔记

    技术分类: 1.解决功能性的问题:Java.Jsp.RDBMS.Tomcat.HTML.Linux.JDBC.SVN 2.解决扩展性的问题:Struts.Spring.SpringMVC.Hibern ...

  7. 【转载】VUE入门教程

    vue-cli是官方提供的一个脚手架,用于快速生成一vue项目,有点类似java中使用maven构建项目 需要环境 Node.js : http://nodejs.cn/download/ 安装完后在 ...

  8. Vue + Element 自定义上传封面组件

    前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件.先来看一下效果:                        第一张图片是上传之前,第二张图片是上传 ...

  9. P1278 单词游戏【题解】(状压dp)

    单词游戏 题目描述 Io和Ao在玩一个单词游戏. 他们轮流说出一个仅包含元音字母的单词,并且后一个单词的第一个字母必须与前一个单词的最后一个字母一致. 游戏可以从任何一个单词开始. 任何单词禁止说两遍 ...

  10. Windows Server上部署IoTdb 集群

    本文是参考官方的 IoTDB 集群版(1.0.0)的安装及启动教程:https://iotdb.apache.org/zh/UserGuide/V1.0.x/Cluster/Cluster-Setup ...