点击聚合点
776
0
2023-08-24
2023-08-24
Hey、小怪兽
- • 当地图已经放大到最大的层级，或者两个Marker点位刚好重合，点位始终会处于聚合点的样子，无法点开这个聚合点，就没办法知道这里面点位的名称或其他信息：
- • 这个时候就需要点击聚合点的方法了，之前是这样写的聚合点，将搜索的点位Marker数组加到聚合点里：
-
pointClusterLayer = new T.MarkerClusterer(map, { markers: pointMarkerArr }); - • 一开始用这个addEventListener里的click，并不起作用：
-
pointClusterLayer.addEventListener("click", () => { console.log("点击聚合点") }); - • 打印一下这个聚合点：
-
console.log("聚合点", pointClusterLayer); - • 在这个qQ里，可以看到已经加进去了，但是不起作用是因为这个类估计是复写了click方法，需要添加的点击事件的名字clusterclick：
- • 修改添加事件的方法：
-
pointClusterLayer.addEventListener("clusterclick", clusterClick); - • 写clusterClick的方法：
-
// 点击聚合点的方法 const clusterClick = (e) => { console.log(e); }; - • 这个点击应该是在放大到最大层级的时候才会触发，先设置最大层级和最小层级：
-
// 缩放级别 let zoom = 12; let maxZoom = 14; let minZoom = 5; // 初始化地图 const initMap = () => { map = new T.Map("mapDiv"); map.setMinZoom(minZoom); map.setMaxZoom(maxZoom); ...其他代码 } - • 修改clusterClick方法：
-
// 点击聚合点的方法 const clusterClick = (e) => { // 获取地图层级 const zoom = map.getZoom(); if (zoom < maxZoom) { return; } console.log(e); }; - • 在最大层级的时候，e.layer.LO里就是这个62个点位的数据：
- • 打印e.layer.LO代码：
-
// 点击聚合点的方法 const clusterClick = (e) => { // 获取地图层级 const zoom = map.getZoom(); if (zoom < maxZoom) { return; } console.log(e); console.log("点击的数据", e.layer.LO); }; - • 到这里已经结束了，下面的内容是我之前以为天地图没有做获取点位的信息，当个乐子看（!important）
• 看到天地图只有查询出来所有点位的信息：
• 需要自己写这个点击获取点位的方法，来到官方的类参考MarkerClustererOptions，可以看到聚合计算是用60像素（这里是个坑）的网格计算的
• 可以通过点击的像素坐标，周围80像素的都是该聚合点的点位，先获取点击的像素坐标：
• 再获取所有的聚合点数组：-
const { markers } = e.target.options; • 看到Markers里面有经纬度坐标了：
• 用类参考里面map的坐标转换的方法：
-
markers.map((item) => { const itemLayerPoint = map.lngLatToLayerPoint(item.or); console.log('itemLayerPoint', itemLayerPoint) }); • 打印出来：
• 最后计算综合像素差， 点击的像素坐标和点位的坐标xy相减的绝对值的平方再相加开根号，就像，坐标轴里求AB的距离：
• 这里比较坑的来了，打印这个网格size，显示的是80，而不是文档写的60：-
console.log("getGridSize()", pointClusterLayer.getGridSize()) • 计算的时候需要小于81：-
markers.map((item) => { const itemLayerPoint = map.lngLatToLayerPoint(item.or); // 计算综合像素差 const pixelDiff = Math.sqrt(Math.pow(Math.abs(clickLayerPoint.x - itemLayerPoint.x), 2) + Math.pow(Math.abs(clickLayerPoint.y - itemLayerPoint.y), 2)); if (pixelDiff < 81) { pointData.push(item); } }); • 这样通过所有点位计算的聚合点位数据有的时候还是不正确的，完整代码：-
// 错误的获取聚合点点位数据的方法 const clusterClick = (e) => { // 获取地图层级 const zoom = map.getZoom(); if (zoom < maxZoom) { return; } console.log(e); // 拿到的聚合点里的点位数据 let pointData = []; // 获取所有的聚合点数组 const { markers } = e.target.options; // 获取标记点 const clickLayerPoint = e.layerPoint; markers.map((item) => { const itemLayerPoint = map.lngLatToLayerPoint(item.or); // 计算综合像素差 const pixelDiff = Math.sqrt(Math.pow(Math.abs(clickLayerPoint.x - itemLayerPoint.x), 2) + Math.pow(Math.abs(clickLayerPoint.y - itemLayerPoint.y), 2)); if (pixelDiff < 81) { pointData.push(item); } }); console.log("pointData", pointData); };