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阵营人士,少少多多总喜欢通过对 ...
随机推荐
- 【消息队列面试】15-17：高性能和高吞吐、pull和push、各种MQ的区别
十五.kafka高性能.高吞吐的原因 1.应用 日志收集(高频率.数据量大) 2.如何保证 (1)磁盘的顺序读写-pagecache关联 rabbitmq基于内存读写,而kafka基于磁盘读写,但却拥 ...
- MySQL转义字符+存储过程的使用
MySQL中大于,大于等于,小于,小于等于的转义写法 一.左边就是原来的符号,右边就是在mybatis中代替的符号 二.如何通过mysql的存储过程创建虚拟表(临时表),并插入1000条数据 这些表通 ...
- Python报AttributeError: module 'string' has no attribute 'join'解决方法
报:AttributeError: module 'string' has no attribute 'join' 属性错误:模块"string"没有属性"join&qu ...
- Kali-Linux-for-Docker
说明 基于kali官方开源的Docker镜像修改,如需使用官方固件可以前往https://hub.docker.com/r/kalilinux/kali-rolling Docker Hub http ...
- 10分钟在 Rainbond 上部署 mall 电商项目
很多小伙伴在学习 mall 电商项目时,都会在部署上折腾许久,虽然目前已经提供了很多种部署方式,比如 在 Linux 上部署 mall .使用 Docker 或 DockerCompose 部署 ma ...
- 手把手教你图文并茂windows10安装VMware创建CentOS-7-x86_64运行linux系统
VMware是什么 VMWare (Virtual Machine ware)可以使你的计算机上同时运行几个系统.例如windows.DOS.LINUX等同时存在,可以将这些系统像程序似的随时切换,并 ...
- 如何通过Java应用程序添加或删除 PDF 中的附件
当我们在制作PDF文件或者PPT演示文稿的时候,为了让自己的文件更全面详细,就会在文件中添加附件.并且将相关文档附加到 PDF 可以方便文档的集中管理和传输.那么如何添加或删除 PDF 中的附件呢?别 ...
- Java 进阶P-1.3+P-1.4
成员变量和成员函数 成员变量 类定义了对象中所具有的变量,这些变量称作成员变量 每个对象都有自己的变量,和同一个类的其他对象是分开的 成员方法 在 Java 语言中使用成员方法对应于类对象的行为.以 ...
- OpenMP For Construct dynamic 调度方式实现原理和源码分析
OpenMP For Construct dynamic 调度方式实现原理和源码分析 前言 在本篇文章当中主要给大家介绍 OpenMp for construct 的实现原理,以及与他相关的动态库函数 ...
- 单细胞转录组实战01: CellRanger7定量
安装CellRanger cd ~/APP wget -O cellranger-7.1.0.tar.xz "https://cf.10xgenomics.com/releases/cell ...