mapbox gl開(kāi)箱即用的地圖引擎庫(kù)

更新時(shí)間：2022年07月07日 09:47:36 作者：摸魚(yú)的春哥

這篇文章主要為大家介紹了一款mapbox gl開(kāi)箱即用的地圖引擎庫(kù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、地圖、地圖、還是地圖

你總是需要地圖，因?yàn)樗^(guò)于直觀。

Ned 是一個(gè)前端開(kāi)發(fā)，就職于一家 To C 業(yè)務(wù)的公司，這天產(chǎn)品經(jīng)理提出了一個(gè)需求：

“來(lái)一張地圖吧，把我們所有的客戶(hù)放在上面，讓我們一眼就能看出來(lái)是誰(shuí)在用我們的APP！”

從未做過(guò)地圖的 Ned 茫然點(diǎn)了點(diǎn)頭，開(kāi)始進(jìn)行技術(shù)篩選，然后他才發(fā)現(xiàn)，小小一張地圖，居然有這么多門(mén)道！

瓦片地圖服務(wù)商有：天地圖、百度地圖、高德地圖等...

而地圖引擎又有 openlayers，cesium 等...

如果要在地圖上加載三維模型，可能他還得了解 three.js 等技術(shù)...

那么，有沒(méi)有什么方案不僅開(kāi)箱即用，而且擁有可觀的 拓展性 呢？

當(dāng)然有，比如： mapbox-gl。

二、什么是 mapbox-gl？

談到這個(gè)問(wèn)題之前，得先弄清楚什么是 mapbox

首先，這是一家企業(yè)，它提供地圖服務(wù)和解決方案，你幾乎可以把它看做 “百度地圖”，提供。

同時(shí)，它提供了一個(gè)基于 WebGL 的開(kāi)源地圖引擎：mapbox-gl。

mapbox-gl npmjs: www.npmjs.com/package/map…

mapbox-gl github：github.com/mapbox/mapb…

通過(guò) mapbox-gl，你可以像使用 openlayers 那樣加載各種源的地圖，包括 mapbox 本身提供的瓦片源、百度地圖等瓦片源。

同時(shí)，它也是 mapbox GL 生態(tài)的重要一環(huán)。

三、如何安裝

yarn add mapbox-gl

四、基礎(chǔ)使用：渲染地圖

此處以 mapbox 本身的瓦片源為例

首先，在 mapbox 官網(wǎng)注冊(cè)賬號(hào)，獲得 accessToken。（為避嫌，此處不細(xì)贅述）

如果你在 vue3 項(xiàng)目中，可以通過(guò)如下代碼渲染： index.vue

<template>
  <div id="map"></div>
</template>
<script setup> 
import { onMounted, reactive, ref } from 'vue';
import mapboxgl from 'mapbox-gl';

onMounted(() => {
  mapboxgl.accessToken = `你的accessToken`
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [0, 0],
    zoom: 0.6,
    projection: 'naturalEarth' // starting projection
  });
})
</script>

一個(gè)簡(jiǎn)單的世界地圖就這樣簡(jiǎn)單而清晰的世界地圖便展現(xiàn)出來(lái)：

五、在地圖上渲染區(qū)域

眾所周知，用來(lái)描繪地圖上區(qū)域的格式叫 geojson，它的本質(zhì)是通過(guò)多個(gè)點(diǎn)的合集，來(lái)描述一個(gè)多邊形。

現(xiàn)在，我通過(guò)各種人工手段獲取了一個(gè)湖泊的多邊形圖案，要將它在地圖上繪制出來(lái)，應(yīng)該怎么做呢？

很簡(jiǎn)單：增加以下代碼：

  map.on('load', function () {
    rotateCamera(0);
    map.addLayer({
      'id': 'maine',
      'type': 'fill',
      'source': {
        'type': 'geojson',
        'data': lakeGeoJson // 湖面的geojson
      },
      'layout': {},
      'paint': {
        'fill-color': '#17b1ee',
        'fill-opacity': 0.8,
      }
  });

(當(dāng)然，別忘了把地圖圓心也選為 geojson 中的某個(gè)點(diǎn))

效果如下：

途中蔚藍(lán)色的多邊形，便是通過(guò) geojson 畫(huà)出的湖泊。

六、傾斜視角

90 度垂直俯瞰的視角太過(guò)死板，但提供多角度的渲染，正是 mapbox-gl 的拿手好戲。

只需要一行代碼：

const map = new mapboxgl.Map({
    // ... 其他配置不變
    pitch: 60, // 增加此行
  });

整個(gè)畫(huà)面頓時(shí)有了質(zhì)的提升！

七、旋轉(zhuǎn)、跳躍、以及 Rap

沉寂的畫(huà)面是單調(diào)的，以及沒(méi)有逼格的——甲方也這么認(rèn)為。

因此，甲方經(jīng)常會(huì)提出 “讓地圖動(dòng)起來(lái)” 的合理需求。

這在 mapbox-gl 中非常容易。

增加以下代碼：

function rotateCamera(timestamp) {
  map.rotateTo((timestamp / 360) % 360, { duration: 0 });
  requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
  rotateCamera(0);
})

畫(huà)面輕松動(dòng)了起來(lái)！