Cesium快速入门到精通系列教程十：实现任意多个蜂巢似六边形组合
要实现完美的正六边形蜂巢排列，关键在于精确计算每个六边形的顶点位置和排列方式。以下是Cesium1.106中优化后的完整实现方案：
正六边形几何原理
正六边形的特性：
- 所有边长相等（设为radius）
- 中心到每个顶点的距离相等（外接圆半径）
- 相邻六边形中心间距为 √3 * radius
- 行间距为 1.5 * radius
<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = '你的defaultAccessToken';
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）onMounted(() => {// 创建完美正六边形蜂巢网格function createPerfectHexagonalGrid(viewer, center, radius, rows, cols) {// 计算六边形几何参数const hexRadius = radius; // 外接圆半径const sideLength = hexRadius; // 正六边形边长等于外接圆半径const horizontalSpacing = Math.sqrt(3) * hexRadius;const verticalSpacing = 1.5 * hexRadius;// 创建所有六边形实例const instances = [];for (let row = 0; row < rows; row++) {// 计算当前行的水平偏移（蜂巢排列）const rowOffset = (row % 2) * (horizontalSpacing / 2);for (let col = 0; col < cols; col++) {// 计算中心点坐标（精确蜂巢排列）const centerX = center.longitude +(col * horizontalSpacing) +rowOffset;const centerY = center.latitude -(row * verticalSpacing);// 生成正六边形顶点（一个顶点朝正上方）const positions = [];for (let i = 0; i < 6; i++) {const angle = i * Math.PI / 3; // 60度间隔，0度朝上const x = centerX + hexRadius * Math.sin(angle);const y = centerY + hexRadius * Math.cos(angle);positions.push(x, y, 0);}// 创建几何实例instances.push(new Cesium.GeometryInstance({geometry: new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions)),height: 0}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromHsl((row / rows + col / cols) % 1.0, // 色相变化0.9, // 饱和度0.7, // 亮度0.8 // 透明度))},id: `hex_${row}_${col}`}));}}// 添加到场景viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: instances,appearance: new Cesium.PerInstanceColorAppearance({flat: true,translucent: false,renderState: {depthTest: {enabled: true},lineWidth: Math.min(2, viewer.scene.maximumAliasedLineWidth)}}),asynchronous: false,allowPicking: true // 允许拾取}));}// 初始化Cesium Viewerconst viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(),imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'})});// 设置初始视角viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 100000),orientation: {heading: 0.0,pitch: -Cesium.Math.PI_OVER_TWO,roll: 0.0}});// 创建完美正六边形蜂巢网格createPerfectHexagonalGrid(viewer,{ longitude: -75.0, latitude: 40.0 }, // 中心点0.005, // 六边形外接圆半径(度)15, // 行数15 // 列数);// 添加交互功能const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (movement) {const pickedObject = viewer.scene.pick(movement.endPosition);if (Cesium.defined(pickedObject) && pickedObject.id) {console.log("点击了正六边形:", pickedObject.id);// 高亮显示被点击的六边形viewer.scene.primitives.forEach(function (primitive) {if (primitive instanceof Cesium.Primitive) {primitive.getGeometryInstanceAttributes(pickedObject.id).color =Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.YELLOW.withAlpha(0.9));}});}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// https://blog.csdn.net/weixin_40580834/article/details/148141703
})
</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}.toolbar {position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background-color: rgba(42, 42, 42, 0.8);color: white;padding: 8px 15px;border-radius: 5px;display: flex;gap: 15px;align-items: center;z-index: 100;
}.toolbar button {background-color: #4CAF50;border: none;color: white;padding: 6px 12px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;
}.toolbar button:hover {background-color: #45a049;
}.toolbar span {font-size: 14px;
}
</style>顶点生成算法：
// 一个顶点朝正上方的正六边形
const angle = i * Math.PI / 3; // 60度间隔
const x = centerX + hexRadius * Math.sin(angle);
const y = centerY + hexRadius * Math.cos(angle);精确的蜂巢排列：
const horizontalSpacing = Math.sqrt(3) * hexRadius;
const verticalSpacing = 1.5 * hexRadius;
const rowOffset = (row % 2) * (horizontalSpacing / 2);颜色分布优化：
Cesium.Color.fromHsl((row / rows + col / cols) % 1.0, // 平滑色相变化0.9, 0.7, 0.8
)