【地图 - 问题】公司etm地图：聚合功能重复添加，导致图标重复添加，导致部分重复添加的图标无法清除

问题

左侧开关可以控制图标展示不展示
这些图标是地图聚合功能展示的图标
用的是公司的etm地图
没有移除地图聚合的功能
就是这个聚合功能只要开开
就会一直触发
只能通过这个按钮开关来控制展示不展示聚合图标
所以只要你重复打开关闭这个按钮
就会给地图重复添加多个地图聚合的那个方法【重点】
每加一次这个方法
就会进行一次标点
这样开关几次就会有几次重复添加标点
这就会导致只有最新一次开关添加的聚合功能加的图标可以被清掉
其他的图标都清不掉

问题视频

解决

/*** 判断是否添加过聚合功能*    解决图层开关重复开闭导致重复添加聚合问题，从而导致已经标过图标被重复标点多组，再次关闭按钮时，只会清除一组图标，其他组图标不会轻清除问题*    解决思路：*      1. 先判断当前 lxdm 是否已经添加过聚合功能，如果已经添加过聚合功能，就不需要再次添加聚合功能*      2. 在保存的聚合功能所有层级所有图标中，找到当前层级的所有图标*      3. 展示当前层级所有图标*      4. 如果当前层级的聚合功能没有添加过聚合功能（或当前瓦片没有获取过标点数据），会自动触发第一次添加的聚合功能，获取当前层级的图标数据，然后进行标点*/

import { getConvergeLayer } from '@/api/cad.service'
export default {data() {return {level: '', // 当前地图的等级preLevel: '',tclxAndData: {},levelAndpkeyMap: null, // 当前图层对象在地图上添加的market集合lxdmList: [] // 已经添加过聚合功能的lxdm集合}},methods: {/**** 【主要逻辑】添加聚合 $polymerizeHandler ****/$polymerizeHandler(tclxdm, resourceData) {const { lxdm } = resourceDataif (resourceData.layerOpen) {if (!this.tclxAndData[lxdm]) {this.tclxAndData[lxdm] = {}}this.$polymerMarkerTitleSwitch(lxdm, true)if (this.lxdmList.includes(tclxdm)) {/*** 判断是否添加过聚合功能*    解决图层开关重复开闭导致重复添加聚合问题，从而导致已经标过图标被重复标点多组，再次关闭按钮时，只会清除一组图标，其他组图标不会轻清除问题*    解决思路：*      1. 先判断当前 lxdm 是否已经添加过聚合功能，如果已经添加过聚合功能，就不需要再次添加聚合功能*      2. 在保存的聚合功能所有层级所有图标中，找到当前层级的所有图标*      3. 展示当前层级所有图标*      4. 如果当前层级的聚合功能没有添加过聚合功能（或当前瓦片没有获取过标点数据），会自动触发第一次添加的聚合功能，获取当前层级的图标数据，然后进行标点*/const p_key_list = Object.keys(this.tclxAndData[lxdm]).filter(item => {const [level] = item.split('_')return Number(level) === Number(this.preLevel)})p_key_list.forEach(p_key => {this.showExistConverge(lxdm, p_key, resourceData)})return // 已经添加过聚合功能，不需要再次添加聚合功能}this.lxdmList.push(tclxdm) // 到这里，说明是第一次添加聚合功能，需要把lxdm添加到lxdmList中，防止重复添加聚合功能this.mapTools.polymerizationOnMap(tclxdm, '2', '5', async info => {console.log('"添加聚合"----打印', "添加聚合")if (resourceData.layerOpen) {const { level, row, col } = infoconst p_key = `${level}_${row}_${col}`if (this.preLevel !== level) {this.removePreLevelMarker()this.preLevel = level}const isExitPkey = p_key in this.tclxAndData[lxdm]if (!isExitPkey) {const convergeLayerData = await this.getConvergeLayerData(info, tclxdm)if (convergeLayerData.pointDate.length || convergeLayerData.convergeDate.length) {// this.$log('convergeLayerData:', convergeLayerData)}if (convergeLayerData && resourceData.layerOpen) { // 图层开关打开才添加聚合图层，避免接口还未请求完时关闭图层，接口请求完之后，又在地图上添加聚合图层this.tclxAndData[lxdm][p_key] = []this.addConvergeMarkerLayer(p_key, convergeLayerData, resourceData)}if (!resourceData.layerOpen) {delete this.tclxAndData[lxdm][p_key]}} else {this.showExistConverge(lxdm, p_key, resourceData)}} else {this.removeMarkerByTclx(lxdm)this.$polymerMarkerTitleSwitch(lxdm, resourceData.titleOpen)}})} else {this.removeMarkerByTclx(lxdm)this.$polymerMarkerTitleSwitch(lxdm, false)}},$polymerMarkerTitleSwitch(lxdm, isShow) {// const lxdm = resourceData.lxdmconst txlcData = this.tclxAndData[lxdm]for (const p_key in txlcData) {const graList = txlcData[p_key]if (graList.length) {graList.forEach(graphicObj => {if (graphicObj.pointGraphic) {const marker = graphicObj.pointGraphic[0]this.mapTools.toggleLayerTitle(marker, isShow)// marker.visible = isShow// isShow ? marker.show() : marker.hide()}})}}},// 请求接口数据getConvergeLayerData(info, tclxdm) {const { level } = infoconst promise = new Promise((resolve, reject) => {getConvergeLayer({x_min: this.isInteger(info.left) ? info.left + '.0' : info.left + '',x_max: this.isInteger(info.right) ? info.right + '.0' : info.right + '',y_min: this.isInteger(info.bottom) ? info.bottom + '.0' : info.bottom + '',y_max: this.isInteger(info.top) ? info.top + '.0' : info.top + '',flag: level <= 14,check_net: info.checkNet,check_num: info.checkNum,lxdm: tclxdm}).then(res => {if (res.data) {resolve(res.data)}}).catch(err => {reject(err)})})return promise},removePreLevelMarker() {console.log('"remove"----打印', "remove")// this.tclxAndData[lxdm]for (const tclx in this.tclxAndData) {const txlcData = this.tclxAndData[tclx]for (const p_key in txlcData) {const graList = txlcData[p_key]if (graList.length) {graList.forEach(graphicObj => {if (graphicObj.pointGraphic) {console.log('graphicObj.pointGraphic[0]----打印', graphicObj.pointGraphic[0])this.mapTools.removeMarkerOnMap(graphicObj.pointGraphic[0])}if (graphicObj.convergeGraphic) {console.log('graphicObj.convergeGraphic[0]----打印', graphicObj.convergeGraphic[0])console.log('graphicObj.convergeGraphic[1]----打印', graphicObj.convergeGraphic[1])this.mapTools.removeMarkerOnMap(graphicObj.convergeGraphic[0])this.mapTools.removeMarkerOnMap(graphicObj.convergeGraphic[1])}})}}}},// 跟据图层类型关闭图层removeMarkerByTclx(tclx) {const txlcData = this.tclxAndData[tclx]if (!txlcData) returnfor (const p_key in txlcData) {const graList = txlcData[p_key]if (graList.length) {graList.forEach(graphicObj => {if (graphicObj.pointGraphic) {const pointGra = graphicObj.pointGraphic[0]// graphicObj.pointGraphic[0].hide()// this.mapTools.CMap.map.graphics.remove(pointGra)this.mapTools.removeMarkerOnMap(pointGra)}if (graphicObj.convergeGraphic) {graphicObj.convergeGraphic[0].hide()graphicObj.convergeGraphic[1].hide()// this.mapTools.removeMarkerOnMap(graphicObj.convergeGraphic[0])// this.mapTools.removeMarkerOnMap(graphicObj.convergeGraphic[1])}})}}},// 根据地图切片移除market对象removeNode(level, row, col) {if (this.level !== level) {this.level = levelthis.removeAllNodeOfIn()}},// 移除所有的market对象，数据保留removeAllNodeOfIn() {const arr = Object.keys(this.levelAndpkeyMap)if (arr.length) {for (const key in this.levelAndpkeyMap) {const list = this.levelAndpkeyMap[key]for (let j = 0; j < list.length; j++) {var grc = list[j]if (grc) {this.mapTools.removeMarkerOnMap(grc)}}}}},// 移除所有的market对象,数据清空removeAllNode() {const arr = Object.keys(this.levelAndpkeyMap)if (arr.length) {for (const key in this.levelAndpkeyMap) {const list = this.levelAndpkeyMap[key]for (let j = 0; j < list.length; j++) {var grc = list[j]if (grc) {this.mapTools.removeMarkerOnMap(grc)}}}this.levelAndpkeyMap = {}}},// 清除掉非本层的图标removeOtherLevelMarkerLayers(levelAndpkeyMap, level) {const keyArray = Object.keys(levelAndpkeyMap)const keyArrayLength = keyArray.lengthif (keyArrayLength) {for (let j = 0; j < keyArrayLength; j++) {var oldLevel = keyArray[j].split('_')[0]if (+oldLevel !== level) {levelAndpkeyMap[keyArray[j]].forEach(e => {this.mapTools.removeMarkerOnMap(e)})}}}},// 展示当前p_key已存在的图标showExistConverge(lxdm, p_key, resourceData) {const list = this.tclxAndData[lxdm][p_key]if (list && list.length) {for (let j = 0; j < list.length; j++) {const markerObj = list[j]if (markerObj.pointGraphic) {// const pointMarkerGra = markerObj.pointGraphic[0]// this.mapTools.CMap.map.graphics.add(pointMarkerGra)// pointMarkerGra.show()const _pointGraphicData = markerObj.pointGraphicDataconst marker = this.addPointMarker(_pointGraphicData, resourceData)markerObj.pointGraphic = marker}if (markerObj.convergeGraphic) {const convergeTextMarkerGra = markerObj.convergeGraphic[0]const convergeImgMarkerGra = markerObj.convergeGraphic[1]this.mapTools.CMap.map.graphics.add(convergeImgMarkerGra)this.mapTools.CMap.map.graphics.add(convergeTextMarkerGra)convergeImgMarkerGra.show()convergeTextMarkerGra.show()}}}},// 展示聚合图层addConvergeMarkerLayer(p_key, data, resourceData) {const tclxdm = resourceData.lxdmif (data) {const pointData = data.pointDateconst convergeData = data.convergeDateif (pointData && pointData.length) {for (let i = 0; i < pointData.length; i++) {const pointGra = this.addPointMarker(pointData[i], resourceData)this.tclxAndData[tclxdm][p_key].push({pointGraphic: pointGra,pointGraphicData: pointData[i]})}}if (convergeData && convergeData.length) {for (let i = 0; i < convergeData.length; i++) {const convergeGra = this.addConvergeMarker(convergeData[i], p_key, tclxdm)this.tclxAndData[tclxdm][p_key].push({ convergeGraphic: convergeGra })}}}},// 向地图添加单个设备图标对象addPointMarker(item, resourceData) {if (item.zbjhStr) {const textMarkerInfo = {...item,imageWidth: +item.tbgd || 28,imageHeight: +item.tbgd || 28,imageUrl: 'images/' + item.img,displayText: item.name}const pointMarkers = this.addMarkerClick(textMarkerInfo, resourceData)return pointMarkers}},// 向地图添加聚合对象addConvergeMarker(data, p_key, tclxdm) {if (data.jd && data.wd) {const textMarkerInfo = {jd: data.jd,wd: data.wd,displayText: data.num + '',imageWidth: 50,imageHeight: 50,offsetY: 12,imageUrl: 'images/' + data.img // 'images/cad/layer/juhe-lan.png'}const pointMarker = this.mapTools.showTextMarkerOnMap(textMarkerInfo, '#ffffff')// pointMarker[0].show()// pointMarker[1].show()this.mapTools.setAttrForGraphic(pointMarker[0], { ...data })this.mapTools.addGraphicEventListener(pointMarker[0],this.mapTools.MAPCONSTANT.MAPEVENT.CLICK,(attrs, graphic) => {console.log('addConvergeMarker-click', attrs)})return pointMarker// 当快速点击图层按钮，开关图层时，会造成marketMap.get(level+'_'+row+'_'+col)为undefined，// 无法将刚才新添加的对象就没有保存下来，下次自然就无法清除这个图标// 当发生这种情况的话，就将刚才已经添加完毕的这个图标对象移除// if (this.levelAndpkeyMap[p_key]) {//   this.levelAndpkeyMap[p_key].push(pointMarker)// } else {//   this.mapTools.CMap.map.graphics.remove(pointMarker[0])//   this.mapTools.CMap.map.graphics.remove(pointMarker[1])// }}}}
}

解决视频