Vue предоставляет декларативную модель программирования на основе компонентов, которая помогает эффективно разрабатывать пользовательские интерфейсы, будь то простые или сложные.

Для более элегантного использования mapbox-gl существует пакет с именем MapVue.

MapVue — это обширная библиотека компонентов MapboxGL. Вы можете легко и с удовольствием применять MapVue к своим проектам Vue. Импортируйте различные источники данных и слои в виде компонентов и обновляйте реквизиты слоев и источников на карте с помощью MVVM.

Как это работает?

MapVue по сути оборачивает некоторые классы в MapboxGL и реализует компонентизацию через некоторые переменные свойства класса наблюдения.

Например, компонент v-fill-layer на самом деле обертывает класс FillLayer.

Есть 25 components im MapVue, почти содержит все APIS mapbox-gl.

Основным компонентом является компонент VMap. Это компонент верхнего уровня, все остальные компоненты должны быть заключены в VMap, он создает экземпляр mapboxgl.Map и предоставляет экземпляр map дочерним компонентам.

Списки компонентов

Основные компоненты

  • VMap

Общие компоненты

  • VMarker: обернуть mapboxgl.Marker
  • VPopup: обернуть mapboxgl.Popup
  • VSprit: добавить изображение в стиль
  • VFog: обернуть map.setFog
  • VFeatureState: установить состояние функции

Компоненты управления

  • VAttributionControl: обернуть элемент управления AttributionControl
  • VNavigationControl: обернуть элемент управления NavigationControl
  • VScaleControl: обернуть элемент управления ScaleControl

Компоненты слоя

  • VBackgroundLayer: обернуть слой background
  • VCircleLayer: обернуть слой circle
  • VFillExtrusionLayer: обернуть слой fillextrusion
  • VFillLayer: обернуть fill слой
  • VHeatmapLayer: обернуть слой heatmap
  • VHillshadeLayer: обернуть hillshade слой
  • VLineLayer: обернуть слой line
  • VRasterLayer: обернуть raster слой
  • VSymbolLayer: обернуть слой symbol
  • VCanvasLayer: обернуть слой canvas

Исходные компоненты

  • VGeoSource: обернуть geojson исходным кодом
  • VVectorSource: обернуть vector исходным кодом
  • VImageSource: обернуть image исходным кодом
  • VVideoSource: обернуть video источник
  • VRasterSource: обернуть raster исходным кодом
  • VRasterDemSource: обернуть rasterdem исходников

Установить

использовать yarn

yarn add mapvue

использовать pnpm

pnpm add mapvue

Импортировать

Вите

import { createApp } from "vue";
import MapVue from "mapvue";
import "mapvue/dist/mapvue.css";
import App from "./App.vue";
createApp(App).use(MapVue).mount("#app");

Вариант использования

<script>
import { defineComponent, reactive, watch } from "vue";
import { accessToken } from "../store";
export default defineComponent({
  setup() {
    const state = reactive({
      "heatmap-color": [
        "interpolate",
        ["linear"],
        ["heatmap-density"],
        0,
        "rgba(33,102,172,0)",
        0.2,
        "rgb(103,169,207)",
        0.4,
        "rgb(209,229,240)",
        0.6,
        "rgb(253,219,199)",
        0.8,
        "rgb(239,138,98)",
        1,
        "rgb(178,24,43)",
      ],
      "heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 7, 1, 9, 0],
      "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 2, 9, 20],
      "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
      radius: 20,
      intensity: 3,
      layout: {
        visibility: "visible",
      },
    });
    return {
      state,
      accessToken,
    };
  },
});
</script>
<template>
  <div class="container">
    <v-map
      :accessToken="accessToken"
      :options="{
        center: [-124.137343, 45.137451],
        zoom: 3,
      }"
    >
      <v-geo-source
        id="geo"
        data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
      />
      <v-heatmap-layer
        id="heatmap"
        source="geo"
        :paint="{
          'heatmap-color': state['heatmap-color'],
          'heatmap-opacity': state['heatmap-opacity'],
          'heatmap-radius': state['heatmap-radius'],
          'heatmap-intensity': state['heatmap-intensity'],
        }"
        :layout="state.layout"
      />
    </v-map>
  </div>
</template>
<style scoped>
.container {
  height: 100vh;
  width: 100%;
}
</style>

больше примеров пожалуйста в разделе примеры

github: MapVue
документы: MapVue doc