diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 0d9f75ce..e85e184c 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -197,7 +197,7 @@ const vueGis = { //icon图标样式 iconUrlArray: [], iconTextColor: '#ffffff', - distanceMax: null,//显示的坐标距离中心点的范围 + distanceMax: null,//显示的坐标距离中心点的范围 input_lat: null, input_lon: null, @@ -207,7 +207,6 @@ const vueGis = { }, async mounted () { - }, methods: { showPosition () { @@ -231,7 +230,6 @@ const vueGis = { //初始化地图 this.initMap() - if (this.showPolIconLayer) { console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer) //初始化多边形标注图层 @@ -246,6 +244,7 @@ const vueGis = { this.loadPolygon() } + if (this.showIconLayer) { //初始化icon图层 this.initIconLayer() @@ -296,7 +295,6 @@ const vueGis = { } this.setMapLocation() // gaodeMapLayer.getSource().changed() - }, //加载区域多边形 @@ -355,6 +353,7 @@ const vueGis = { this.loadPolIcon(feature) } + } }, @@ -363,7 +362,7 @@ const vueGis = { loadPolIcon (feature) { polIconSource.clear() let polyIconFeatures = []; - console.log('feature-----', feature) + // console.log('feature-----', feature) feature.forEach(oneIcon => { var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界,格式为[minx,miny,maxx,maxy] @@ -380,7 +379,7 @@ const vueGis = { id: oneIcon.id_ } }); - // console.log('oneIcon----', oneIcon) + // console.log('oneIcon----ddd', oneIcon) let polyIconStyle = new Style({ image: new Icon({ // anchor: [0.5, 0.5], @@ -416,12 +415,14 @@ const vueGis = { info: { ...oneIcon } } }); + // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex]) let iconStyle = new Style({ image: new Icon({ // anchor: [0.5, 0.5], // imgSize: [32, 32], // scale: 0.5, - src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] + // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0] + src: (oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex]) || (oneIcon.index &&this.iconUrlArray[oneIcon.index]) || this.iconUrlArray[0] }), // text: createTextStyle(oneIcon) }); @@ -454,8 +455,8 @@ const vueGis = { return (distance < max || distance === max) // debugger - // return - // var wgs84Sphere = new ol.Sphere(6378137); + // return + // var wgs84Sphere = new ol.Sphere(6378137); // wgs84Sphere.haversineDistance([120.21592590991689, 30.210793016606],[120.21670777384473, 30.211168525868086]); }, @@ -514,6 +515,46 @@ const vueGis = { }, //设置地图定位的中心点和缩放级别 setMapLocation () { + if (!this.zoom) { + this.setZoom(this.mapInfo.agencyLevel) + } + this.centerPoint = [] + + + //如果存在中心点(返回时赋值) + if (this.center && this.center.length > 0) { + this.centerPoint = this.center + this.centerFlag = 'point' + this.center = [] + + } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织 + this.centerFlag = 'flag_polygon' + + } else if (this.mapInfo.longitude && this.mapInfo.latitude) { + this.centerPoint.push(this.mapInfo.longitude) + this.centerPoint.push(this.mapInfo.latitude) + this.centerFlag = 'point' + + } else { + this.centerPoint = centerPointGlobal + this.centerFlag = 'point' + } + // debugger + if (this.centerFlag === 'flag_parent') { + let parentFeatures = parentLayer.getSource().getFeatures()[0] + let polygon = parentFeatures.getGeometry(); + map.getView().fit(polygon, map.getSize()); + this.zoom = map.getView().getZoom() - 1 + + } else if (this.centerFlag === 'flag_polygon') { + let polygonFeatures = polygonLayer.getSource().getFeatures()[0] + let polygon = polygonFeatures.getGeometry(); + map.getView().fit(polygon, map.getSize()); + this.zoom = map.getView().getZoom() - 1 + + } else { + mapView.setCenter(this.centerPoint); + } if (!this.isChangeCenter) { return false @@ -579,13 +620,13 @@ const vueGis = { }, //根据组织层级设置缩放级别 - setZoom (level) { - if (level === 'district') { - this.zoom = 11 - } else if (level === 'street') { - this.zoom = 12 - } else if (level === 'community') { - this.zoom = 13 + setZoom(level) { + if (level === "district") { + this.zoom = 11; + } else if (level === "street") { + this.zoom = 12; + } else if (level === "community") { + this.zoom = 13; } }, @@ -630,15 +671,18 @@ const vueGis = { }; })(); - // select = new Select({ - // style: overlayStyle - // }); - // 有BUG 加入多边形选中样式时,如果同时存在icon层和多边形层,点击icon会使icon消失 ---zhaotongyao 2022.06.01 + select = new Select({ + style: overlayStyle + }); - map.addLayer(polygonLayer) - // map.addInteraction(select); + map.addLayer(polygonLayer) + if (this.$route.path == '/main-shuju/visual-communityGovern-duoyuanfuwu-duoyuanfuwufenxi' || this.$route.path == '/main-shuju/visual-communityParty-gridParty' || this.$route.path == '/main-shuju/visual-communityParty-community') { // 2022.6.9 网格党建平面图 联建单位分析页面 点位点击以后会消失,屏蔽这段代码以后可以解决 + console.log('去掉默认点击') + } else { + map.addInteraction(select); + } }, //初始化多边形icon图层 @@ -917,4 +961,4 @@ export default vueGis; // color: rgba(1, 17, 104, 1); color: #fff; } - \ No newline at end of file + \ No newline at end of file