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

进一步实现功能：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 = lengthmarker.index = imap.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.lngtable.value.ruleForm.from[index].latitude = event.lnglat.lattable.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)
}