点聚合
关键引入文件：
- 第一步：引入框架地图关键文件
- https://mhc.ixiera.com/mhc/main_min.js
- https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js
- https://mhc.ixiera.com/mhc/Cesium3DTile.js
- 第二步：引入无人机视频投影文件
- https://mhc.ixiera.com/mhc/mchmap/PointCluster/js/CesiumPointCluster.min.js
1.初始化(极简版)
cluster = new CesiumPointCluster(viewer, {
points: points,
clusterDistance: 65,
});
cluster.init();
2.参数说明：
一、构造函数参数。
| 参数 | 数据类型 | 是否必填 | 说明 |
| viewer | Object | 必填 | Cesium Viewer 实例 |
| options | Object | 必填 | 配置选项对象 |
| 参数 | 数据类型 | 是否必填 | 默认值 | 说明 |
| points | Array | 选填 | [] | 点位数据数组 |
| clusterDistance | number | 选填 | 60 | 聚合距离（像素），两个点小于此距离时会聚合 |
| minClusterSize | number | 选填 | 2 | 最小聚合数量，达到此数量才会显示聚合簇 |
| autoUpdate | boolean | 选填 | true | 是否自动监听相机变化并更新聚合 |
| clusterIconSize | number | 选填 | 48 | 聚合簇图标大小（像素） |
| clusterIconColor | string | 选填 | '#e67e22' | 聚合簇图标外圈颜色 |
| clusterIconInnerColor | string | 选填 | '#f39c12' | 聚合簇图标内圈颜色 |
| defaultIconColor | string | 选填 | '#3a86ff' | 默认图标背景色 |
| defaultIconSize | number | 选填 | 32 | 默认图标大小（像素） |
| defaultLabelFont | string | 选填 | '12px "Microsoft YaHei"' | 默认文字标签字体 |
| defaultLabelColor | string | 选填 | '#333333' | 默认文字标签颜色 |
| defaultLabelBackground | string | 选填 | 'rgba(255,255,255,0.85)' | 默认文字标签背景色 |
| defaultLabelOffsetX | number | 选填 | 0 | 默认文字标签X轴偏移量（像素） |
| defaultLabelOffsetY | number | 选填 | -28 | 默认文字标签Y轴偏移量（像素） |
| showLabel | boolean | 选填 | true | 是否显示文字标签 |
| onPointClick | Function | 选填 | null | 点击点位回调函数 (data, position) => {} |
| onClusterClick | Function | 选填 | null | 点击聚合簇回调函数 (count, position, points) => {} |
三、points 点位数据结构
3.1 单个点位基础字段
| 参数 | 数据类型 | 是否必填 | 默认值 | 说明 |
| id | string/number | 选填 | 自动生成 | 点位唯一标识 |
| lng | number | 必填 | - | 经度坐标 |
| lat | number | 必填 | - | 纬度坐标 |
| height | number | 选填 | 500 | 高程（米） |
| icon | Object | 选填 | null | 图标配置对象 |
| label | Object | 选填 | null | 文字标签配置对象 |
| data | Object | 选填 | {} | 自定义数据，点击时原样返回 |
3.2 icon 图标配置参数
| 参数 | 数据类型 | 是否必填 | 默认值 | 说明 |
| type | string | 选填 | 'default' | 图标类型：'image'、'text'、'color'、'default' |
| url | string | 条件必填 | null | 图片URL，type='image'时必填 |
| text | string | 条件必填 | null | 显示文字，type='text'时必填 |
| color | string | 选填 | '#3a86ff' | 图标背景色 |
| size | number | 选填 | 32 | 图标大小（像素） |
3.3 label 文字标签配置参数
| 参数 | 数据类型 | 是否必填 | 默认值 | 说明 |
| text | string | 必填 | - | 标签显示文字 |
| font | string | 选填 | '12px "Microsoft YaHei"' | 文字字体 |
| color | string | 选填 | '#333333' | 文字颜色 |
| background | string | 选填 | 'rgba(255,255,255,0.85)' | 标签背景色 |
| offsetX | number | 选填 | 0 | X轴偏移量（像素） |
| offsetY | number | 选填 | -28 | Y轴偏移量（像素） |
四、图标类型说明
| type值 | 说明 | 必需字段 | 效果预览 |
| 'image' | 自定义图片图标 | url | 显示指定URL的图片 |
| 'text' | 文字图标 | text | 色圆点 + 中心文字 |
| 'color' | 纯色图标 | 无 | 彩色圆点 |
| 'default' | 默认图标 | 无 | 蓝色圆点 |
五、回调函数说明
5.1 onPointClick(data, position)
| 参数 | 类型 | 说明 |
| data | Object | 点位中的data字段内容 |
| position | Cartesian3 | 点位的三维坐标 |
5.2 onClusterClick(count, position, points)
| 参数 | 类型 | 说明 |
| count | number | 聚合簇包含的点位数量 |
| position | Cartesian3 | 聚合簇中心坐标 |
| points | Array | 聚合簇包含的所有点位数据 |
六、API 方法
| 方法名 | 参数 | 返回值 | 说明 |
| setPoints(points) | Array | CesiumPointCluster | 设置点位数据（替换现有数据） |
| addPoint(point) | Object | CesiumPointCluster | 添加单个点位 |
| addPoints(points) | Array | CesiumPointCluster | 批量添加点位 |
| clear() | 无 | CesiumPointCluster | 清除所有点位 |
| init() | 无 | CesiumPointCluster | 初始化聚合功能 |
| refresh() | 无 | CesiumPointCluster | 手动刷新聚合 |
| getPointCount() | 无 | number | 获取点位总数 |
| getStatistics() | 无 | Object | 获取统计信息 {total, singles, clusters} |
| setClusterDistance(distance) | number | CesiumPointCluster | 设置聚合距离 |
| setShowLabel(show) | boolean | CesiumPointCluster | 设置是否显示标签 |
| destroy() | 无 | void | 销毁实例，清理资源 |
1.设置/更新点位
cluster.setPoints(points);
cluster.addPoint(point);
cluster.addPoints(points);
5.显示/隐藏文字标签
cluster.setShowLabel(true); // 显示文字标签
cluster.setShowLabel(false); // 隐藏文字标签
6.设置聚合距离
cluster.setClusterDistance(80);
7.获取点位数量
const count = cluster.getPointCount();
const stats = cluster.getStatistics();
8.手动刷新聚合
cluster.refresh();
9.destroy销毁
cluster.destroy();
10.完成代码实例
<script src="https://mhc.ixiera.com/mhc/main.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<!-- <script src="https://mhc.ixiera.com/mhc/mchmap/PointCluster/js/CesiumPointCluster.min.js"></script>
<style>
html,body,#cesiumContainer { width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
.btnsBox {position: fixed;top: 10px;left: 10px;width: 70%;height: 30px;}
.btnsBox button {background-color: #fff;border-radius: 2px;color: #333;line-height: 30px;margin-right: 15px;font-size: 12px;padding: 0 15px;cursor: pointer;}
</style>
<body>
<div id="cesiumContainer" style="width:100%;height:100vh;"></div>
<div class="btnsBox">
<button onclick="btnClear()">清除</button>
<button onclick="btnRandom()">更新新数据设置点位</button>
<button onclick="getPointCount()">获取点位数量</button>
<button onclick="destroy()">销毁实例</button>
</div>
<script>
// 一、初始化Cesium
const view3D = MchCesium.init('cesiumContainer', true);
const viewer = MchCesium.viewer;
// 二、设置相机位置（俯视视角）
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.60, 40.34, 50000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0
},
duration: 2
});
// 三、生成随机点位
function generateRandomPoints(count) {
const points = [];
const centerLng = 116.60;
const centerLat = 40.34;
const names = ['学校', '医院', '商场', '公园', '写字楼'];
const colors = ['#3498db', '#2ecc71', '#e74c3c', '#9b59b6', '#f39c12'];
for (let i = 0; i < count; i++) {
const lng = centerLng + (Math.random() - 0.5) * 1.0;
const lat = centerLat + (Math.random() - 0.5) * 0.8;
const style = Math.floor(Math.random() * 4);
const point = {
id: `point_${i}`,
lng: lng,
lat: lat,
data: {
id: i,
name: `${names[i % names.length]}${i}`,
lng: lng,
lat: lat
}
};
if (style === 0) {
point.icon = { type: 'image', url: '/img/bz.png', size: 30 };
point.label = { text: `${names[i % names.length]}`, offsetX: 0, offsetY: -28 };
} else if (style === 1) {
point.icon = {
type: 'text',
text: String.fromCharCode(65 + (i % 26)),
color: colors[i % colors.length],
size: 32
};
} else if (style === 2) {
point.icon = { type: 'image', url: '/img/step_process1.png', size: 30 };
} else {
point.icon = {
type: 'text',
text: String.fromCharCode(65 + (i % 26)),
color: colors[i % colors.length],
size: 32
};
point.label = { text: `${names[i % names.length]}`, offsetX: 0, offsetY: -28 };
}
points.push(point);
}
return points;
}
// 四、创建聚合实例
let cluster = null;
function initCluster() {
const points = generateRandomPoints(500);
cluster = new CesiumPointCluster(viewer, {
points: points,
clusterDistance: 35,
minClusterSize: 2,
showLabel: true,
onPointClick: (data, position) => {
console.log('点击点位:', data);
McrbHttpClient.popup.msg(JSON.stringify(data), { icon: 1 });
},
onClusterClick: (count, position, points) => {
console.log(`聚合簇包含 ${count} 个点`);
McrbHttpClient.popup.msg(`聚合簇包含 ${count} 个点`, { icon: 1 });
}
});
cluster.init();
}
initCluster();
// 五、按钮事件
function btnClear() {
if (cluster) cluster.clear();
McrbHttpClient.popup.msg('已清除所有点位', { icon: 1 });
}
function btnRandom() {
const count = Math.floor(Math.random() * 1000) + 500;
const newPoints = generateRandomPoints(count);
if (cluster) cluster.setPoints(newPoints);
console.log(`生成了 ${count} 个新点位`);
McrbHttpClient.popup.msg(`已更新 ${count} 个点位`, { icon: 1 });
}
function getPointCount() {
if (cluster) {
const count = cluster.getPointCount();
const stats = cluster.getStatistics();
console.log(`点位总数: ${count}, 单点: ${stats.singles}, 聚合簇: ${stats.clusters}`);
McrbHttpClient.popup.msg(`点位总数: ${count}`, { icon: 1 });
}
}
function destroy() {
if (cluster) {
cluster.destroy();
cluster = null;
console.log('实例已销毁');
McrbHttpClient.popup.msg('实例已销毁', { icon: 1 });
}
}
</script>
</body>
11.效果展示
Demo地址：https://mhc.ixiera.com/mhc/mchmap/PointCluster/index.html
返回顶部
热线电话
微信
扫一扫