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

你總是需要地圖，因為它過于直觀。

Ned 是一個前端開發(fā)，就職于一家 To C 業(yè)務的公司，這天產品經理提出了一個需求：

“來一張地圖吧，把我們所有的客戶放在上面，讓我們一眼就能看出來是誰在用我們的APP！”

從未做過地圖的 Ned 茫然點了點頭，開始進行技術篩選，然后他才發(fā)現，小小一張地圖，居然有這么多門道！

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

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

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

那么，有沒有什么方案不僅開箱即用，而且擁有可觀的 拓展性 呢？

當然有，比如： mapbox-gl。

二、什么是 mapbox-gl？

談到這個問題之前，得先弄清楚什么是 mapbox

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

同時，它提供了一個基于 WebGL 的開源地圖引擎：mapbox-gl。

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

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

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

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

三、如何安裝

yarn add mapbox-gl

四、基礎使用：渲染地圖

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

首先，在 mapbox 官網注冊賬號，獲得 accessToken。（為避嫌，此處不細贅述）

如果你在 vue3 項目中，可以通過如下代碼渲染： 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>

一個簡單的世界地圖就這樣簡單而清晰的世界地圖便展現出來：

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

眾所周知，用來描繪地圖上區(qū)域的格式叫 geojson，它的本質是通過多個點的合集，來描述一個多邊形。

現在，我通過各種人工手段獲取了一個湖泊的多邊形圖案，要將它在地圖上繪制出來，應該怎么做呢？

很簡單：增加以下代碼：

  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,
      }
  });

(當然，別忘了把地圖圓心也選為 geojson 中的某個點)

效果如下：

途中蔚藍色的多邊形，便是通過 geojson 畫出的湖泊。

六、傾斜視角

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

只需要一行代碼：

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

整個畫面頓時有了質的提升！

七、旋轉、跳躍、以及 Rap

沉寂的畫面是單調的，以及沒有逼格的——甲方也這么認為。

因此，甲方經常會提出 “讓地圖動起來” 的合理需求。

這在 mapbox-gl 中非常容易。

增加以下代碼：

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

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

畫面輕松動了起來！

以上就是mapbox gl開箱即用的地圖引擎庫的詳細內容，更多關于mapbox gl地圖引擎庫的資料請關注腳本之家其它相關文章！

最新評論