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阵营人士,少少多多总喜欢通过对 ...
随机推荐
- 【Zookeeper】结构、应用、安装部署与参数、客户端命令行操作、API应用、内部原理（选举机制、写数据、监听器）
一.Zookeeper入门 1.概述 分布式服务管理框架(存储和管理数据) Zookeeper=文件系统+通知机制 2.特点 主从集群 半数以上,正常工作 请求顺序执行 数据更新具有原子性 3.数据结 ...
- 【每日一题】【排序】2021年11月13日-215. 数组中的第K个最大元素※
给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素. 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 方法1:调库 class Solution ...
- .net6+wpf制作指定局域网ip无法上网的arp欺诈工具
摘一段来自网上的arp欺诈解释:ARP欺骗(ARP spoofing),又称ARP毒化(ARP poisoning,网络上多译为ARP病毒)或ARP攻击,是针对以太网地址解析协议(ARP)的一种攻击技 ...
- MongoDB - 数据模型的设计模式
简介 官方文章的地址是 Building with Patterns: A Summary,其中汇总了 12 种设计模式及使用场景. 上述的图表列举了 12 种设计模式及应用场景,主要是以下这些: 近 ...
- STL set容器常用API
set容器,容器内部将数据自动排序(平衡二叉树),不能插入重复元素.multiset可以插入重复元素.不能修改容器中的值,通过删除值,在插入. #define _CRT_SECURE_NO_WARNI ...
- Centos下部署最后一版支持Docker的k8s集群
部署版本 首先要确定部署的版本 查询Kubernetes对Docker支持的情况 kubernetes/dependencies.yaml at master · kubernetes/kuberne ...
- 掌握webpack（一）一张图让你明白webpack中output的filename、path、publicPath与主流插件的关系
webpack的核心概念,放到2022年相信很多的小伙伴都已经非常清楚了.但是,对于webpack配置中的output.path.output.filename以及output.publicPath, ...
- [OpenCV实战]1 基于深度学习识别人脸性别和年龄
目录 1基于CNN的性别分类建模原理 1.1 人脸识别 1.2 性别预测 1.3 年龄预测 1.4 结果 2 代码 参考 本教程中,我们将讨论应用于面部的深层学习的有趣应用.我们将估计年龄,并从单个图 ...
- [机器学习] Yellowbrick使用笔记5-回归可视化
回归模型试图预测连续空间中的目标.回归计分可视化工具显示模型空间中的实例,以便更好地理解模型是如何进行预测的.代码下载 Yellowbrick已经实施了三种回归评估: 残差图Residuals Plo ...
- [WPF]创建系统栏小图标
隐藏窗体任务栏图标 /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class Ma ...