javascript - 在铯的当前位置上显示标记

问题描述

我在 cesium 3D 地图中使用以下代码显示当前位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="toolbar"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXXXXXXXXX';
var viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: Cesium.createWorldImagery({
    style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
  }),
  animation: false,
  timeline: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  infoBox: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  homeButton: false,
  infoBox: false,
  geocoder : false,
});

let label;
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3812 })
);

var button = document.createElement('button');
       button.type = 'button';
            button.className = 'cesium-button';
            button.onclick = function() {
                if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(fly);
                }
                else
                {
                console.log("Geolocation is not supported by this browser.");
                }
            };
            button.textContent = 'Show Location';
            document.getElementById('toolbar').appendChild(button);

const camera = viewer.camera;

function fly(position) {
          if(label){
                viewer.entities.remove(label);
            }
            label = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude),
                label: {
                    text: "Lat: "+position.coords.latitude+", "+"Long: "+position.coords.longitude",
                    scale: 0.8,
                    pixelOffset: new Cesium.Cartesian2(0, -30),
                    font: "32px Helvetica",
                    fillColor: Cesium.Color.YELLOW,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 3,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                }
            });

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        position.coords.longitude,
        position.coords.latitude,
        1005.0
      ),
    });



    }

blackMarble.alpha = 0.5;
blackMarble.brightness = 1.2;

  </script>
 </div>
</body>
</html>

现在我想在地图上显示一个自定义市场，地图上显示经纬度，而不是我的代码中显示的简单标签。

沙堡链接：

沙堡链接

任何建议都受到高度赞赏。

我想在自定义地图标记中显示纬度和经度，就像这个截图

我在添加 Sandcastle.declare(addBillboard); 时遇到的另一个问题；在我的 html 页面中，我的那个 Uncaught ReferenceError: Sandcastle is not defined 所以我将如何在我的 html 页面中实现此代码。

标签： javascriptcesium

javascript - 在铯的当前位置上显示标记

问题描述

解决方案

推荐阅读