vue3 + [email protected]带箭头的轨迹线

vue3 + leaflet@1.94---带箭头的轨迹线_第1张图片

import 'leaflet-polylinedecorator' // 箭头线(引入第三方插件)

onMounted(() => {
  window.customMap = mapInit.initMap({
    target: 'map-container',
    coordinate: [36.09, 120.35]
  })
  const drawnItems = new L.FeatureGroup()
  window.customMap.addLayer(drawnItems)
  // 绘制箭头
  const arrow = L.polyline(
    [
      [36.09, 120.35],
      [36.1, 120.38]
    ],
    {
      // 颜色
      color: 'rgba(0,156,106,1)',
      weight: 10
    }
  ).addTo(drawnItems)
  L.polylineDecorator(arrow, {
    patterns: [
      {
        // 模式符号的偏移位置
        offset: 10,
        // 模式符号的重复间隔
        repeat: 30,
        // 符号实例
        symbol: L.Symbol.arrowHead({
          // 符号大小
          pixelSize: 7,
          polygon: false,
          // 符号样式
          pathOptions: {
            // 是否显示边线
            stroke: true,
            weight: 2,
            color: '#fff'
          }
        })
      }
    ]
  }).addTo(drawnItems)
})

你可能感兴趣的:(webGis-leaflet,vue.js,leaflet.js)