From 4f36221391b8218767b2936c83a1c48405a71e08 Mon Sep 17 00:00:00 2001 From: Xu Zhimeng Date: Mon, 26 Jun 2023 17:43:04 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E4=B8=8A=E5=9C=86=E5=9C=88=E7=9A=84=E7=BB=98=E5=88=B6=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=BB=A5=E4=BF=AE=E5=A4=8D=E5=A4=9A=E4=B8=AA?= =?UTF-8?q?=E4=B8=96=E7=95=8C=E4=B8=AD=E5=87=BA=E7=8E=B0=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E5=9C=86=E5=9C=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stationOperation/components/MapMarker.vue | 82 ++++++++++++++++++- .../stationOperation/components/MapPane.vue | 54 ++---------- src/views/stationOperation/index.vue | 22 ++++- 3 files changed, 102 insertions(+), 56 deletions(-) diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue index a5596ce..763ec8f 100644 --- a/src/views/stationOperation/components/MapMarker.vue +++ b/src/views/stationOperation/components/MapMarker.vue @@ -27,6 +27,13 @@ export default { list: { type: Array, required: true + }, + markerType: { + type: Number, + default: 1 + }, + radius: { + type: Number } }, data() { @@ -39,6 +46,11 @@ export default { }, mounted() { this.map = this.$parent.getMapInstance() + this.map.getView().on('change:resolution', () => { + // 分辨率发生变化时的处理逻辑 + this.changeCircleRadius() + }) + this.getStationInfo = debounce(stationInfo => { // 查询设施详情时去抖动 if (this.isHover) { @@ -47,6 +59,60 @@ export default { }, 0) }, methods: { + initCircles() { + const circleRadius = this.getRadius() * 2 + + this.list + .filter( + stationInfo => + stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL + ) + .forEach(stationInfo => { + this.map.addOverlay(this.getCircle(stationInfo, circleRadius)) + }) + }, + + getCircle({ lon, lat, stationType, stationId }, circleRadius) { + const circleDiv = document.createElement('div') + circleDiv.className = 'custom-map-circle' + circleDiv.style.width = circleRadius + 'px' + circleDiv.style.height = circleRadius + 'px' + circleDiv.style.borderRadius = '50%' + circleDiv.style.backgroundColor = 'rgba(255, 0, 0, .4)' + return new Overlay({ + position: fromLonLat([lon, lat]), + element: circleDiv, + id: `circle_${stationType}_${stationId}`, + positioning: 'center-center', + className: 'circle-overlay' + }) + }, + + // 修改圆的半径 + changeCircleRadius() { + const overlays = this.map.getOverlays().getArray() + const circleOverlays = overlays.filter(item => item.id.indexOf('circle') == 0) // 根据id标识获取所有的圆 + const circleRadius = this.getRadius() * 2 + + circleOverlays.forEach(circle => { + const circleEle = circle.getElement() + circleEle.style.width = circleRadius + 'px' + circleEle.style.height = circleRadius + 'px' + }) + }, + + // 半径计算 + getRadius() { + const metersPerUnit = this.map + .getView() + .getProjection() + .getMetersPerUnit() + + const distance = (this.radius * 1000) / metersPerUnit + const resolution = this.map.getView().getResolution() + return distance / resolution + }, + // 初始化marker initMarkers() { this.list.forEach(stationInfo => { @@ -78,7 +144,7 @@ export default { return new Overlay({ position: fromLonLat([lon, lat]), element: img, - id: `${stationInfo.stationType}_${stationInfo.stationId}`, + id: `marker_${stationInfo.stationType}_${stationInfo.stationId}`, positioning: 'center-center' }) }, @@ -107,7 +173,8 @@ export default { position: fromLonLat([lon, lat]), element: rippleDiv, id: `ripple_${stationType}_${stationId}`, - positioning: 'center-center' + positioning: 'center-center', + className: 'ripple-overlay' }) }, @@ -164,6 +231,9 @@ export default { this.initMapPopup() this.initMarkers() this.initRipples() + if (this.markerType == 2) { + this.initCircles() + } } } } @@ -227,10 +297,10 @@ export default { .custom-ripple { width: 85px; height: 85px; - z-index: -1; @duration: 1.8s; @delay: 0.9s; + .inner-ripple-1 { position: absolute; top: 0; @@ -240,6 +310,7 @@ export default { background-image: radial-gradient(circle, transparent 10%, rgba(15, 148, 28, 0.2) 30%, rgba(15, 148, 28, 0.5) 60%); animation: rippleEffect @duration linear 0s infinite; } + .inner-ripple-2 { position: absolute; top: 0; @@ -262,4 +333,9 @@ export default { opacity: 0; } } + +.ripple-overlay, +.circle-overlay { + pointer-events: none !important; +} diff --git a/src/views/stationOperation/components/MapPane.vue b/src/views/stationOperation/components/MapPane.vue index 62ff6dc..e7f01df 100644 --- a/src/views/stationOperation/components/MapPane.vue +++ b/src/views/stationOperation/components/MapPane.vue @@ -473,10 +473,11 @@ export default { source.clear() // 清理图层 switch (active) { case 1: // 核设施查询面板 - this.drawCircle() + this.emitDrawCircle(2) this.emitStationChange() break case 2: // 筛选面板 + this.emitDrawCircle(1) this.emitFilter() break } @@ -581,9 +582,8 @@ export default { } this.markerList = markerList + this.emitDrawCircle(2) this.emitStationChange() - - this.drawCircle() } else { this.dataSource = [] this.markerList = [] @@ -600,52 +600,8 @@ export default { }, // 绘制圆圈 - drawCircle() { - const source = this.circleLayer.getSource() - const circleFeatures = [] - this.stationList.forEach(stationItem => { - circleFeatures.push(this.getCircle(stationItem)) - }) - source.addFeatures(circleFeatures) - }, - - getCircle(stationInfo) { - const { lon, lat } = stationInfo - - // 定义填充颜色 - const fill = new Fill({ - color: 'rgba(255, 0, 0, .4)' // 红色半透明填充 - }) - - // 定义边框样式 - const stroke = new Stroke({ - color: 'rgba(255, 0, 0, .4)', // 红色半透明边框 - width: 1 // 边框宽度 - }) - - // 创建样式 - const style = new Style({ - fill: fill, - stroke: stroke - }) - - const circle = new Circle(fromLonLat([lon, lat]), this.getRadius()) - const feature = new Feature({ - geometry: circle, - style: style - }) - feature.setStyle(style) - return feature - }, - - // 半径计算 - getRadius() { - const metersPerUnit = this.map - .getView() - .getProjection() - .getMetersPerUnit() - const circleRadius = (this.radius * 1000) / metersPerUnit - return circleRadius + emitDrawCircle(markerType) { + this.$emit('drawCircle', { markerType, radius: this.radius }) }, // 打开分析弹窗 diff --git a/src/views/stationOperation/index.vue b/src/views/stationOperation/index.vue index 5a42a88..bdc409b 100644 --- a/src/views/stationOperation/index.vue +++ b/src/views/stationOperation/index.vue @@ -144,8 +144,14 @@ ref="mapRef" token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm" > - - + + @@ -177,6 +183,8 @@ export default { dataList: [], // 左侧All Data 列表 followedDataList: [], // 关注 markerList: [], // 地图上标记点列表 + markerType: 1, // 是否绘制地图上的圆 + circleRadius: 0, searchPlacementVisible: false, // 搜索栏占位是否显示 @@ -355,6 +363,12 @@ export default { this.markerList = markerList }, + // 是否绘制圆圈 + onDrawCircle({ markerType, radius }) { + this.markerType = markerType + this.circleRadius = radius + }, + /** * 根据类型筛选地图上的marker列表 */ @@ -413,7 +427,7 @@ export default { height: 30px; line-height: 30px; text-align: center; - color: #00E9FE; + color: #00e9fe; background-color: #021a1d; } @@ -431,7 +445,7 @@ export default { &-active { .ant-collapse-arrow { - transform: translateY(-50%) rotate(-90deg) + transform: translateY(-50%) rotate(-90deg); } } }