Блог

Главная - Вопросы по программированию - Как использовать Cesium.Измерить на CesiumJS?

Как использовать Cesium.Измерить на CesiumJS?

#javascript

#javascript

Вопрос:

Я пытаюсь активировать плагин measure на 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:UsersYoniDesktopCesium-1.73AppsSandcastletemplatesbucket.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>

Привет
Я пытаюсь активировать плагин measure на CesiumJS
На локальном хосте.
Локальный хост запущен, и появляется модель, но я не могу отобразить панель измеримости.
Код прилагается
Я хотел бы получить помощь 🙂

Комментарии:

1. Я добавил ссылку на более раннюю версию medium.com/@wugis1219/cesium-measurement-plugin-a9733e532152

Ответ №1:

Самый простой и понятный способ использования Measure объекта в CesiumJS API — это выполнить следующие три шага:

  1. Импортируйте таблицу Measure.css стилей в свой код JavaScript. Для этого вы можете использовать Webpack или любой другой инструмент, который вам наиболее удобен.

  2. Добавьте measureContainer div в свой HTML-код. Это должно выглядеть примерно так: <div id="measureContainer"></div> .

  3. Инициализируйте Measure объект в своем коде JavaScript. Это может быть так просто, как:

 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 Объект является частью Cesium ion SDK, а не CesiumJS. В то время как CesiumJS является бесплатным и открытым исходным кодом, Cesium ion SDK — нет.
  • Не похоже, что вы импортируете Measure.css , как описано выше на шаге 1.
  • Я рекомендую перенести большую часть вашего кода JavaScript в отдельный файл JavaScript.