cesium 设置图标贴地面方法

2024-07-24 18:19:19 阅读：100 来源： 互联网

标签：

在 Cesium 中，设置图标贴合地面可以通过将其位置的高度设置为地面高度来实现。可以使用 Cesium.sampleTerrain 函数，该函数允许您从地形数据中获取特定经纬度位置的高度值。以下是如何实现这一点的步骤和示例代码。

步骤 1: 初始化 Cesium Viewer

首先，创建 Cesium Viewer，并确保已经加载地形数据。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Cesium 图标贴地面示例</title>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100.0/Build/Cesium/Widgets/css/CesiumWidget.css" rel="stylesheet">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100.0/Build/Cesium/Cesium.js"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider : Cesium.createWorldTerrain() // 确保加载全球地形数据
        });
    </script>
</body>
</html>

HTML

步骤 2: 在特定位置加载图标并贴合地面

接下来，在您的代码中添加一个函数来获取地面高度，并在该位置放置图标。

var position = Cesium.Cartesian3.fromDegrees(116.3911, 39.9067); // 示例经纬度

// 使用 sampleTerrain 获取地面高度
var terrainPromise = Cesium.sampleTerrain(viewer.terrainProvider, [position]);

terrainPromise.then(function(updatedPositions) {
    var updatedPosition = updatedPositions[0]; // 获取更新后的高度位置
    var billboardEntity = viewer.entities.add({
        position: updatedPosition,
        billboard: {
            image: 'path/to/your/icon.png', // 替换为你的图标路径
            width: 50,  // 设置图标宽度
            height: 50, // 设置图标高度
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 确保图标底部与地面对齐
        }
    });

    // 调整相机位置以查看图标
    viewer.flyTo(billboardEntity);
});

JavaScript

完整示例代码

以下是完整的 HTML 示例代码，展示了如何在 Cesium 中放置一个贴合地面的图标：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Cesium 图标贴地面示例</title>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100.0/Build/Cesium/Widgets/css/CesiumWidget.css" rel="stylesheet">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100.0/Build/Cesium/Cesium.js"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider : Cesium.createWorldTerrain()
        });

        var position = Cesium.Cartesian3.fromDegrees(116.3911, 39.9067); // 示例经纬度

        // 使用 sampleTerrain 获取地面高度
        var terrainPromise = Cesium.sampleTerrain(viewer.terrainProvider, [position]);

        terrainPromise.then(function(updatedPositions) {
            var updatedPosition = updatedPositions[0]; // 获取更新后的高度位置
            var billboardEntity = viewer.entities.add({
                position: updatedPosition,
                billboard: {
                    image: 'path/to/your/icon.png', // 替换为你的图标路径
                    width: 50,
                    height: 50,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 确保图标底部与地面对齐
                }
            });

            // 调整相机位置以查看图标
            viewer.flyTo(billboardEntity);
        });
    </script>
</body>
</html>

HTML

注意事项

请确保将 'path/to/your/icon.png' 替换为实际的图标路径。
使用 Cesium.createWorldTerrain() 可确保在 Cesium 中使用全球地形数据，以供 sampleTerrain 函数查询。

通过以上代码，您应该能够在 Cesium 中成功放置一个图标，并确保其贴合地面。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cesium 设置图标贴地面方法

步骤 1: 初始化 Cesium Viewer

步骤 2: 在特定位置加载图标并贴合地面

完整示例代码

注意事项