带你全面了解Mapbox框架

gisDuo

于 2024-09-30 10:51:34 发布

阅读量381

点赞数 14

文章标签： arcgis java echarts vue.js 前端框架

本文链接：https://blog.csdn.net/gisDuo/article/details/142649771

版权

Cesium和Mapbox是目前最流行的支持3D地形图的WebGIS框架，mapbox是二三维结合的一款框架，也是三维框架里面最简单的。

Mapbox简介

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

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.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' /><style> *{margin:0;padding:0}#map{width:100vw;height: 100vh; }</style></head><body><div id="map"></div><script> /* 初始地图 */ mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.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 = falselet timer = nullmap.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>