查域名的网站,新乡宣传片制作公司,接做网站需要问什么,如何上传文件到网站要实现完美的正六边形蜂巢排列#xff0c;关键在于精确计算每个六边形的顶点位置和排列方式。以下是Cesium1.106中优化后的完整实现方案#xff1a;
正六边形几何原理
正六边形的特性#xff1a;
所有边长相等#xff08;设为radius#xff09;中心到每个顶点的距离相等…要实现完美的正六边形蜂巢排列关键在于精确计算每个六边形的顶点位置和排列方式。以下是Cesium1.106中优化后的完整实现方案
正六边形几何原理
正六边形的特性
所有边长相等设为radius中心到每个顶点的距离相等外接圆半径相邻六边形中心间距为 √3 * radius行间距为 1.5 * radius
templatediv idcesiumContainer/div
/templatescript 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
})
/scriptstyle 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
)
