Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

还未完成 地图点聚合改造

This commit is contained in:
TimSpan 2024-12-26 16:52:02 +08:00
parent fcfee709b6
commit 1de9dfe3ad
2 changed files with 134 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -11,10 +11,10 @@
<body>
<div id="app"></div>
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"></script>
<!-- <script
src="https://webapi.amap.com/maps?v=2.0&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"></script> -->
src="https://webapi.amap.com/maps?v=1.4.15&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerClusterer"></script> -->
<script
src="https://webapi.amap.com/maps?v=2.0&key=ca549d915cb38803582ca7e85c5f972c&plugin=AMap.MarkerCluster"></script>
<!-- &plugin=AMap.MarkerClusterer -->
<script src="/haikang/h5player.min.js"></script>

222
src/views/page/index.vue
View File

@ -406,7 +406,7 @@ var state = {
id: 'indexx',
map: null as any
}
var cluster: any
import {LoadingOutlined} from '@ant-design/icons-vue'
const indicator = h(LoadingOutlined, {
@ -720,8 +720,12 @@ const clickKz = (dat2a: any) => {
})
visible.value = true
}
var count: any
var points: any[] = []
let count: any
let points: any[] = []
// @ts-ignore
let cluster: AMap.MarkerCluster | null = null
let markers: AMap.Marker[] = []
var _renderClusterMarker = function (context: any) {
var factor = Math.pow(context.count / count, 1 / 18)
var div = document.createElement('div')
@ -744,15 +748,30 @@ var _renderClusterMarker = function (context: any) {
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
context.marker.setContent(div)
}
onMounted(() => {
getAiCount()
gettotal()
initMap()
gettree4('')
getAi()
getjingqing()
})
//
const createCluster = () => {
// cluster = null
if (cluster) cluster.setMap(null) // 避免重复创建
// @ts-ignore
cluster = new AMap.MarkerCluster(state.map, points, {
gridSize: 80,
maxZoom: 12,
renderClusterMarker: _renderClusterMarker
})
}
// 清除 Marker 函数（避免重复）
function clearMarkers() {
const overlays = state.map.getAllOverlays('marker')
overlays.forEach((marker: any) => {
if (!marker.isCluster) {
state.map.remove(marker) // 仅移除非聚合 Marker
}
})
}
// 清除所有散点
// const clearMarkers = () => {
// markers.forEach((marker) => state.map.remove(marker))
// markers = []
// }
const treedata = () => {
api
.post('/multialarm/client/alarm_point/count', {
@ -769,53 +788,94 @@ const treedata = () => {
})
.then((res: JsonResult<any>) => {
console.log('🚀 ~ .then ~ res:', res)
res.data.map((x: any) => {
const marker = new AMap.Marker({
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
offset: new AMap.Pixel(-15, -15),
icon: new AMap.Icon({
image: x.deviceType == '00' ? image3 : x.deviceType == '03' ? image1 : x.deviceType == '04' ? image2 : '',
size: new AMap.Size(40, 46.5),
imageSize: new AMap.Size(30, 30) //图标大小
}),
title: ''
})
marker.on('click', function () {
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow2(x, '1'),
offset: new AMap.Pixel(5, -13)
})
deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
})
state.map.add(marker)
points.push(marker)
points = res.data.map((x: any) => {
return {lnglat: [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude], x: x}
})
count = points.length
// console.log('___________________________points', points)
// 聚合点样式
cluster = new AMap.MarkerClusterer(state.map, points, {
gridSize: 80,
maxZoom: 12,
renderClusterMarker: _renderClusterMarker
console.log('points___________________________', points)
createCluster() // 初始化聚合点
state.map.on('zoomend', () => {
let zoom = state.map.getZoom()
console.log('zoom等级____________________________', zoom)
clearMarkers() // 清除现有 Marker 保留点聚合
if (zoom > 12) {
points.forEach((item: any) => {
// console.log('🚀 ~ points.forEach ~ p:', item)
const marker = new AMap.Marker({
position: item.lnglat,
icon: new AMap.Icon({
image: item.x.deviceType == '00' ? image3 : item.x.deviceType == '03' ? image1 : item.x.deviceType == '04' ? image2 : '',
size: new AMap.Size(40, 46.5),
imageSize: new AMap.Size(30, 30)
})
})
marker.on('click', function () {
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true,
content: createSubstanceInfowindow2(item.x, '1'),
offset: new AMap.Pixel(5, -13)
})
deviceInfoWindow.value.open(state.map, item.lnglat)
})
state.map.add(marker)
})
cluster?.setMap(null) // 清除聚合点，避免默认聚合样式覆盖
} else {
createCluster() // 缩小时重新创建点聚合
// cluster.setMap(state.map)
// 缩小时重新添加聚合点
// cluster.setMap(state.map)
}
})
state.map.plugin(['AMap.MarkerClusterer'], () => {
// 在点击聚合点时创建Marker
cluster.on('click', function (e: any) {
const {clusterData, lnglat} = e
let currentZoom = state.map.getZoom()
console.log('🚀 ~ currentZoom:', currentZoom)
// 若当前缩放层级 <= 12，点击聚合点时放大到更高层级以展开
if (currentZoom < 12) {
state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大2级，聚焦到点击位置
}
clearMarkers() // 先清除地图上已有的 Marker，保留点聚合
let markers: any[] = []
console.log('🚀 ~ e:', e)
clusterData.forEach((item: any) => {
console.log('🚀 ~ clusterData.forEach ~ item:', item)
const marker = new AMap.Marker({
position: item.lnglat,
offset: new AMap.Pixel(-15, -15),
icon: new AMap.Icon({
image: item.x.deviceType == '00' ? image3 : item.x.deviceType == '03' ? image1 : item.x.deviceType == '04' ? image2 : '',
size: new AMap.Size(40, 46.5),
imageSize: new AMap.Size(30, 30)
})
})
marker.on('click', function () {
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true,
content: createSubstanceInfowindow2(item.x, '1'),
offset: new AMap.Pixel(5, -13)
})
deviceInfoWindow.value.open(state.map, item.lnglat)
})
markers.push(marker)
state.map.add(marker)
})
// 自动调整视角，保证所有 Marker 可见
state.map.setFitView(markers)
})
state.map.plugin('AMap.MarkerCluster', () => {
let zoom = state.map.getZoom()
console.log('当前地图的缩放级别是：' + zoom)
cluster
})
// var cluster = new AMap.MarkerCluster(state.map, points, {
// gridSize: 80,
// maxZoom: 12,
// renderClusterMarker: _renderClusterMarker
// })
// state.map.plugin('AMap.MarkerCluster', () => {
// let zoom = state.map.getZoom()
// console.log('当前地图的缩放级别是：' + zoom)
// cluster
// })
})
})
}
@ -972,44 +1032,18 @@ const gettotal = () => {
let deviceInfoWindow = ref<any>()
const selectA = (selectedKeys: any, e: any) => {
console.log('selectedKeys', selectedKeys, e)
if (selectedKeys[0].length >= 13) {
let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
// if (selectedKeys[0].length >= 13) {
let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
offset: new AMap.Pixel(5, -13)
})
deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
offset: new AMap.Pixel(5, -13)
})
deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
state.map.setZoomAndCenter(12, targetLangLat)
// cluster = new AMap.MarkerClusterer(state.map, points, {
// gridSize: 80,
// maxZoom: 12,
// renderClusterMarker: _renderClusterMarker
// })
// state.map.plugin(['AMap.MarkerClusterer'], () => {
// let zoom = state.map.getZoom()
// console.log('当前地图的缩放级别是：' + zoom)
// cluster
// })
// state.map.setCenter(targetLangLat)
// state.map.on('moveend', () => {
// console.log(11111)
// })
// state.map.on('zoomend', () => {
// console.log(22222)
// })
// state.map.on('moveend', () => {
// console.log(33333)
// })
// if (cluster) {
// cluster.draw()
// }
// treedata()
}
state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑
// }
}
const createSubstanceInfowindow = (obj: any, type: any) => {
@ -1406,9 +1440,15 @@ const initMap = () => {
getdayline()
// stationWebsocket();
}
// state.map.on('zoomend', () => {
// console.log(11111)
// })
onMounted(() => {
getAiCount()
gettotal()
initMap()
gettree4('')
getAi()
getjingqing()
})
</script>
<style scoped lang="scss">