• cesium在地形上贴地添加各种entity

    目录

    添加带标签的点

     添加billboard

    添加corridor

     添加面polygon

     添加带图片的面polygon

     添加矩形

    添加glb模型

     被遮挡的线用其他颜色标注

    添加贴地线

    官方示例：Cesium Sandcastlehttps://sandcastle.cesium.com/?src=Clamp%20to%20Terrain.html&label=Tutorials

    添加带标签的点

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
    21.       point: {
    22.         color: Cesium.Color.SKYBLUE,
    23.         pixelSize: 10,
    24.         outlineColor: Cesium.Color.YELLOW,
    25.         outlineWidth: 3,
    26.         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    27.       },
    28.       label: {
    29.         text: "紧贴地面",
    30.         font: "14pt sans-serif",
    31.         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    32.         horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    33.         verticalOrigin: Cesium.VerticalOrigin.BASELINE,
    34.         fillColor: Cesium.Color.BLACK,
    35.         showBackground: true,
    36.         backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
    37.         backgroundPadding: new Cesium.Cartesian2(8, 4),
    38.         disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
    39.       },
    40.     });
    41.  
    42.     viewer.trackedEntity = e;
    43.   },
    44. };
    45. </script>

     添加billboard

    资源下载地址：https://sandcastle.cesium.com/images/facility.gif 

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
    21.       billboard: {
    22.         image: "facility.gif",
    23.         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    24.       },
    25.     });
    26.  
    27.     viewer.trackedEntity = e;
    28.   },
    29. };
    30. </script>

    添加corridor

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       corridor: {
    21.         positions: Cesium.Cartesian3.fromDegreesArray([
    22.           -122.19, 46.1914, -122.21, 46.21, -122.23, 46.21,
    23.         ]),
    24.         width: 2000.0,
    25.         material: Cesium.Color.GREEN.withAlpha(0.5),
    26.       },
    27.     });
    28.  
    29.     viewer.zoomTo(e);
    30.   },
    31. };
    32. </script>

     添加面polygon

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       polygon: {
    21.         hierarchy: {
    22.           positions: [
    23.             new Cesium.Cartesian3(
    24.               -2358138.847340281,
    25.               -3744072.459541374,
    26.               4581158.5714175375
    27.             ),
    28.             new Cesium.Cartesian3(
    29.               -2357231.4925370603,
    30.               -3745103.7886602185,
    31.               4580702.9757762635
    32.             ),
    33.             new Cesium.Cartesian3(
    34.               -2355912.902205431,
    35.               -3744249.029778454,
    36.               4582402.154378103
    37.             ),
    38.             new Cesium.Cartesian3(
    39.               -2357208.0209552636,
    40.               -3743553.4420488174,
    41.               4581961.863286629
    42.             ),
    43.           ],
    44.         },
    45.         material: Cesium.Color.BLUE.withAlpha(0.5),
    46.       },
    47.     });
    48.  
    49.     viewer.zoomTo(e);
    50.   },
    51. };
    52. </script>

     添加带图片的面polygon

     

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       polygon: {
    21.         hierarchy: {
    22.           positions: [
    23.             new Cesium.Cartesian3(
    24.               -2358138.847340281,
    25.               -3744072.459541374,
    26.               4581158.5714175375
    27.             ),
    28.             new Cesium.Cartesian3(
    29.               -2357231.4925370603,
    30.               -3745103.7886602185,
    31.               4580702.9757762635
    32.             ),
    33.             new Cesium.Cartesian3(
    34.               -2355912.902205431,
    35.               -3744249.029778454,
    36.               4582402.154378103
    37.             ),
    38.             new Cesium.Cartesian3(
    39.               -2357208.0209552636,
    40.               -3743553.4420488174,
    41.               4581961.863286629
    42.             ),
    43.           ],
    44.         },
    45.         material: "Cesium_Logo_Color.jpg",
    46.         classificationType: Cesium.ClassificationType.TERRAIN,
    47.         stRotation: Cesium.Math.toRadians(45),
    48.       },
    49.     });
    50.  
    51.     viewer.zoomTo(e);
    52.   },
    53. };
    54. </script>

     添加矩形

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       rectangle: {
    21.         coordinates: Cesium.Rectangle.fromDegrees(-122.3, 46.0, -122.0, 46.3),
    22.         material: Cesium.Color.RED.withAlpha(0.5),
    23.       },
    24.     });
    25.  
    26.     viewer.zoomTo(e);
    27.   },
    28. };
    29. </script>

    添加glb模型

     

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const e = viewer.entities.add({
    20.       position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
    21.       model: {
    22.         uri: "Cesium_Air.glb",
    23.         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    24.         minimumPixelSize: 128,
    25.         maximumScale: 100,
    26.       },
    27.     });
    28.  
    29.     viewer.trackedEntity = e;
    30.   },
    31. };
    32. </script>

     被遮挡的线用其他颜色标注

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.  
    19.     const length = 1000;
    20.  
    21.     const startLon = Cesium.Math.toRadians(86.953793);
    22.     const endLon = Cesium.Math.toRadians(86.896497);
    23.  
    24.     const lat = Cesium.Math.toRadians(27.988257);
    25.  
    26.     const terrainSamplePositions = [];
    27.     for (let i = 0; i < length; ++i) {
    28.       const lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
    29.       const position = new Cesium.Cartographic(lon, lat);
    30.       terrainSamplePositions.push(position);
    31.     }
    32.  
    33.     Promise.resolve(
    34.       Cesium.sampleTerrainMostDetailed(
    35.         viewer.terrainProvider,
    36.         terrainSamplePositions
    37.       )
    38.     ).then(function (samples) {
    39.       let offset = 10.0;
    40.       for (let i = 0; i < samples.length; ++i) {
    41.         samples[i].height += offset;
    42.       }
    43.  
    44.       viewer.entities.add({
    45.         polyline: {
    46.           positions:
    47.             Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples),
    48.           arcType: Cesium.ArcType.NONE,
    49.           width: 5,
    50.           material: new Cesium.PolylineOutlineMaterialProperty({
    51.             color: Cesium.Color.ORANGE,
    52.             outlineWidth: 2,
    53.             outlineColor: Cesium.Color.BLACK,
    54.           }),
    55.           depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
    56.             color: Cesium.Color.RED,
    57.             outlineWidth: 2,
    58.             outlineColor: Cesium.Color.BLACK,
    59.           }),
    60.         },
    61.       });
    62.  
    63.       const target = new Cesium.Cartesian3(
    64.         300770.50872389384,
    65.         5634912.131394585,
    66.         2978152.2865545116
    67.       );
    68.       offset = new Cesium.Cartesian3(
    69.         6344.974098678562,
    70.         -793.3419798081741,
    71.         2499.9508860763162
    72.       );
    73.       viewer.camera.lookAt(target, offset);
    74.       viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    75.     });
    76.   },
    77. };
    78. </script>

    添加贴地线

    1. <template>
    2.   <div style="height: 100vh">
    3.     <div id="cesiumContainer" />
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: "test",
    10.   data() {
    11.     return {};
    12.   },
    13.   mounted() {
    14.     const viewer = new Cesium.Viewer("cesiumContainer", {
    15.       terrainProvider: Cesium.createWorldTerrain(),
    16.     });
    17.     viewer.scene.globe.depthTestAgainstTerrain = true;
    18.     viewer.entities.add({
    19.       polyline: {
    20.         positions: Cesium.Cartesian3.fromDegreesArray([
    21.           86.953793, 27.928257, 86.953793, 27.988257, 86.896497, 27.988257,
    22.         ]),
    23.         clampToGround: true,
    24.         width: 5,
    25.         material: new Cesium.PolylineOutlineMaterialProperty({
    26.           color: Cesium.Color.ORANGE,
    27.           outlineWidth: 2,
    28.           outlineColor: Cesium.Color.BLACK,
    29.         }),
    30.       },
    31.     });
    32.  
    33.     const target = new Cesium.Cartesian3(
    34.       300770.50872389384,
    35.       5634912.131394585,
    36.       2978152.2865545116
    37.     );
    38.     const offset = new Cesium.Cartesian3(
    39.       6344.974098678562,
    40.       -793.3419798081741,
    41.       2499.9508860763162
    42.     );
    43.     viewer.camera.lookAt(target, offset);
    44.     viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    45.   },
    46. };
    47. </script>

  • 相关阅读:
    offline 2 online | AWAC：基于 AWR 的 policy update + online 补充数据集
    用LightningChart .NET 数据可视化控件制作多线程应用程序
    前端面试题10.25
    SQL对数据进行去重
    报错解决：RuntimeError: expected scalar type Long but found Float
    5.1 return语句
    外包的水有多深？腾讯15k的外包测试岗能去吗？
    Stack Overflow 2022 开发者调查：行业走向何方？
    think-cell 数据表无法打开怎么办
    java基本数据类型
  • 原文地址：https://blog.csdn.net/qq_40323256/article/details/128008885