欢迎大家来到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' />欢迎大家来到IT世界,在知识的湖畔探索吧!
vue3使用Mapbox
（1）安装Mapbox
欢迎大家来到IT世界,在知识的湖畔探索吧!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）配置访问令牌
欢迎大家来到IT世界,在知识的湖畔探索吧!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://itzsg.com/98616.html
