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阵营人士,少少多多总喜欢通过对 ...
随机推荐
- 解决aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:62356/Admin/' failed问题
前言 前段时间升级了Visual Studio到v17.1.1最新版本,然后今天来运行之前的一个.net5项目一直提示:aspnetcore-browser-refresh.js:234 WebSoc ...
- DOM(原生js事件绑定)
一:原生js事件绑定 1.开关灯案例 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- Vue DevUI v1.4 版本发布：从体验、效率、质量三个方面做了全方位的优化🎉
2022年9月1日,我们正式宣布 Vue DevUI 组件库发布 v1.0 版本. Vue DevUI 1.0 正式发布 经过100多天的持续迭代,我们正式发布 v1.4.0 版本,共新增: 11位贡 ...
- VS2019发布至远程IIS部署流程
服务器部署 传统的开发将项目发布至本地桌面之后,复制至站点目录或通过FTP上传站点目录,有点小麻烦,通过开发工具VS2019本身集成的功能,可以一步到发布到远程IIS站点. 条件: VS系列发工具,例 ...
- AStar寻路算法示例
概述 AStar算法是一种图形搜索算法,常用于寻路.他是以广度优先搜索为基础,集Dijkstra算法和最佳优先(best fit)于一身的一种算法. 示例1:4向 示例2:8向 思路 递归的通过估值函 ...
- uniapp(vue)实现点击左侧菜单，右侧显示对应的内容
<template> <view class="container"> <view class="fication-search" ...
- JavaScript：变量：声明和赋值变量时，内存结构是什么样的？
这里只是大概画出内存结构的模型图,方便理解当我们声明变量和赋值变量时,到底在干嘛. 如上图所示,a赋值一个对象{},b赋值字符串hello: 于是内存里划了三个区域给我们,一个存储我们声明的变量表,即 ...
- prometheus-添加监控linux服务器
1. prometheus-添加监控linux服务器 prometheus添加监控linux服务器 node_exporter:用于监控Linux系统的指标采集器. 常用指标: CPU 内存 硬盘 网 ...
- Windowsのcmd命令
Windowsのcmd命令 网络操作: ipconfig命令: ipconfig -all 查看网络信息 ipconfig -release 释放ip/tcp ipconfig -renew 重新获取 ...
- 使用Spring MVC框架进行前台页面跳转时，跳转到的新页面中文显示乱码的问题解决
使用Spring MVC框架进行前台页面跳转时,跳转到的新页面中文显示乱码的问题解决 摘要:我昨天花了一天时间学习了SSM项目搭建,却在最终的编码问题上拉胯了,在使用Spring MVC框架进行前 ...