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

实现的功能:通过点标记连接生成线 实现折线适量图形

进一步实现功能: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)
}
相关推荐
江城开朗的豌豆2 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆16 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山24 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45333 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^34 分钟前
条件渲染 v-show与v-if
前端