|
|
@ -16,16 +16,17 @@ import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.j |
|
|
* @param {*} map |
|
|
* @param {*} map |
|
|
* @param {Point[]} points |
|
|
* @param {Point[]} points |
|
|
* @param {Marker[]} markers |
|
|
* @param {Marker[]} markers |
|
|
* @param {*} options |
|
|
* @param {Function} markerFun |
|
|
* @returns |
|
|
* @returns |
|
|
*/ |
|
|
*/ |
|
|
export async function setMarkerCluster(map, markers, options) { |
|
|
export async function setMarkerCluster(map, points, markerFun) { |
|
|
const AMap = await loadAMap(); |
|
|
const AMap = await loadAMap(); |
|
|
|
|
|
|
|
|
return new AMap.MarkerClusterer(map, markers, { |
|
|
let hasClick = false; |
|
|
|
|
|
|
|
|
|
|
|
const markerCluster = new AMap.MarkerCluster(map, points, { |
|
|
// gridSize: 15,
|
|
|
// gridSize: 15,
|
|
|
maxZoom: 15, |
|
|
maxZoom: 15, |
|
|
...options, |
|
|
|
|
|
// 自定义聚合点样式
|
|
|
// 自定义聚合点样式
|
|
|
renderClusterMarker(context) { |
|
|
renderClusterMarker(context) { |
|
|
// 聚合中点个数
|
|
|
// 聚合中点个数
|
|
|
@ -33,10 +34,10 @@ export async function setMarkerCluster(map, markers, options) { |
|
|
const div = document.createElement("div"); |
|
|
const div = document.createElement("div"); |
|
|
let bgColor = "204,235,197"; |
|
|
let bgColor = "204,235,197"; |
|
|
|
|
|
|
|
|
div.style.backgroundColor = `rgba(${bgColor}, .5)`; |
|
|
div.style.backgroundColor = `rgba(${bgColor}, .6)`; |
|
|
|
|
|
|
|
|
const size = Math.round( |
|
|
const size = Math.round( |
|
|
25 + Math.pow(clusterCount / markers.length, 1 / 5) * 36 |
|
|
25 + Math.pow(clusterCount / points.length, 1 / 5) * 36 |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
div.style.borderRadius = |
|
|
div.style.borderRadius = |
|
|
@ -49,8 +50,33 @@ export async function setMarkerCluster(map, markers, options) { |
|
|
div.style.color = "#ffffff"; |
|
|
div.style.color = "#ffffff"; |
|
|
div.style.fontSize = "24px"; |
|
|
div.style.fontSize = "24px"; |
|
|
div.style.textAlign = "center"; |
|
|
div.style.textAlign = "center"; |
|
|
|
|
|
|
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
|
context.marker.setContent(div); |
|
|
context.marker.setContent(div); |
|
|
}, |
|
|
}, |
|
|
|
|
|
renderMarker(context) { |
|
|
|
|
|
const { content, extData } = context.data[0]; |
|
|
|
|
|
|
|
|
|
|
|
const offset = new AMap.Pixel(-9, -9); |
|
|
|
|
|
context.marker.setContent(content); |
|
|
|
|
|
context.marker.setOffset(offset); |
|
|
|
|
|
|
|
|
|
|
|
context.marker.setExtData(extData); |
|
|
|
|
|
|
|
|
|
|
|
context.marker.on("click", (e) => { |
|
|
|
|
|
hasClick = true; |
|
|
|
|
|
|
|
|
|
|
|
markerFun(e); |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
markerCluster.on("click", (e) => { |
|
|
|
|
|
if (hasClick) return (hasClick = false); |
|
|
|
|
|
|
|
|
|
|
|
map.setCenter(e.lnglat); |
|
|
|
|
|
map.setZoom(map.getZoom() + 3); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return markerCluster; |
|
|
} |
|
|
} |
|
|
|
