Cesium和Mapbox是目前最流行的支持3D地形图的WebGIS框架,mapbox是二三维结合的一款框架,也是三维框架里面最简单的。
Mapbox简介
Mapbox是⼀个可以创建各种自定义地图的网站,如 Pinterest、Evernote、Github、500px 等大牌都使用Mapbox创建地图。
Mapbox针对不同平台均开发了相应的GIS引擎以满⾜开发者或相关用户的需要,如:iOS SDK(⽤于iOS端开发)、Android SDK(用于Andriod端开发)、Navigation SDK(用于Navigation端开发)、Unity SDK(用于Unity端开发)、GL JS(用于web端开发)。
不同平台的SDK,除使用⽅式不同外,功能特性上也多多少少存在不同。此外,Uber还针对react开发了 react-map-gl。
总的来说,Mapbox的开源技术栈是⾮常全面的。
Mapbox的特点
Mapbox的优势在于,和cesium相比更美观,与openlayers相比支持三维。
它的明星数据格式是矢量切片,特点是最具美感的专题地图,适用于互联网场景复杂地理信息表达,内网追求地图可视化效果的也适用,Mapbox很多优化都是基于互联网场景的。
Mapbox能做什么:
- 能通过各种投影系进行地图瓦片的投影。
- 支持在地图瓦片上叠加各种图层,支持 geojson、图片、文本 等多种信息在图层上进行加载显示。
- 支持自定义 Style (矢量瓦片)
- 支持 2.5D 视角旋转及显示
- 支持加载 3D 模型
- 支持通过 DOM 的方式添加 HTML 元素
- 支持 web-gl 能力进行图形渲染
- 支持进行 3D 形式的球星地理渲染和星空背景渲染
Mapbox基本架构
Mapbox GL JS (mapbox graphics library javascript)的核心特点是客户端渲染,在Mapbox GL JS中创建web应用时,通过Javascript和WebGL把地图作为 vector tiles(矢量瓦片)进行渲染。
相比将服务器的一系列切片图片组合起来再显示,Mapbox GL JS 渲染可以快速改变样式,使得地图的呈现更加多样化。
Mapbox知识图谱
Mapbox支持多种前端框架
mapbox可以跟很多前端框架一起使用,比如echarts、VUE、react、angular、typescript等:
Mapbox入门教程
一、初始化地球
1、安装依赖cnd
2、导入token,并设置token
3、实例化map
<!DOCTYPE html>
<html>
<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>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.j
s'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.cs
s' rel='stylesheet' />
<style>
*{margin:0;padding:0}
#map{
width:100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* 初始地图 */
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJ
jbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [114.30,30.50],
zoom:12,
projection:'globe'
});
</script>
</body>
</html>
二、设置大气层
map.on("style.load",()=>{
map.setFog({
/* 设置⼤⽓层的颜⾊ */
"color":"#dc9f9f",
/* ⼤⽓层之上的颜⾊ */
"high-color":"#245bde",
//定制化星空的颜⾊
"space-color":"#333"
})
})
三、camera角度
3-1、 pitch 俯仰角
const map = new mapboxgl.Map({
//俯仰⻆ 默认是0 取值范围0~90
//90度呈⽔平⽅向显示
pitch: 90
})
或使用map.setPitch() 设置俯仰角。
3-2、 bearing水平角
取值范围 -180~180
const map = new mapboxgl.Map({
// ⽔平⻆ 默认是0 取值范围-180~180
bearing:90
})
测试水平角
map.on("click", () => {
setInterval(() => {
let bearing = map.getBearing();
console.log(bearing)
bearing++;
map.setBearing(bearing)
}, 50)
})
优化代码
let isRotate = false
四、漫游flyTo
点击事件实现漫游
let isRotate = false
let timer = null
map.on("click", () => {
isRotate = !isRotate;
if (isRotate) {
timer = setInterval(() => {
let bearing = map.getBearing();
console.log(bearing)
bearing++;
map.setBearing(bearing)
}, 50)
} else {
map.stop();
clearInterval(timer)
}
})
加⼀个复位按钮,实现复位地图功能。
五、不同的layer-style
点击按钮,实现底图切换
代码示例:
<!DOCTYPE html>
<html>
<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>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0
}
#map {
width: 100vw;
height: 100vh;
}
#select {
position: absolute;
z-index: 100;
left: 10;
top: 10;
}
</style>
</head>
<body>
<select id="select">
<option value="streets-v11">街景</option>
<option value="satellite-v9">卫星</option>
<option value="dark-v10">⿊夜</option>
</select>
<div id="map">
</div>
<script type="module">
import { token } from './config/token.js'
mapboxgl.accessToken = token;
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: [114, 30],
zoom: 13,
pitch: 45,
bearing: 20
})
$("#select").change((e) => {
const value = e.target.value;
})
</script>
</body>
</html>