javascript - 如何在 CesiumJS 中将 ClampToGround 设置为平面

问题描述

我的目的是在某个区域的地形高度绘制一个图标。出于某种原因，我不想使用广告牌或标记。我有这段代码，它添加了一个带有图像材料的平面。但是它的clamptoGround和heightReference属性不能正常工作并且Plane不能正常显示（如所附屏幕截图所示）。我想将平面放置到那个地方的地形表面。

var viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false, //Disable InfoBox widget
  selectionIndicator: false, //Disable selection indicator
  shouldAnimate: true, // Enable animations
  terrainProvider: Cesium.createWorldTerrain(),
});

//Enable lighting based on the sun position
viewer.scene.globe.enableLighting = true;

//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

var eData = { position: {x: 4738769.082680055, y: 2182474.0152363363, z: 3658277.3322530985} };
eData.plane = {
              plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
              dimensions: new Cesium.Cartesian3(100,  100),
              material: new Cesium.ImageMaterialProperty({
                  image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANqSURBVFiF7ZdNbBRlGMd/z+zM7C66xSXbkLZilSbYYIjxYIumoo0BXKoghx40GEzbNJJIjJ78OnDRxIMHA9IYNCEaTawXCcVqIjGlIFvQRA41gAhWpVVp0rVr3DozndfLzjrOdmc/DPHS/2nyPh////u8M8/7jHCd8cg0E0BHcF0JnSNNnNGut4BK0GtxnrD67lQqsgthM6g1QBzkCqLO4/Ju3rz5WLfsc/wxR5vpHFQYMzMMA48Gc0o1xONqT1K37QMCj4XFCHyvYNdG8+2Mt9Y7ibmQZBjYAcwBC0BT1UdwOv/UrYZtZwQeryRYQRswnrH6+wAGFcZCkg8L5FmErcBP/phQASdVX0IizgiwrpJQH3SQt8acJ7b5yp5F2HK0ibNB59AdTVj9ryvkuRrIAbCVy7M/jMykbvitydCYc2HzsWa+Xso3Ui5JRg2sFlc+IPCi2srlZ2uem/RYWfIXpj5fzOSmGzQhvypKdzlyCDsCmx0Kov4lR7m8PHWcgUtH+PbPayUhnv3k/I+RmKY7T6fS34WRhwuA+4LJX5o6ztj8FLlFi2eujP5LhN+eiJgcXNujdyRaNoyrPck6BUiL92QrlxeLyaPcnWgpiPiU8/nZEvv+tdtYv6IRQKKW0xwmoGIjsgs7O1FMnqYttqq4tvfyKO0rUpzNXS3a2+OpYvwiyq2rAoKa9s70RKGsb9z2EO3xFIZovNr6IPc3tJJb/KtA/o/dBxUznZm6BMy79qm9lz+ZGyuSp72yAqCLxisFEUvZCzh3lxzOhglYsg/0TmJmG/j4i2ukDXRnqO1hPbCzImzlMm3laI2uLLEpkefvMQ69FiagpAJe745FSG+40fx9qK1HypEDGKItSQ78uqAbb4aRlwgI9u71K6M97fHGkvZZBVwR2d0tB/+oWkDgyswibHl/de6UZjg7gW9qIHdAPdlpHPqsGmetHLl3cXTI4V9cI3GvwBBgV8g3KeJu2mi+8161aiUg4IFytxbAV/nBW2zN7UPo0qCr0KovAhnR1HBHZM2oyL7Q774seicxt1/l9mr9M9bARMYaUF9a/SXzXi0odsKP7sACLvyXZPWgqpHMD2/KPT1r5mYtK9GVIp80iXsjVq356p6KbWXFAQTi9eaAGqdiPzY11h/rx//+X7AsYFnAsoC/AZeqYn7jLEFzAAAAAElFTkSuQmCC",
                  repeat: Cesium.Cartesian2(1.0, 1.0), // Not repeating
                  transparent: true, // enable png transparency
              }),
              outline: false,
              clampToGround: true,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            };


var entity = viewer.entities.add(eData);

viewer.camera.setView({
    destination: eData.position
});

但是，clampToGround和heightReference可以正常使用Box。我们如何在像Box这样的Plane中正确设置clampToGround。

这是上面代码的沙堡链接。

编辑：

这是应用@ZhefengJin 解决方案后的沙堡链接。我想将图标垂直站立在地形表面上，如下图所示。

标签： javascripthtml5-canvascesium

javascript - 如何在 CesiumJS 中将 ClampToGround 设置为平面

问题描述

解决方案

推荐阅读