2024WebGIS新手必看学习攻略（3）

最新推荐文章于 2024-07-15 08:37:52 发布

GIS前端嘉欣

最新推荐文章于 2024-07-15 08:37:52 发布

阅读量820

点赞数 12

本文链接：https://blog.csdn.net/jdjxbsus/article/details/135972334

版权

webgis 专栏收录该内容

138 篇文章 11 订阅

订阅专栏

前面两期主要讲了学习webgis最基本的前置知识以及webGIS的开发语言介绍、二维框架openlayers知识体系等。

回顾链接：

2024WebGIS新手必看学习攻略（1）

2024WebGIS新手必看学习攻略（2）

这里再给大家简单回顾一下webgis的学习路线：

图片来源网络，侵删

今天接着介绍三维框架mapbox的知识体系。

之前我们说过，Mapbox是二三维结合的一款框架，也是三维框架里面最容易入手的一个。

一些学生作品

Mapbox简介

官网：https://www.mapbox.com/

Mapbox是⼀个可以创建各种自定义地图的网站，如 Pinterest、Evernote、Github、500px 等大牌都使用Mapbox创建地图。

Mapbox宣称要构建世界上最漂亮的地图。

已为Foursquare、Pinterest、Evernote、⾦融时报、天⽓频道、优步科技等公司的网提供了订制在线地图服务。

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
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)
 }
})

四、漫游flyTo

点击事件实现漫游

map.on("click",()=>{
map.flyTo({
//⻜⾏的中⼼点
 center:[112.93,28.23],
//⻜⾏之后地图的放⼤级别
 zoom:13,
//控制⻜⾏的速度
 speed:0.2,
/* 俯仰⻆0-90 */
 pitch: 80
 })
})

加⼀个复位按钮,实现复位地图功能。

五、不同的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>

免费领取GIS开发相关学习资料