Как использовать MapboxGL в Vue более элегантно

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

Чтобы более элегантно использовать mapbox-gl, существует пакет MapVue.

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

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

MapVue по сути оборачивает некоторые классы в MapboxGL и реализует компонентность через некоторые переменные свойства класса watch.

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

Существует 25 компонентов im MapVue, почти весь mapbox-gl APIS.

Основным компонентом является компонент 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 источник

Установите

# use yarn
yarn add mapvue
Вход в полноэкранный режим Выход из полноэкранного режима
# use pnpm
pnpm add mapvue
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Vite

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
docs: MapVue doc

Оцените статью
devanswers.ru
Добавить комментарий