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);
}
}
}