还未完成 地图点聚合改造
This commit is contained in:
parent
fcfee709b6
commit
1de9dfe3ad
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue