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阵营人士,少少多多总喜欢通过对 ...
随机推荐
- 详记apache-poi的使用，将word,excel,ppt转换为html
原文:https://blog.51cto.com/yunyaniu/5210961 java:Java的jar包之POI的简介.安装.使用方法(基于POI的转换-Word.Excel.Ppt等转ht ...
- 使用 System.Text.Json 时，如何处理 Dictionary 中 Key 为自定义类型的问题
在使用 System.Text.Json 进行 JSON 序列化和反序列化操作时,我们会遇到一个问题:如何处理字典中的 Key 为自定义类型的问题. 背景说明 例如,我们有如下代码: // 定义一 ...
- MYSQL进阶学习笔记
MySQL在Linux中的使用: 1.查看mysql在linux的安装版本 mysqladmin –version 2.mysql服务的启动与停止 (1).启动: service mysql star ...
- C语言两结构体之间的成员互换
今天在写一个通讯录实现程序的时候,遇到个让我突然卡壳的问题,不知道怎么进行两个结构体之间的成员互换......结构体成员有"姓名","性别","年龄& ...
- Hadoop详解(09) - Hadoop新特性
Hadoop详解(09) - Hadoop新特性 Hadoop2.x新特性 远程主机之间的文件复制 scp实现两个远程主机之间的文件复制 推 push:scp -r hello.txt root@ha ...
- 牛客小白月赛65ABCD(E)
比赛链接:牛客小白月赛65_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ (nowcoder.com) A:牛牛去购物 题意 ...
- python命令行参数argparse常用命令
1.参数个数控制 parser.add_argument('-i', '--integers', nargs='?', const=100, type=int, help='input a numbe ...
- vulnhub靶场之FUNBOX: GAOKAO
准备: 攻击机:虚拟机kali.本机win10. 靶机:Funbox: GaoKao,下载地址:https://download.vulnhub.com/funbox/FunboxGaoKao.ova ...
- 特定领域知识图谱融合方案：文本匹配算法(Simnet、Simcse、Diffcse)
特定领域知识图谱融合方案:文本匹配算法(Simnet.Simcse.Diffcse) 本项目链接:https://aistudio.baidu.com/aistudio/projectdetail/5 ...
- ApiView/Request类源码分析/序列化器
内容概要 ApiView+JsonResponse编写接口 ApiView+Response编写接口 ApiView源码解析 Request对象源码分析 序列化器介绍和快速使用/反序列化 反序列化的校 ...