思考： 选中： 通过singleclick事件可以获取坐标点，openlayer中Feature有个getGeometry().getClosestPoint§方法，就是feature根据这个p坐标可以获取到里这个点最近的坐标点，然后咱们通过这个点和点击的点的距离进行比较，并且咱们也可以进一步的进行限定（判定点击的坐标在feature的边界内），这样做还是有问题，就是你还有可能选中不相关的点或者线，咱们可以做一个工具，也是使用openlayer加载geojson，然后通过选中你想要进行标定的要素，将这些块的类型导出到csv文件里面，这样当你上传压缩包发布服务的时候就可以将这个放进去，在后台将这个文件解析，放到视图的字段里面，这样当你加载视图时就可以通过这个字段进行过滤,想要了解的话具体看这个
**取消选中：**继续根据这个点击坐标找到feature，判断这个feature的样式是不是已经是选中的样式，如果是设置回初始的样式
根据所有的feature和点击的坐标找到选中的feature：
//单击根据坐标找出最近的一个feature selectedFeature: function(e,allFeatures){ var p = e.coordinate var p1 = new Point(transform(p, 'EPSG:3857', 'EPSG:4326')).getCoordinates(); //遍历所有feature找到距离点击坐标最近的feature for(let j=0;j<allFeatures.length-1;j++){ var b1 = new Point(transform(allFeatures[j].getGeometry().getClosestPoint(p), 'EPSG:3857', 'EPSG:4326')).getCoordinates(); var b2 = new Point(transform(allFeatures[j+1].getGeometry().getClosestPoint(p), 'EPSG:3857', 'EPSG:4326')).getCoordinates(); var x1 = this.getDistance(p1[0],p1[1],b1[0],b1[1]); var x2 = this.getDistance(p1[0],p1[1],b2[0],b2[1]); let fea = allFeatures[j+1] if(x1<x2){ allFeatures[j+1] = allFeatures[j] allFeatures[j] = fea } } return allFeatures[allFeatures.length-1] }, //计算两点之间距离 getDistance: (lat1, lng1, lat2, lng2)=>{ lat1 = lat1 || 0; lng1 = lng1 || 0; lat2 = lat2 || 0; lng2 = lng2 || 0; var rad1 = lat1 * Math.PI / 180.0; var rad2 = lat2 * Math.PI / 180.0; var a = rad1 - rad2; var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0; var r = 6378137; return r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2))) },调用上面的方法实现选中和取消选中：
this.clickEvent = this.map.on('singleclick',mapClick); async function mapClick(e){ let p = e.coordinate let a = util.selectedFeature(e,that.allFeatures) console.log('a',a) let center = util.getCenterOfExtent(a) let Extent = a.getGeometry().getExtent() //单击选中设置标记和高亮，再次选中取消样式和标记 let polygonStyles = util.polygonStyle() let groupStyle = util.groupStyle() //我这里涉及到了组合的概念，所以多了样式 if(a.getStyle() && a.getStyle().getStroke().getColor() == groupStyle.getStroke().getColor()){//取消选中 let seaf = [] that.searchFeatures.forEach(function(e){ if(e.fids.includes(a.values_.Handle)){ }else{ seaf.push(e) } }) that.searchFeatures = seaf let scFeaturesKeys = Object.keys(that.selectedCalibratedFeatures) let scNum = 0 for(let i=0;i<scFeaturesKeys.length;i++){ if(scFeaturesKeys[i].split('-').includes(a.values_.Handle)){ for(let j=0;j<that.selectedCalibratedFeatures[scFeaturesKeys[i]].length;j++){ that.selectedCalibratedFeatures[scFeaturesKeys[i]][j].setStyle(util.calibratedStyle()) } for(let k=0;k<scFeaturesKeys[i].split('-').length;k++){ if(that.markFeatures[scFeaturesKeys[i].split('-')[k]]){ for(let c=0;c<that.selectSpaceList.length;c++){ if(parseInt(that.markFeatures[scFeaturesKeys[i].split('-')[k]].values_.name) === that.selectSpaceList[c].index){ that.selectSpaceList.splice(c,1) } } that.vectorSourceNum.removeFeature(that.markFeatures[scFeaturesKeys[i].split('-')[k]]) delete that.markFeatures[scFeaturesKeys[i].split('-')[k]] } } delete that.selectedCalibratedFeatures[scFeaturesKeys[i]] scNum++ } } if(scNum === 0){ a.setStyle(that.styles) delete that.selectFeatures[a.values_.Handle] if(that.markFeatures[a.values_.Handle]){ that.vectorSourceNum.removeFeature(that.markFeatures[a.values_.Handle]) delete that.markFeatures[a.values_.Handle] } } }else if(a.getStyle() && a.getStyle().getStroke().getColor() == polygonStyles.getStroke().getColor()){ let seaf = [] that.searchFeatures.forEach(function(e){ if(e.fids.includes(a.values_.Handle)){ }else{ seaf.push(e) } }) that.searchFeatures = seaf let scFeaturesKeys = Object.keys(that.selectedCalibratedFeature) let scNum = 0 for(let i=0;i<scFeaturesKeys.length;i++){ if(a.values_.Handle === scFeaturesKeys[i]){ that.selectedCalibratedFeature[scFeaturesKeys[i]].setStyle(util.calibratedStyle()) for(let c=0;c<that.selectSpaceList.length;c++){ if(parseInt(that.markFeatures[scFeaturesKeys[i]].values_.name) === that.selectSpaceList[c].index){ that.selectSpaceList.splice(c,1) that.vectorSourceNum.removeFeature(that.markFeatures[scFeaturesKeys[i]]) delete that.markFeatures[scFeaturesKeys[i]] delete that.selectedCalibratedFeature[scFeaturesKeys[i]] scNum++ } } } } if(scNum === 0){ a.setStyle(that.styles) let sf = Object.keys(that.selectFeatures) for(let i=0;i<sf.length;i++){ if(a.values_.Handle === sf[i]){ for(let c=0;c<that.selectSpaceList.length;c++){ if(parseInt(that.markFeatures[sf[i]].values_.name) === that.selectSpaceList[c].index){ that.selectSpaceList.splice(c,1) } } } } delete that.selectFeatures[a.values_.Handle] if(that.markFeatures[a.values_.Handle]){ that.vectorSourceNum.removeFeature(that.markFeatures[a.values_.Handle]) delete that.markFeatures[a.values_.Handle] } } }else{//选中设置高亮 if (p[0] < Extent[0] || p[0] > Extent[2] || p[1] < Extent[1] || p[1] > Extent[3]) { return null }else{ if(that.firstBlood === 0){ that.isSidebarAfter = true that.isOpen = true that.firstBlood += 1 } //添加数字标记 let newFeature = that.newFeatureUtil(a) //如果选中的空间单元已被组合，高亮整个组合 let num = 0 //控制单个空间单元的高亮 let arr = that.allCalibratedSpace let groupFeatures = null console.log('a.values_.Handle',a.values_.Handle) let space = await that.space_findByFids({ mapid: a.values_.Handle, regionId: that.regionId }) let result = space.result console.log('result',result) if(result.length>0){ let rs = null //组合 let zs = null //子单元 for(let i=0;i<result.length;i++){ if(result[i].fids.length>1){ rs = result[i] }else{ zs = result[i] } } if(rs){ let pid = '' that.spaceList.map((item) => { if(item.name === rs.parentType){ pid = item._id } }) groupFeatures = util.highlightGroup(rs.fids,that.allFeatures) // that.selectFeatures['group'] = that.selectFeatures['group'].concat(groupFeatures) that.selectedCalibratedFeatures[rs.fids.join('-')] = groupFeatures that.selectSpaceList.push({ index: parseInt(newFeature.values_.name), _id: rs._id, spaceName: rs.spaceName,//空间单元名称 spaceType: [pid,rs.childTypeId], isGroup: true, feature: groupFeatures }) that.$nextTick(() =>{ that.$refs.multipleTable.toggleRowSelection(that.selectSpaceList[that.selectSpaceList.length-1],true); }) return } if(rs === null && zs){ let pid = '' that.spaceList.map((item) => { if(item.name === zs.parentType){ pid = item._id } }) // that.selectFeatures['group'].push(a) that.selectedCalibratedFeature[zs.fids[0]] = a a.setStyle(polygonStyles) that.selectSpaceList.push({ index: parseInt(newFeature.values_.name), spaceName: zs.spaceName,//空间单元名称 _id: zs._id, spaceType: [pid,zs.childTypeId], isGroup: false, feature: a }) } }else{ a.setStyle(polygonStyles) that.selectFeatures[a.values_.Handle] = a //将选中的feature放到数组里面，便于组合 that.selectSpaceList.push({ index : parseInt(newFeature.values_.name), _id: '', spaceName:'',//空间单元名称 // childTypeId:'', //空间单元子类型_id // parentType:'', //空间单元父类型名称 spaceType: null, isGroup: false, feature: a }) } if(that.canGroup()){//如果选中的单元多于一个组合按钮高亮 document.getElementsByClassName('btn_Label_zh')[0].style.color = 'rgba(225,229,238,1)' }else{ document.getElementsByClassName('btn_Label_zh')[0].style.color = 'rgba(225,229,238,0.5)' } if(that.canUngroup()){ document.getElementsByClassName('btn_Label_cz')[0].style.color = 'rgba(225,229,238,1)' }else{ document.getElementsByClassName('btn_Label_cz')[0].style.color = 'rgba(225,229,238,0.5)' } if(Object.keys(that.selectedCalibratedFeatures).length >= 1){//如果选中的单元不多于一个删除按钮变暗 document.getElementsByClassName('btn_Label_sc')[0].style.color = 'rgba(225,229,238,1)' }else if(Object.keys(that.selectedCalibratedFeature).length >=1){ document.getElementsByClassName('btn_Label_sc')[0].style.color = 'rgba(225,229,238,1)' }else{ document.getElementsByClassName('btn_Label_sc')[0].style.color = 'rgba(225,229,238,0.5)' } that.$nextTick(() =>{ that.$refs.multipleTable.toggleRowSelection(that.selectSpaceList[that.selectSpaceList.length-1],true); }) } } }