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基础的更多相关文章

mapboxgl 互联网地图纠偏插件（一）
之前写过一个 leaflet 互联网地图纠偏插件,引用插件后一行代码都不用写,就能解决国内互联网地图瓦片的偏移问题. 最近想对 mapboxgl 也写一个这样的插件. 原因是自己发布的OSM矢量瓦片地 ...
mapboxgl 互联网地图纠偏插件（二）
前段时间写的mapboxgl 互联网地图纠偏插件(一)存在地图旋转时瓦片错位的问题. 这次没有再跟 mapboxgl 的变换矩阵较劲,而是另辟蹊径使用 mapboxgl 的自定义图层,重新写了一套加载 ...
mapboxgl 中插值表达式的应用场景
目录一.前言二.语法三.对地图颜色进行拉伸渲染 1. 热力图 2. 轨迹图 2. 模型网格渲染四.随着地图缩放对图形属性进行插值五.interpolate的高阶用法六.总结一.前言 in ...
java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法下载windows x64版本下载之后解压,得到以下东西为了方便,我们直接在这个目录中 ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
Golang，以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
[C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法目录简介匿名方法的参数使用范围委托示例简介在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

随机推荐

Kubernetes(k8s)存储管理之数据卷volumes(一)：volumes的引入和emptyDir数据卷
目录一.系统环境二.前言三.Docker数据卷volumes 四.Kubernetes 数据卷volumes 4.1 有状态容器和无状态容器 4.2 Kubernetes 数据卷volumes解 ...
ORM增删改查 django请求生命周期图 django路由层及反向解析
目录可视化界面之数据增删改查 1.建表 2.数据展示功能 3.数据添加功能 4.数据编辑功能 5.数据删除功能 django请求生命周期流程图 django路由层 1.路由匹配 2.转换器功能 pa ...
Jenkins&&gitlab2
Jenkins slave 添加jenkins slave节点: jenkins slave节点创建工作目录与基本环境配置,如果jenkins slave节点需要clone代码和执行java 代码编 ...
CTFshow——funnyrsa2
题目如下: 题目分析: 发现n很小,可以考虑yafu分解n,或者使用在线网站,例如:http://factordb.com/.即得p,q,r.因为常规rsa只有p和q,则phi = (p -1) * ...
万字长文解析Scaled YOLOv4模型(YOLO变体模型)
一,Scaled YOLOv4 摘要 1,介绍 2,相关工作 2.1,模型缩放 3,模型缩放原则 3.1,模型缩放的常规原则 3.2,为低端设备缩放的tiny模型 3.3,为高端设备缩放的Large模 ...
C++ 之 cout 格式化输出
写代码时每次用到格式化输出就各种搜来搜去,今天好好整理一下,方便以后查阅和使用. 参考链接: C++ 之 cout 使用攻略 C++ 格式化输出首先,加上头文件 #include <ioman ...
Python自动化操作sqlite数据库
你好,我是悦创. 原文首发:https://bornforthis.cn/column/pyauto/ 1. 什么是数据库数据库是"按照数据结构来组织.存储和管理数据的仓库",是 ...
Flutter异常监控 - 肆 | Rollbar源码赏析
一. Rollbar可以帮你解决哪些问题无特别说明,文中Rollbar统指Rollbar-flutter 1. 代码复用 Rollbar官方文档说是纯Dart实现,该特征意味着自带"代码复 ...
java入门与进阶 P-3.2+P-3.3+P3.4
数数字例如:Scanner sc = new Scanner(System.in);int number = sc.nextInt();int count= 0;while(number>0) ...
Vue项目 invalid host header 问题配置 disableHostCheck:true报错
项目场景: 解决 Vue 项目 invalid host header 问题disableHostCheck:true报错问题描述使用内网穿透时出现 invalid host header 找了好 ...

MapboxGL基础

1. 概述

2. 初始化

3. 地图漫游

4. 地图样式

5. 加载地形

6. 自动旋转

7. 地图控件

8. 相机转动

9. 代码小结

10. 参考资料

MapboxGL基础的更多相关文章

随机推荐

热门专题