From 43aeea6debfa21df65d75fa544008c5e235c88ca Mon Sep 17 00:00:00 2001 From: ZhaoTongYao <531131322@qq.com> Date: Thu, 2 Jun 2022 15:35:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5screen-map?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../duoyuanfuwu/duoyuanfuwufenxi.vue | 7 +- .../visual/components/screen-map/index.vue | 228 +++++++++++++----- 2 files changed, 174 insertions(+), 61 deletions(-) diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue index 6ed17014..4b64c27f 100644 --- a/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue +++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue @@ -447,11 +447,11 @@ export default { //加载地图数据 loadMap () { if (this.isfirstInit) { - this.agencyInfo.level = 'agency' + // this.agencyInfo.level = 'agency' //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null) } else { - this.$refs.map.refreshMap(this.polygonList, this.distributionsList) + this.$refs.map.refreshMap(this.agencyInfo, this.polygonList, this.distributionsList) } }, @@ -613,6 +613,9 @@ export default { if (!this.agencyInfo.level) { this.agencyInfo.level = 'street' } + if (!this.agencyInfo.agencyLevel) { + this.agencyInfo.agencyLevel = 'street' + } } else { this.$message.error(msg); } diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 6dc18d83..a8d87ca4 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -21,8 +21,8 @@ -->
+ :id="mapId" + :ref="mapId">
@@ -79,6 +82,24 @@ let iconSource; // icon let select;//选中标注 +let iconTextsStyle = { + textAlign: undefined, + font: "18px Arial", + //fontFamily: "Courier New, monospace", + // fontWeight: "bold", + text: '', + backgroundFill: new Fill({ + color: 'rgba(0, 146, 238, 0.75)' + // color: textColorArray[feature.values_.colorIndex] + }), + padding: [4, 10, 4, 10], + //text: "变电站名称", + fill: new Fill({ color: "#ffffff" }), + // stroke: new Stroke({ color: "#ffffff", width: 3 }), + offsetY: -30, + offsetX: -50, + overflow: true, +} let polygonColorArray = [ 'rgba(210, 2, 2, 0.24)', @@ -86,7 +107,19 @@ let polygonColorArray = [ 'rgba(183, 185, 0, 0.16)' ]; + //icon文字样式 +let createTextStyle = function (feature) { + + if (iconTextsStyle) { + let iconTextsStyles = { ...iconTextsStyle } + iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name + return new Text({ ...iconTextsStyles }) + } else { + return null + } + +} //多边形标注样式 var polygonStyleFunction = (function () { return function (feature) { @@ -105,6 +138,8 @@ var polygonStyleFunction = (function () { }; })() + + const vueGis = { name: 'HomeMap', data () { @@ -151,7 +186,7 @@ const vueGis = { iconArrays: [ ], - iconTextStyle: {}, + // iconTextStyle: {}, //policon图标样式 polIconUrlArray: [ @@ -181,32 +216,32 @@ const vueGis = { loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle, distanceMax) { this.mapInfo = mapInfo this.polygonArray = polygonArray - this.polIconUrlArray = polIconUrlArray + this.polIconUrlArray = polIconUrlArray || [] this.iconArrays = iconArrays this.iconUrlArray = iconUrlArray - this.iconTextStyle = iconTextStyle + iconTextsStyle = iconTextStyle || iconTextsStyle this.distanceMax = distanceMax // iconArrays.forEach(item => { // console.log(item.type, item.urlIndex, item.latitude, item.longitude) // }); - + //初始化地图 this.initMap() - - if (this.showPolygonLayer) { + + if (this.showPolIconLayer) { + console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer) //初始化多边形标注图层 - this.initPolygonLayer() + this.initPolIconLayer() //加载当前园区的标注 - this.loadPolygon() + // this.loadPolIcon() } - if (this.showPolIconLayer) { - + if (this.showPolygonLayer) { //初始化多边形标注图层 this.initPolygonLayer() //加载当前园区的标注 - this.loadPolIcon() + this.loadPolygon() } if (this.showIconLayer) { @@ -220,41 +255,51 @@ const vueGis = { this.addOverlay() } - this.addMapClick() }, //刷新地图 - async refreshMap (polygonArray, iconArrays) { - + async refreshMap (mapInfo, polygonArray, iconArrays) { + this.mapInfo = mapInfo + this.polygonArray = [] this.polygonArray = polygonArray this.iconArrays = iconArrays - + if (iconSource) { + iconSource.clear() + } + if (polygonSource) { + polygonSource.clear() + } + if (polIconSource) { + polIconSource.clear() + } + this.initPolIconLayer() + if (this.showPolygonLayer) { - + this.initPolygonLayer() //加载当前园区的标注 this.loadPolygon() } if (this.showPolIconLayer) { - + this.initIconLayer() //加载当前园区的标注 - this.loadPolIcon() + // this.loadPolIcon() } if (this.showIconLayer) { this.loadIcon() } - - + this.setMapLocation() + // gaodeMapLayer.getSource().changed() + }, - //加载多边形 + //加载区域多边形 loadPolygon () { - polygonSource.clear()//清空多边形标注 - + // iconSource.clear() let featureData = []//多边形数据数据 if (this.polygonArray && this.polygonArray.length > 0) {//判断是否存在下级标注 @@ -311,9 +356,11 @@ const vueGis = { }, - //加载多边形的icon + //加载区域多边形的icon loadPolIcon (feature) { + polIconSource.clear() let polyIconFeatures = []; + console.log('feature-----', feature) feature.forEach(oneIcon => { var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy] @@ -330,28 +377,27 @@ const vueGis = { id: oneIcon.id_ } }); - + // console.log('oneIcon----', oneIcon) let polyIconStyle = new Style({ image: new Icon({ // anchor: [0.5, 0.5], // imgSize: [32, 32], - scale: 0.5, - src: polIconUrlArray[oneIcon.values_.index - 1] - }) + scale: this.areaScale, + src: this.polIconUrlArray[0] + }), + text: createTextStyle(oneIcon) }); polyIcon.setStyle(polyIconStyle); polyIconFeatures.push(polyIcon); }); - polIconSource.addFeatures(polyIconFeatures); }, //加载icon图标 loadIcon () { iconSource.clear()//清空多边形标注 - if (this.iconArrays && this.iconArrays.length > 0) { let iconFeatures = []; @@ -367,15 +413,14 @@ const vueGis = { info: { ...oneIcon } } }); - let iconStyle = new Style({ image: new Icon({ // anchor: [0.5, 0.5], // imgSize: [32, 32], // scale: 0.5, - src: this.iconUrlArray[oneIcon.urlIndex] + src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] }), - text: this.createTextStyle(oneIcon) + // text: createTextStyle(oneIcon) }); iconItem.setStyle(iconStyle); @@ -397,18 +442,6 @@ const vueGis = { } }, - //icon文字样式 - createTextStyle (feature) { - if (this.iconTextStyle) { - let iconTextStyle = { ...this.iconTextStyle } - iconTextStyle.text = feature.values_.name - return new Text({ ...iconTextStyle }) - } else { - return null - } - - - }, //计算和中心点距离 computedDistance (lon, lat, max) { @@ -425,7 +458,7 @@ const vueGis = { //初始化地图 initMap () { - this.setMapLocation() + this.firstCentermap() gaodeMapLayer = new TileLayer({ title: "地图", source: new XYZ({ @@ -452,7 +485,7 @@ const vueGis = { layers: [gaodeMapLayer], //加载瓦片图层数据 view: mapView, - target: 'map' + target: this.mapId //目标加载到map中 }) @@ -478,8 +511,53 @@ 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' + this.centerPoint.push(this.mapInfo.longitude) + this.centerPoint.push(this.mapInfo.latitude) + + } 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); + } + mapView.setZoom(this.zoom); + + }, + firstCentermap() { if (this.mapInfo.longitude && this.mapInfo.latitude) { this.centerPoint = [] this.centerPoint.push(this.mapInfo.longitude) @@ -489,7 +567,7 @@ const vueGis = { this.centerPoint = centerPointGlobal } - this.setZoom(this.mapInfo.level) + this.setZoom(this.mapInfo.agencyLevel) }, //根据组织层级设置缩放级别 @@ -507,7 +585,8 @@ const vueGis = { //初始化多边形标注图层 initPolygonLayer () { polygonSource = new VectorSource({ - //features: (new GeoJSON()).readFeatures(geojsonObject) + // features: (new GeoJSON()).readFeatures(geojsonObject) + wrapX: false }); polygonLayer = new VectorLayer({ @@ -515,7 +594,7 @@ const vueGis = { style: polygonStyleFunction, zIndex: 50 }); - + let that = this //选中多边形后的样式 var overlayStyle = (function () { @@ -535,7 +614,7 @@ const vueGis = { }) }), new Style({ - // text: createTextStyle(feature) // 报错 暂时注掉 zty 2022.05.19 + // text: createTextStyle(feature) // 报错 暂时注掉 zhaotongyao 2022.05.19 }) ]; styles['MultiPolygon'] = styles['Polygon']; @@ -558,6 +637,7 @@ const vueGis = { initPolIconLayer () { polIconSource = new VectorSource({ //features: (new GeoJSON()).readFeatures(geojsonObject) + wrapX: false }); polIconLayer = new VectorLayer({ @@ -571,9 +651,9 @@ const vueGis = { //初始化icon图层 initIconLayer () { - iconSource = new VectorSource({ //features: (new GeoJSON()).readFeatures(geojsonObject) + wrapX: false }); iconLayer = new VectorLayer({ @@ -597,6 +677,7 @@ const vueGis = { var container = document.getElementById("popup"); var closer = document.getElementById("popup-closer"); var content = document.getElementById("popup-content"); + var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null // 创建一个弹窗 Overlay 对象 this.overlay = new Overlay({ @@ -619,6 +700,11 @@ const vueGis = { closer.blur(); return false; }; + if (goMore) { + goMore.onclick = function () { + _that.$emit('lookMore') + }; + } }, //注册地图点击事件 @@ -650,15 +736,27 @@ const vueGis = { }); }, - handleShowPopup (showData, coordinate) { + handleShowPopup (showData, coordinate, isShowMore) { + if (isShowMore) { + document.getElementById("popup-goMore").style.display = 'block' + } else { + document.getElementById("popup-goMore").style.display = 'none' + } console.log(this.overlay.getElement()) + let content = document.getElementById("popup-content"); this.overlay.getElement().style.display = 'block' this.overlay.getElement().parentNode.style.display = 'block' this.overlay.getElement().parentNode.parentNode.style.display = 'block' - var content = document.getElementById("popup-content"); - content.innerHTML = showData; - this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标 + this.overlay.setPosition(coordinate); + //把 overlay 显示到指定的 x,y坐标 + + }, + // 关闭弹窗 + handleClosePopup() { + this.overlay.setPosition(undefined); + document.getElementById("popup-closer").blur(); + return false; }, //取随机数 @@ -685,6 +783,10 @@ const vueGis = { }, }, props: { + mapId: { + type: String, + default: 'map' + }, //是否显示多边形图层 showPolygonLayer: { type: Boolean, @@ -711,6 +813,10 @@ const vueGis = { clickType: { type: String, default: 'back' + }, + areaScale: { + type: Number, + default: 0.5 } }, @@ -795,8 +901,12 @@ export default vueGis; .popup-content { width: 300px; } +.popup-goMore{ + margin: 20px 0; +} .ol-popup-closer:after { content: "✖"; - color: rgba(1, 17, 104, 1); + // color: rgba(1, 17, 104, 1); + color: #fff; } \ No newline at end of file