diff --git a/src/views/modules/visual/plugin/power/components/screen-org-map.vue b/src/views/modules/visual/plugin/power/components/screen-org-map.vue index 177bca7ef..f7e9bb875 100644 --- a/src/views/modules/visual/plugin/power/components/screen-org-map.vue +++ b/src/views/modules/visual/plugin/power/components/screen-org-map.vue @@ -31,6 +31,12 @@ let gaodeMapLayer // 背景地图图层 let markerSource let markerLayer +let markerSource_1 +let markerLayer_1 + +let markerSource_2 +let markerLayer_2 + let parentLayer;//上级组织图层 @@ -130,7 +136,8 @@ export default { orgData: {},//当前组织对象 iconCoordinators: [], parentPolygon: [], - subAgencyArray: [] + subAgencyArray: [], + centerFlag: 'point',//定义中心点的flag point点 fit 自适应 } }, async mounted() { @@ -148,6 +155,8 @@ export default { //加载当前园区的标注 this.loadPolygon() + + this.setMapLocation() }, methods: { initMap () { @@ -179,6 +188,45 @@ export default { // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); }) }, + //设置地图定位的中心点和缩放级别 + setMapLocation () { + if (!this.zoom) { + this.setZoom(this.orgData.agencyLevel) + } + this.centerPoint = [] + + + //如果存在中心点(返回时赋值) + if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入,不存在下级组织,用父级组织 + this.centerFlag = 'flag_parent' + } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织 + this.centerFlag = 'flag_polygon' + } else if (this.orgData.longitude && this.orgData.latitude) { + this.centerPoint.push(this.orgData.longitude) + this.centerPoint.push(this.orgData.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); + } + mapView.setZoom(this.zoom); + }, + firstCenterMap () { this.centerPoint = [] if (this.orgData.longitude && this.orgData.latitude) { @@ -190,6 +238,9 @@ export default { } }, addMarker (list, icon=iconArray[0], scale=1) { + if (markerSource) { + markerSource.clear() + } markerSource = new VectorSource({ // features: new GeoJSON().readFeatures(geojsonObject) }) @@ -245,6 +296,70 @@ export default { markerSource.addFeatures(features) map.addLayer(markerLayer) }, + addMarker_1 (list, icon=iconArray[0], scale=1) { + if (markerSource_1) { + markerSource_1.clear() + } + markerSource_1 = new VectorSource({ + // features: new GeoJSON().readFeatures(geojsonObject) + }) + markerLayer_1 = new VectorLayer({ + source: markerSource_1, + zIndex: 50 + }) + let features = [] + list.forEach((item, index) => { + const point = [parseFloat(item.longitude), parseFloat(item.latitude)] + let marker = new Feature({ + geometry: new Point(point), + properties: { + ...item + } + }) + let iconStyle = new Style({ + image: new Icon({ + scale: scale, + src: icon + }) + }) + marker.setStyle(iconStyle) + features.push(marker) + }) + markerSource_1.addFeatures(features) + map.addLayer(markerLayer_1) + }, + addMarker_2 (list, icon=iconArray[0], scale=1) { + if (markerSource_2) { + markerSource_2.clear() + } + markerSource_2 = new VectorSource({ + // features: new GeoJSON().readFeatures(geojsonObject) + }) + markerLayer_2 = new VectorLayer({ + source: markerSource_2, + zIndex: 50 + }) + let features = [] + list.forEach((item, index) => { + const point = [parseFloat(item.longitude), parseFloat(item.latitude)] + let marker = new Feature({ + geometry: new Point(point), + properties: { + ...item + } + }) + let iconStyle = new Style({ + image: new Icon({ + scale: scale, + src: icon + }) + }) + marker.setStyle(iconStyle) + features.push(marker) + }) + markerSource_2.addFeatures(features) + map.addLayer(markerLayer_2) + }, //加载组织数据 async loadOrgData () { @@ -276,8 +391,6 @@ export default { }, //加载父级组织多边形 loadParentPolygon () { - parentSource.clear()//清空变电站标注 - let featureData = []//标注数据 if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注 let oneData = {} @@ -435,7 +548,6 @@ export default { parentSource = new VectorSource({ //features: (new GeoJSON()).readFeatures(geojsonObject) }); - parentLayer = new VectorLayer({ source: parentSource, style: parentStyleFunction, @@ -505,9 +617,7 @@ export default { source: iconSource, zIndex: 70 }); - map.addLayer(iconLayer); - }, }, diff --git a/src/views/modules/visual/plugin/power/organization.vue b/src/views/modules/visual/plugin/power/organization.vue index 303424b19..f317a5713 100644 --- a/src/views/modules/visual/plugin/power/organization.vue +++ b/src/views/modules/visual/plugin/power/organization.vue @@ -17,8 +17,8 @@ :options="agencytree" v-model="agencyId" :show-all-levels="false" - :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }" - clearable/> + @change="handleChangeAgencytree" + :props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"/>