高德地图自定义折线矢量图形

实现的功能：通过点标记连接生成线实现折线适量图形
进一步实现功能：1.对指定点进行拖拽
2.从多个点中删除指定点
复制代码
// 初始化地图
      map.value = new AMap.Map('g-container', {
        resizeEnable: true,
        center: [longitude, latitude],
        layers: [
          // 卫星
          new AMap.TileLayer.Satellite(),
          // 路网
          new AMap.TileLayer.RoadNet(),
        ],
        zoom: 16, // 地图显示的缩放级别
        zooms: [0, 19], // 设置缩放级别范围为3至16
      })

map.value.on('click', (e: any) => {
        console.log('点击地图', e)
        table.value.ruleForm.LngLat.push([e.lnglat.lng, e.lnglat.lat])
        table.value.ruleForm.from.push({
         //需要上传的数据
        })
        map.value.clearMap() // 清理地图
        inMake(table.value.ruleForm.from.length)
        inLine(map.value)
      })

//将点标记在地图上
const markers: any = ref([])
const markerIndexs: any = ref(null)
const isMaker = ref(true)
const inMake = (length: any) => {
  // 先进行清空方便后续功能不出现重复点
  markers.value = []
  // 点击每个点选中显示在地图上
  table.value.ruleForm.from.forEach((i: any, index, arr) => {
    const markerContent =
      '' + '<div class="red-circle">' + `<span>${index + 1}</span>` + '</div>' + `<div class="close-btn" onclick="clearMarker(${index})">X</div>`
    const markerContent2 =
      '' + '<div class="red-circle2">' + `<span>${index + 1}</span>` + '</div>'
    const position = [i.lng || i.longitude, i.lat || i.latitude]
    console.log('markerContent2', markerContent2)
    const marker = new AMap.Marker({
      position: position,
      content: length - 1 === index ? markerContent2 : markerContent,
      offset: new AMap.Pixel(-19, -49),
      draggable: true,
    })
    markerIndexs.value = length
    marker.index = i
    map.value.add(marker)
    marker.on('click', function (e) {
      const markerIndex = markers.value.indexOf(this)
      console.log('标记点', markerIndex)
      if (markerIndex !== -1) {
        // alert('点击的是第 ' + (markerIndex + 1) + ' 个点');
        inMake(markerIndex + 1)
        markerIndexs.value = markerIndex + 1
      }
    })

//实现点拖拽功能
    marker.on('dragend', (event) => {
      console.log('event', event)
      table.value.ruleForm.from[index].longitude = event.lnglat.lng
      table.value.ruleForm.from[index].latitude = event.lnglat.lat
      table.value.ruleForm.from[index].point = {
        point: event.lnglat.lng + ',' + event.lnglat.lat,
      }
      table.value.ruleForm.LngLat[index] = [event.lnglat.lng, event.lnglat.lat]
      map.value.clearMap()
      inMake(markerIndexs.value)
      inLine(map.value)
    })

// 将标记添加到标记数组
    markers.value.push(marker)
    if (isMaker.value) {
      map.value.setFitView()
      isMaker.value = false
    }
  })
}

//根据点生成线
const polyline: any = ref(null)
const inLine = (map: any) => {
  polyline.value = new AMap.Polyline({
    path: table.value.ruleForm.LngLat,
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 3,
    strokeColor: '#3366FF',
    strokeOpacity: 1,
    strokeWeight: 6,
    // 折线样式还支持 'dashed'
    strokeStyle: 'solid',
    // strokeStyle是dashed时有效
    strokeDasharray: [10, 5],
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 50,
    draggable: false,
  })
  polyline.value.setMap(map)
}

//删除对应点标记
window.clearMarker = (index:Number) => {
  console.log('点击删除', index)
  table.value.ruleForm.LngLat.splice(index, 1)
  table.value.ruleForm.from.splice(index, 1)
  map.value.clearMap()
  inMake(markerIndexs.value)
  inLine(map.value)
}