Vue에서 MapboxGL을 보다 우아하게 사용하는 방법

Vue는 간단하거나 복잡한 사용자 인터페이스를 효율적으로 개발하는 데 도움이 되는 선언적 구성 요소 기반 프로그래밍 모델을 제공합니다.

mapbox-gl을 보다 우아하게 사용하려면 MapVue 이라는 패키지가 있습니다.

MapVue는 포괄적인 MapboxGL 구성 요소 라이브러리입니다. Vue 프로젝트에 쉽고 즐겁게 MapVue를 적용할 수 있습니다. 다양한 데이터 소스와 레이어를 컴포넌트 형태로 가져오고, MVVM에 의해 맵의 레이어와 소스의 props를 업데이트합니다.

어떻게 작동합니까?

MapVue는 본질적으로 MapboxGL의 ​​일부 클래스를 래핑하고 감시 클래스의 일부 변수 속성을 통해 구성 요소화를 구현합니다.

예를 들어, v-fill-layer 구성 요소는 실제로 FillLayer 클래스를 래핑합니다.

25 components im MapVue가 있으며 거의 ​​모든 mapbox-gl APIS가 포함되어 있습니다.

핵심 구성 요소는 VMap 구성 요소입니다. 이것은 최상위 구성 요소이며 다른 모든 구성 요소는 VMap로 래핑되어야 하며 mapboxgl.Map를 인스턴스화하고 map 인스턴스를 하위 구성 요소에 제공합니다.

구성 요소 목록

핵심 구성 요소

V맵

공통 구성 요소

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

수입

초대

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>

더 많은 예제를 방문하십시오examples.

github: MapVue
문서: MapVue doc