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. 【Zookeeper】结构、应用、安装部署与参数、客户端命令行操作、API应用、内部原理（选举机制、写数据、监听器）

    一.Zookeeper入门 1.概述 分布式服务管理框架(存储和管理数据) Zookeeper=文件系统+通知机制 2.特点 主从集群 半数以上,正常工作 请求顺序执行 数据更新具有原子性 3.数据结 ...

  2. 24V转5V降压芯片，24V转3.3V的稳压芯片，中文规格书

    一般说明PW2312 是一个高频,同步,整流,降压,开关模式转换器内部功率 MOSFET.它提供了一个非常紧凑的解决方案,以实现 1.5A 的峰值输出电流在广泛的输入电源范围内,具有优良的负载和线路调 ...

  3. Py2neo:一种快速导入百万数据到Neo4j的方式

    Py2neo:一种快速导入百万数据到Neo4j的方式 Py2neo是一个可以和Neo4j图数据库进行交互的python包.虽然py2neo操作简单方便,但是当节点和关系达几十上百万时,直接创建和导入节 ...

  4. Mybatis-9.28

    Mybatis-9.28 环境: JDK1.8 Mysql 5.7 maven 3.6.1 IDEA 回顾: JDBC Mysql Java基础 Maven Junit SSM框架:配置文件的. 最好 ...

  5. [深度学习] tf.keras入门1-基本函数介绍

    目录 构建一个简单的模型 序贯(Sequential)模型 网络层的构造 模型训练和参数评价 模型训练 模型的训练 tf.data的数据集 模型评估和预测 基本模型的建立 网络层模型 模型子类函数构建 ...

  6. Hadoop详解(10) - Hadoop HA高可用

    Hadoop详解(10) - Hadoop HA高可用 HA概述 HA(High Availablity),即高可用(7*24小时不中断服务). 实现高可用最关键的策略是消除单点故障.HA严格来说应该 ...

  7. Codeforces Gym 104059B - Breeding Bugs

    简要题意 Virtual Judge 传送门 | Codeforces Gym 传送门 给出一个长度为 \(n\) 的序列 \(a\),你需要从中选出一些数,使其两两相加不为质数.输出最大可以选择多少 ...

  8. vue学习笔记（一） ---- vue指令（v-for 和 key 属性）

    vue指令之v-for和key属性 一. v-for 1. v-for遍历数组 <div id="app"> <h3>好饿,我好想吃~~~~</h3& ...

  9. Node.js学习笔记----day05 (Promise详情)

    认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.回调函数 回调的含义:异步任务里面又嵌套了异步 如图: 没有使用回调之前读取文件,没有办法保证每次执行顺序都是 a--->b---& ...

  10. Spring AOP与AspectJ的对比及应用

    1 简介 AOP,即面向切面编程是很常用的技术,特别是在Java Web开发中.而最流行的AOP框架分别是Spring AOP和AspectJ. 2 Spring AOP vs AspectJ Spr ...