示例代码:
getRecycleSignAssetsRecordListNew(val).then(res => {
if (res.data.code === 1) {
// 清空之前数据
console.log(res);
let arr = res.data.payload.list
arr.forEach((item, index) => {
// 向聚合点数据赋值参数
this.includePoints.push({
latitude: Number(item.automaticLatitude),
longitude: Number(item.automaticLongitude)
})
//map地图要展示的点
this.markers.push({
id: Number(item.id),
longitude: Number(item.automaticLongitude),
latitude: Number(item.automaticLatitude),
iconPath: item.isChecked == 1 ? '../static/20220628-100839.png' :
'../static/20220628-1008391.png',
title: item.assetsNum,
width: 40,
height: 40,
joinCluster: true,
automaticAddress: item.automaticAddress,
assetsStatus: item.assetsStatus,
attributes: item.attributes,
})
})
//定义控制map组件
let mapCommand = uni.createMapContext('map', this)
//缩放视野展示所有经纬度
mapCommand.includePoints({
points: [...this.includePoints],
padding: [150, 150, 150, 150]
})
var newArr = []
this.markers.forEach(item => {
newArr.push(item.id)
})
//初始化聚合点配置
mapCommand.initMarkerCluster({
enableDefaultStyle: false, // 是否采用默认聚合点样式
zoomOnClick: true, //点击已经聚合的聚合点是否分离
gridSize: 40, //可聚合距离
})
// 新的聚合簇产生时触发
mapCommand.on("markerClusterCreate", (e) => {
console.log('clusters', e);
let clusterMarkers = []
const clusters = e.clusters // 新产生的聚合簇
clusters.forEach((cluster, index) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
console.log('markerIds', markerIds);
let clusterObj = {
clusterId, //必须
...center,
width: 0,
height: 0,
iconPath: '',
label: { // 定制聚合簇样式
content: markerIds.length + '',
fontSize: 16,
color: '#fff',
width: 40,
height: 40,
bgColor: '#00000058',
borderRadius: 40,
textAlign: 'center',
anchorX: -10,
anchorY: -35,
}
}
clusterMarkers.push(clusterObj)
})
mapCommand.addMarkers({
markers: clusterMarkers,
clear: false, //是否先清空地图上所有的marker
})
})
uni.hideLoading();
}
})
},
操作步骤:
获取点数据列表 赋值给map地图组件markers中 mapCommand.initMarkerCluster初始化点聚合, 调用mapCommand.on点聚合
预期结果:
地图点位 为377 聚合后 聚合簇数量相加应该也为 377
实际结果:
点位数据为377 , 聚合后变为355
检查 在获取后台数据时 数据数量为377 , 在聚合前也为377 , 聚合后变成355
查询数据: 数据id,经纬度均无重复