Mapbox指南：解锁地理数据可视化的炫酷之旅

大家好，欢迎来到IT知识分享网。

一．简介

1. Mapbox简介

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的开源技术栈是⾮常全⾯的。

2. 前置知识了解

(1)GIS概述

定义：GIS（地理信息系统）是一种基于地理位置数据（如经纬度、海拔、地形等）的计算机系统，用于捕获、存储、查询、分析和展示地理信息。

作用：GIS广泛应用于城市规划、资源管理、环境保护、农业决策等领域，为决策者提供科学、准确的空间数据支持。

(2)地理坐标系统

定义：地理坐标系统用于定位和描述地球上的位置。常见的地理坐标系统包括经纬度和投影坐标系。

经纬度：

定义：经纬度是一种基于球体坐标系的地理坐标系统，用于描述地球表面上的任意位置。

经度：从东到西的度量，以0°到180°的形式表示，以本初子午线（通常是格林威治子午线）为基准线。

纬度：从南到北的度量，以0°到90°的形式表示。

(3) 空间数据

定义：空间数据是GIS中的核心数据类型，描述了地球表面上的空间实体和现象。

矢量数据：

定义：表示地理位置为点、线、面等几何对象。

特点：精度高、数据量小，适用于需要高精度的应用领域，如土地规划、管网设计等。

常见类型：点（Point）、线（Line）、多边形（Polygon）等。

栅格数据：

定义：将地球表面划分为一系列等大小的网格，每个网格表示一个值。

特点：适用于表示连续和光滑的地形特征，如高程数据、遥感影像等。

二．快速入门

使用Mapbox之前需要在https://www.mapbox.com/申请一个账号获取accessToken，大部分mapbox自带的功能在使用时都需要有令牌。

1.安装

使用CDN

<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.cs s' rel='stylesheet' />

vue3使用Mapbox

（1）安装Mapbox

npm源: npm install mapbox-gl yarn源: yarn add mapbox-gl

（2）引入使用

import mapboxgl from "mapbox-gl/dist/mapbox-gl.js"; import "mapbox-gl/dist/mapbox-gl.css";

（3）配置访问令牌

mapbox.accessToken="申请的自己的令牌"

（4）导入地图构造函数和类型对象。

import type { Map, Style } from "mapbox-gl"; import mapbox from "mapbox-gl";

2. 初始化地球

<!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> 
<!-- 1、导⼊mapbox依赖 --> 
<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.shanghaiyanboot'; 
const map = new mapboxgl.Map({ 
container: 'map', // container ID 
style: 'mapbox://styles/mapbox/streets-v12', // style UR 
L 
center: [114.30,30.50], 
zoom:12, 
projection:'globe' 
}); 
</script> 
</body> 
</html>

3.camera ⻆度

3.1 pitch俯仰⻆

const map = new mapboxgl.Map({ //俯仰⻆ 默认是0 取值范围0~90 //90度呈⽔平⽅向显示 pitch: 90 }) 注：或使⽤ map.setPitch() 设置俯仰⻆。

3.2bearing⽔平⻆

const map = new mapboxgl.Map({ // ⽔平⻆ 默认是0 取值范围-180~180 bearing:90 })

4. 切换底图

Style name	Style URL
Mapbox Streets	mapbox://styles/mapbox/streets-v12
Mapbox Outdoors	mapbox://styles/mapbox/outdoors-v12
Mapbox Light	mapbox://styles/mapbox/light-v11
Mapbox Dark	mapbox://styles/mapbox/dark-v11
Mapbox Satellite	mapbox://styles/mapbox/satellite-v9
Mapbox Satellite Streets	mapbox://styles/mapbox/satellite-streets-v12

map.setStyle() //设置样式

5. 常用控件

5.1 全屏控件

map.addControl(new mapboxgl.FullscreenControl());

5.2 导航控件

const nav = new mapboxgl.NavigationControl( { //是否显示指南针按钮，默认为true "showCompass": true, //是否显示缩放按钮，默认为true "showZoom":true } ); //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-r ight'四种，默认为'top-right' map.addControl(nav, 'top-left');

5.3 定位用户

https://docs.mapbox.com/mapbox-gl-js/example/locate-user/

map.addControl(new mapboxgl.GeolocateControl({ positionOptions: { //启动⾼精度 enableHighAccuracy: true }, //追踪⽤户位置 trackUserLocation: true }));

5.4 搜索控件

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocode r/v5.0.0/mapbox-gl-geocoder.min.js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocode r/v5.0.0/mapbox-gl-geocoder.css" type="text/css"> // Add the control to the map. map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, zoom: 4, placeholder: '请输⼊地址', mapboxgl: mapboxgl, reverseGeocode: true }) );

5.5 汉化控件

https://www.npmjs.com/package/@mapbox/mapbox-gl-language

注：这个汉化包，只能平⾯图上⽣效 <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-languag e/v1.0.0/mapbox-gl-language.js'></scrip map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' // 设置默认语⾔ }))

未完待续。。。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/163334.html