From b723f2eaf1a69638e09737391daa52f7e8a49b02 Mon Sep 17 00:00:00 2001 From: TimSpan Date: Fri, 27 Dec 2024 10:25:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E5=BE=B7=E5=9C=B0=E5=9B=BE2.0=20?= =?UTF-8?q?=E7=82=B9=E8=81=9A=E5=90=88=20=E6=9B=B4=E6=96=B0=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 高德地图2.0 点聚合 更新完成 --- src/views/page/index.vue | 166 +++++++++++++-------------------------- 1 file changed, 54 insertions(+), 112 deletions(-) diff --git a/src/views/page/index.vue b/src/views/page/index.vue index 337e5387..4d9fbf45 100644 --- a/src/views/page/index.vue +++ b/src/views/page/index.vue @@ -631,7 +631,7 @@ const gettree4 = (data: any) => { }) let data = [res.data] data.forEach((tree) => { - console.log('tree______', tree) + // console.log('tree______', tree) tree.children.reverse() // 长沙市排在前 printLeafs(tree, res1.data) }) @@ -723,23 +723,21 @@ const clickKz = (dat2a: any) => { let count: any let points: any[] = [] -// @ts-ignore -let cluster: AMap.MarkerCluster | null = null -let markers: AMap.Marker[] = [] +let cluster: any var _renderClusterMarker = function (context: any) { var factor = Math.pow(context.count / count, 1 / 18) var div = document.createElement('div') var Hue = 180 - factor * 180 - var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)' - var fontColor = 'hsla(' + Hue + ',100%,20%,1)' + var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)' + var fontColor = 'hsla(' + Hue + ',100%,90%,1)' var borderColor = 'hsla(' + Hue + ',100%,40%,1)' - var shadowColor = 'hsla(' + Hue + ',100%,50%,1)' + var shadowColor = 'hsla(' + Hue + ',100%,90%,1)' div.style.backgroundColor = bgColor - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 2) + var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20) div.style.width = div.style.height = size + 'px' div.style.border = 'solid 1px ' + borderColor div.style.borderRadius = size / 2 + 'px' - div.style.boxShadow = '0 0 1px ' + shadowColor + div.style.boxShadow = '0 0 5px ' + shadowColor div.innerHTML = context.count div.style.lineHeight = size + 'px' div.style.color = fontColor @@ -748,6 +746,28 @@ var _renderClusterMarker = function (context: any) { context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)) context.marker.setContent(div) } + +var _renderMarker = function (context: any) { + // console.log('🚀 ~ context:', context) + var offset = new AMap.Pixel(-9, -9) + context.marker.setIcon( + new AMap.Icon({ + image: context.data[0].x.deviceType == '00' ? image3 : context.data[0].x.deviceType == '03' ? image1 : context.data[0].x.deviceType == '04' ? image2 : '', + size: new AMap.Size(40, 46.5), + imageSize: new AMap.Size(30, 30) + }) + ) + context.marker.setOffset(offset) + context.marker.on('click', function () { + // console.log('context.marker.on') + deviceInfoWindow.value = new AMap.InfoWindow({ + isCustom: true, + content: createSubstanceInfowindow2(context.data[0].x, '1'), + offset: new AMap.Pixel(5, -13) + }) + deviceInfoWindow.value.open(state.map, context.data[0].lnglat) + }) +} const createCluster = () => { // cluster = null if (cluster) cluster.setMap(null) // 避免重复创建 @@ -755,23 +775,11 @@ const createCluster = () => { cluster = new AMap.MarkerCluster(state.map, points, { gridSize: 80, maxZoom: 12, - renderClusterMarker: _renderClusterMarker + renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 + renderMarker: _renderMarker // 自定义非聚合点样式 }) } -// 清除 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', { @@ -787,94 +795,21 @@ const treedata = () => { pagesize: res1.data.count }) .then((res: JsonResult) => { - console.log('🚀 ~ .then ~ res:', res) 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) - + // 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) - } - }) - // 在点击聚合点时创建Marker cluster.on('click', function (e: any) { + // console.log('🚀 ~ e:', e) const {clusterData, lnglat} = e let currentZoom = state.map.getZoom() - console.log('🚀 ~ currentZoom:', currentZoom) - - // 若当前缩放层级 <= 12，点击聚合点时放大到更高层级以展开 - if (currentZoom < 12) { - state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大2级，聚焦到点击位置 + // console.log('🚀 ~ currentZoom:_____________________________', currentZoom) + if (clusterData?.length > 0) { + state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大1级，聚焦到点击位置 } - 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 }) }) }) @@ -1032,18 +967,25 @@ const gettotal = () => { let deviceInfoWindow = ref() 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, true) // 这个过渡 不平滑 - // } + // state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑 + // state.map.setZoom(12, {animate: true}) + // state.map.setCenter(targetLangLat, true) + state.map.setFitView( + new AMap.Marker({position: [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]}), + true, + [30, 30, 30, 30] + ) + } } const createSubstanceInfowindow = (obj: any, type: any) => {