一．簡介

 1. Mapbox簡介

   Mapbox是?個可以創(chuàng)建各種?定義地圖的?站，如 Pinterest、Evernote、Github、500px 等?牌都使? Mapbox 創(chuàng)建??的地圖，Mapbox 宣稱要構建世界上最漂亮的地圖。已為 Foursquare、Pinterest、Evernote、?融時報、天?頻道、優(yōu)步科技 等公司的?站提供了

   訂制在線地圖服務。Mapbox 針對不同平臺均開發(fā)了相應的 GIS 引擎以滿?開發(fā)者或相關?戶的需要，如：iOS SDK（?于iOS端開發(fā)）、Android SDK（?于Andriod端開發(fā)）、Navigation SDK（?于Navigation端開發(fā)）、Unity SDK（?于Unity端開發(fā)）、GL JS（?于web端開發(fā)）。不同平臺的SDK，除使??式不同外，功能特性上也多多少少存在不同。此外，Uber還針對react開發(fā)了 react-map-gl?？偟膩碚f，Mapbox的開源技術棧是?常全?的。

2. 前置知識了解

        (1)GIS概述

   定義：GIS（地理信息系統(tǒng)）是一種基于地理位置數(shù)據（如經緯度、海拔、地形等）的計算機系統(tǒng)，用于捕獲、存儲、查詢、分析和展示地理信息。

   作用：GIS廣泛應用于城市規(guī)劃、資源管理、環(huán)境保護、農業(yè)決策等領域，為決策者提供科學、準確的空間數(shù)據支持。

(2)地理坐標系統(tǒng)

   定義：地理坐標系統(tǒng)用于定位和描述地球上的位置。常見的地理坐標系統(tǒng)包括經緯度和投影坐標系。

   經緯度：

   定義：經緯度是一種基于球體坐標系的地理坐標系統(tǒng)，用于描述地球表面上的任意位置。

   經度：從東到西的度量，以0°到180°的形式表示，以本初子午線（通常是格林威治子午線）為基準線。

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

(3) 空間數(shù)據

   定義：空間數(shù)據是GIS中的核心數(shù)據類型，描述了地球表面上的空間實體和現(xiàn)象。

l矢量數(shù)據：

   定義：表示地理位置為點、線、面等幾何對象。

   特點：精度高、數(shù)據量小，適用于需要高精度的應用領域，如土地規(guī)劃、管網設計等。

   常見類型：點（Point）、線（Line）、多邊形（Polygon）等。

l柵格數(shù)據：

   定義：將地球表面劃分為一系列等大小的網格，每個網格表示一個值。

   特點：適用于表示連續(xù)和光滑的地形特征，如高程數(shù)據、遙感影像等。

二．快速入門

   使用Mapbox之前需要在https://www.mapbox.com/申請一個賬號獲取accessToken，大部分mapbox自帶的功能在使用時都需要有令牌。

   1.安裝

   使用CDN

         

 

   vue3使用Mapbox

  （1）安裝Mapbox

         

 

  （2）引入使用

         

 

  （3）配置訪問令牌

        

 

  （4）導入地圖構造函數(shù)和類型對象。

        

 

   2.初始化地球

        

 

       3.camera ?度

       

 

      3.1  pitch 俯仰? 

       

 

     3.2  bearing ?平?

      

 

4. 切換底圖

     

     map.setStyle() //設置樣式

   5. 常用控件

  5.1 全屏控件

      

     

 

     5.2 導航控件

      

      

     

     5.3 定位用戶

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

      

     

 

     5.4 搜索控件

     

     

 

     5.5 漢化控件

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