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. 软件开发架构、构架趋势、OSI七层协议

    目录 软件开发架构 构架总结 网络编程前戏 OSI七层协议简介 OSI七层协议值之物理连接层 OSI七层协议之数据链层 网络相关专业名词 OSI七层协议之网络层 IP协议: IP地址特征: IP地址分 ...

  2. maven 项目依赖自动导入失败(pom.xml 文件爆红)，解决--手动导入

    idea 报错信息提示:Dependency 'xxx' not found 解决方法:可以通过更换仓库的镜像配置解决,但是一般咱都在配置maven的时候,设置成阿里云仓库镜像了,更换成其他的,可能出 ...

  3. vue项目引入echarts柱状图

    一.components文件下引入 barCharts.vue文件 <template> <div :class="className" :style=" ...

  4. [论文总结] kmeans聚类和WGCNA

    kmeans聚类和WGCNA 文章目录 kmeans聚类和WGCNA 论文1 论文2 论文3 总结 总结了3篇论文中kmeans聚类和WGCNA的运用. 论文1 Comprehensive disse ...

  5. .Net 6 使用 Consul 实现服务注册与发现 看这篇就够了

    前言 在这几年的工作中,也经历过几个微服务项目,大多数都上了k8s,基本上都看不到Consul的身影,所以在工作之余折腾了下Consul,作为个人来讲还是得学习下,所以也就顺便通过文章来记录下学习过程 ...

  6. cmd无限弹窗

    记一次写 .bat 文件时犯的低级错误,搞的重启了好几次才发现问题所在 如下 文件名 和 批处理 内容 会造成 无限弹出cmd窗口 原因是一般情况下会启动系统的 cmd.exe,而此处用的简写,在执行 ...

  7. python之路52 ORM查询、ORM事务、查询优化、常用字段及参数、ajax方法

    Q查询进阶操作 from django.db.models import Q q_obj = Q() # 1.产生q对象 q_obj.connector = 'or' # 默认多个条件的连接是and可 ...

  8. [C#]简单的理解委托和事件

    委托 在C++中可以利用"函数指针"将对方法的引用作为实参传递给另一个方法,而C#中可以利用委托提供相同的功能. 委托-内部机制 但是委托实际上是一个特殊的类.委托必须直接或间接的 ...

  9. P3845 [TJOI2007]球赛

    简要题意 \(T\) 组数据,每一组数据给出 \(n\) 个数对 \((a,b)\).你需要将其分为几组,使得组单调不降.求最小组数. 思路 模拟赛考的题. 先来介绍 Dilworth 定理: 对于任 ...

  10. Ubuntu 22.04 安装搜狗输入法

    下载搜狗输入法 下载地址https://shurufa.sogou.com/linux 也可以命令下载 wget https://ime.sogouimecdn.com/202212182151/3b ...