fix: 修改地图上圆圈的绘制方式，以修复多个世界中出现重复圆圈的问题
This commit is contained in:
parent
33c7a82f84
commit
4f36221391
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
},
|
||||
|
||||
// 打开分析弹窗
|
||||
|
|
|
|||
|
|
@ -144,8 +144,14 @@
|
|||
ref="mapRef"
|
||||
token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
|
||||
>
|
||||
<MapMarker :list="markerList" @markerClick="onMarkerClick" />
|
||||
<MapPane ref="mapPane" :treeData="treeData" @changeMarker="onChangeMarker" @filterMarker="onFilterMarker" />
|
||||
<MapMarker :list="markerList" :marker-type="markerType" :radius="circleRadius" @markerClick="onMarkerClick" />
|
||||
<MapPane
|
||||
ref="mapPane"
|
||||
:treeData="treeData"
|
||||
@changeMarker="onChangeMarker"
|
||||
@filterMarker="onFilterMarker"
|
||||
@drawCircle="onDrawCircle"
|
||||
/>
|
||||
</Map>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user