电子围栏示例

示例

示例源码

<template>
  <div class="map-container">
    <mb-map
      :zoom="7"
      :pitch="45"
      :center="[119.297868, 29.732983]"
      @created="mapCreated"
    >
      <mb-tianditu-layer :types="['vec', 'cva']" @created="layerCreated" />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import type { MapboxInstance } from '@mapbox-vue3/core'

let map: MapboxInstance

const mapCreated = (mapbox: MapboxInstance) => {
  map = mapbox
}
const layerCreated = () => {
  initL7()
}
const initL7 = () => {
  fetch(`${__RESOURCE_URL__}json/wall.json`)
    .then((res) => res.json())
    .then((data) => {
      const layer = new map.mapboxgl.supermap.L7Layer({ type: 'LineLayer' })
      const l7Layer = layer.getL7Layer()
      l7Layer.source(data).size(40).shape('wall').style({
        opacity: '0.8',
        sourceColor: '#0DCCFF',
        targetColor: 'rbga(255,255,255, 0)',
        heightfixed: true,
      })
      map.addLayer(layer)
    })
}
</script>