问如何在CesiumJs上使用Cesium.Measure？
EN

Stack Overflow用户

提问于 2020-09-30 08:10:53

回答 1查看 1.4K关注 0票数 0

我正在尝试激活本地主机上的CesiumJs上的测量插件。本地主机正在运行，模型正在出现，但我无法获得一个可测量条来显示。代码是附加的，我很想得到帮助:)

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>New York City</title>
    <!-- The Cesium library. -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.72/Build/Cesium/Cesium.js"></script>
    <script src="./CesiumMeasurer.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.72/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href= "C:\Users\Yoni\Desktop\Cesium-1.73\Apps\Sandcastle\templates\bucket.css" rel="stylesheet">
    <!-- Style our app. -->
    
    

    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
     </style>
</head>
<body>
    <div id="cesiumContainer"></div> 
           
    <script >
         Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNDIwOGFhZC05NGM1LTRmOGItOTVjMS1kZmZlNDFiNjc1MzciLCJpZCI6MzEwMzgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTQ3NDAzMjZ9.2VC0njaqUn3Oy4BNOKW06q3qBEWYZlmicucRG5iVgAQ";

         var viewer = new Cesium.Viewer("cesiumContainer");
         

         var imageryLayer = viewer.imageryLayers.addImageryProvider(
         new Cesium.IonImageryProvider({ assetId: 148315 }));

         

         var scene = viewer.scene;
         

        viewer.zoomTo(imageryLayer);



        var measureWidget = new Cesium.Measure({
        container : 'cesiumContainer',
        scene : scene,
        units : new Cesium.MeasureUnits({
        distanceUnits : Cesium.DistanceUnits.METERS,
        areaUnits : Cesium.AreaUnits.SQUARE_METERS,
        volumeUnits : Cesium.VolumeUnits.CUBIC_FEET,
        angleUnits : Cesium.AngleUnits.DEGREES,
        slopeUnits : Cesium.AngleUnits.GRADE})
        });
    </script>
</body>
</html>

嗨，我正在尝试激活本地主机上CesiumJs上的测量插件。本地主机正在运行，模型正在出现，但我无法获得一个可测量条来显示。代码是附加的，我很想得到帮助:)

javascript

回答 1

Stack Overflow用户

发布于 2021-11-10 15:09:50

在Measure API中使用CesiumJS对象的最简单和最干净的方法是执行以下三个步骤：

将Measure.css样式表导入到JavaScript代码中。你可以用Webpack来做这件事，或者任何你觉得最舒服的工具。

将measureContainer div添加到您的measureContainer代码中。这个应该是这样的：<div id="measureContainer"></div>.

在Measure代码中初始化Measure对象。这可以简单到：

var measureWidget = new Cesium.Measure({
     container : 'measureContainer',
     scene : scene,
     units : new Cesium.MeasureUnits({
         distanceUnits : Cesium.DistanceUnits.METERS,
         areaUnits : Cesium.AreaUnits.SQUARE_METERS,
         volumeUnits : Cesium.VolumeUnits.CUBIC_FEET,
         angleUnits : Cesium.AngleUnits.DEGREES,
         slopeUnits : Cesium.AngleUnits.GRADE
     })
});

关于您提供的代码的几个注意事项：

Measure对象是铯离子SDK的一部分，而不是CesiumJS。虽然CesiumJS是免费的、开源的，但铯离子SDK不是。
看起来不像上面第1步所述的导入Measure.css。
我建议将大部分JavaScript代码移动到一个单独的JavaScript文件.

中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64133455

复制

相似问题

问如何在CesiumJs上使用Cesium.Measure？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CesiumJs上使用Cesium.Measure？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CesiumJs上使用Cesium.Measure？
EN