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

已于 2023-07-24 09:40:20 修改
阅读量5.9k 收藏 21
点赞数 2
分类专栏： Vue2 Cesium 文章标签： 前端 javascript 开发语言
于 2022-11-26 13:57:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/128008885
版权
Vue2 同时被 2 个专栏收录
196 篇文章 58 订阅
订阅专栏
Cesium
29 篇文章 65 订阅
订阅专栏

目录

添加带标签的点

 添加billboard

添加corridor

 添加面polygon

 添加带图片的面polygon

 添加矩形

添加glb模型

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

添加贴地线

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

添加带标签的点

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
      point: {
        color: Cesium.Color.SKYBLUE,
        pixelSize: 10,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      label: {
        text: "紧贴地面",
        font: "14pt sans-serif",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BASELINE,
        fillColor: Cesium.Color.BLACK,
        showBackground: true,
        backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
      },
    });

    viewer.trackedEntity = e;
  },
};
</script>

 添加billboard

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

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
      billboard: {
        image: "facility.gif",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    });

    viewer.trackedEntity = e;
  },
};
</script>

添加corridor

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      corridor: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          -122.19, 46.1914, -122.21, 46.21, -122.23, 46.21,
        ]),
        width: 2000.0,
        material: Cesium.Color.GREEN.withAlpha(0.5),
      },
    });

    viewer.zoomTo(e);
  },
};
</script>

 添加面polygon

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      polygon: {
        hierarchy: {
          positions: [
            new Cesium.Cartesian3(
              -2358138.847340281,
              -3744072.459541374,
              4581158.5714175375
            ),
            new Cesium.Cartesian3(
              -2357231.4925370603,
              -3745103.7886602185,
              4580702.9757762635
            ),
            new Cesium.Cartesian3(
              -2355912.902205431,
              -3744249.029778454,
              4582402.154378103
            ),
            new Cesium.Cartesian3(
              -2357208.0209552636,
              -3743553.4420488174,
              4581961.863286629
            ),
          ],
        },
        material: Cesium.Color.BLUE.withAlpha(0.5),
      },
    });

    viewer.zoomTo(e);
  },
};
</script>

 添加带图片的面polygon

 

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      polygon: {
        hierarchy: {
          positions: [
            new Cesium.Cartesian3(
              -2358138.847340281,
              -3744072.459541374,
              4581158.5714175375
            ),
            new Cesium.Cartesian3(
              -2357231.4925370603,
              -3745103.7886602185,
              4580702.9757762635
            ),
            new Cesium.Cartesian3(
              -2355912.902205431,
              -3744249.029778454,
              4582402.154378103
            ),
            new Cesium.Cartesian3(
              -2357208.0209552636,
              -3743553.4420488174,
              4581961.863286629
            ),
          ],
        },
        material: "Cesium_Logo_Color.jpg",
        classificationType: Cesium.ClassificationType.TERRAIN,
        stRotation: Cesium.Math.toRadians(45),
      },
    });

    viewer.zoomTo(e);
  },
};
</script>

 添加矩形

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(-122.3, 46.0, -122.0, 46.3),
        material: Cesium.Color.RED.withAlpha(0.5),
      },
    });

    viewer.zoomTo(e);
  },
};
</script>

添加glb模型

 

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
      model: {
        uri: "Cesium_Air.glb",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        minimumPixelSize: 128,
        maximumScale: 100,
      },
    });

    viewer.trackedEntity = e;
  },
};
</script>

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

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const length = 1000;

    const startLon = Cesium.Math.toRadians(86.953793);
    const endLon = Cesium.Math.toRadians(86.896497);

    const lat = Cesium.Math.toRadians(27.988257);

    const terrainSamplePositions = [];
    for (let i = 0; i < length; ++i) {
      const lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
      const position = new Cesium.Cartographic(lon, lat);
      terrainSamplePositions.push(position);
    }

    Promise.resolve(
      Cesium.sampleTerrainMostDetailed(
        viewer.terrainProvider,
        terrainSamplePositions
      )
    ).then(function (samples) {
      let offset = 10.0;
      for (let i = 0; i < samples.length; ++i) {
        samples[i].height += offset;
      }

      viewer.entities.add({
        polyline: {
          positions:
            Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples),
          arcType: Cesium.ArcType.NONE,
          width: 5,
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.ORANGE,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
          }),
          depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.RED,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
          }),
        },
      });

      const target = new Cesium.Cartesian3(
        300770.50872389384,
        5634912.131394585,
        2978152.2865545116
      );
      offset = new Cesium.Cartesian3(
        6344.974098678562,
        -793.3419798081741,
        2499.9508860763162
      );
      viewer.camera.lookAt(target, offset);
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    });
  },
};
</script>

添加贴地线

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;
    viewer.entities.add({
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          86.953793, 27.928257, 86.953793, 27.988257, 86.896497, 27.988257,
        ]),
        clampToGround: true,
        width: 5,
        material: new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.ORANGE,
          outlineWidth: 2,
          outlineColor: Cesium.Color.BLACK,
        }),
      },
    });

    const target = new Cesium.Cartesian3(
      300770.50872389384,
      5634912.131394585,
      2978152.2865545116
    );
    const offset = new Cesium.Cartesian3(
      6344.974098678562,
      -793.3419798081741,
      2499.9508860763162
    );
    viewer.camera.lookAt(target, offset);
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  },
};
</script>

疆~
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium 实战 07 - 点对象（point）、广告牌（billboard）、文字标签（label）贴地问题以及总结
linzi19900517的博客
08-17 2417
Cesium 实战 - 点对象（point）、广告牌（billboard）、文字标签（label）贴地问题以及总结。
CesiumForUnreal实现贴地面（SurfacePolygon）效果
专注GIS开发
04-02 3908
CesiumForUnreal实现贴地面效果
cesium贴地贴模型绘制示例，html,三维开发实例 前端开发
05-21
cesium贴地贴模型绘制示例，html,三维开发实例 前端开发
【Cesium解读】Cesium中primitive/entity贴地
最新发布
警警的博客
05-14 2144
Cesium中primitive/entity贴地
cesium两种方式添加发光贴地线
weixin_39752673的博客
04-21 1672
二：图元primitives。一：实体entity。
cesium贴地问题
新前端小白的博客
12-09 4198
cesium提供了常用实体对象的贴地处理，设置完贴地属性，就会让对象显示在地形上，不会飘在空中，转动视野时随着视野移动。
Cesium 贴地属性设置
qq_17627195的博客
03-22 2423
Cesium 贴地属性设置。
cesium 实体创建、添加、删除、获取
热门推荐
HopperZheng的博客
06-27 2万+
//创建viewer var viewer = new Cesium.Viewer('cesiumContainer'); //添加实体 var redBox = viewer.entities.add({ id:'Box', position : Cesium.Cartesian3.fromDegrees(108, 34,0), box...
cesium常见操作：添加entity
happy81997的博客
02-08 2812
2、复杂的描述信息，带HTML设置样式的。在实体上添加一个label属性即可。
84.（cesium篇）cesium模型在地形上运动.zip
06-22
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“84.（cesium篇）cesium模型在地形上运动”。如下载有问题，可联系博主。 解压密码：cesium
Cesium贴地线实现
09-03
Cesium-1.35 下测试通过，通过逐点计算高程完成贴地，效率比较低，也算一种实现方式。
通过Tomcat发布CesiumLab 地形数据
06-09
通过以上步骤，你便能成功地在Tomcat上发布CesiumLab的地形数据，使得用户可以通过Web浏览器访问和交互这些数据。这为开发地理空间应用提供了极大的便利，同时也让复杂的数据可视化变得更加简单易用。在实际操作中，...
Cesium 测量贴地 点、线、面、园
04-10
在本项目中，我们主要探讨的是使用Cesium进行地理空间数据的测量，包括点、线、面和圆的测量功能。Cesium是一个强大的开源JavaScript库，用于创建交互式的3D地球浏览器，它广泛应用于Web GIS领域。Vue.js是前端开发...
cesium地形开挖，html,三维开发实例 前端开发
05-21
在本文中，我们将深入探讨如何使用Cesium进行地形开挖的前端开发，主要涉及HTML、CSS和JavaScript等技术。Cesium是一个强大的开源JavaScript库，专为构建交互式的3D地球应用而设计，它允许开发者在Web浏览器中创建...
87.（cesium篇）cesium热力图（贴地形）.rar
06-27
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“87.（cesium篇）cesium热力图（贴地形）”。如下载有问题，可联系博主。 解压密码：cesium
vue3.x +Cesium Cesium 如何加载空间数据，如何管理空间数据，加载实体，entities添加几何体，管理集合体等（四）
csl125的博客
05-10 4072
vue3.x在cesium中加载空间数据，管理空间数据，entities添加实体等
Cesium实现贴地线
Baker的博客
09-03 526
顾名思义就是贴着地画一条线，用到的组件是polyline，这里和Threejs的用法不大相同，cesium通常都用类似json的方式设置组件属性，类似百度echarts里设置图表的用法。下这里给线设置点，点是有经纬度组成，组件会根据点的顺序连接成一条线。并且可以设置线的宽度，颜色等。下面是源码： <!DOCTYPE ...
4.Cesium中实体Entity的增删改查及性能优化（超详细）
极限突破者的博客
07-18 1万+
Cesium 作为一个功能强大的 WebGL 三维地球仪库,内置了丰富的三维地图展示能力。在 Cesium 中,我们可以通过 Entity(实体)在三维场景中添加和控制各种三维对象,如点、线、面、模型等。本文将介绍 Cesium 中实体的增删改查操作。
cesium 鼠标拖拽有高度的entity如何不贴地
06-09
如果您想要在Cesium上实现带有高度的Entity的鼠标拖拽，但是不希望它们贴着地面移动，可以通过设置Entity的clampToGround属性为false来实现。 示例代码如下： ``` viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), model: { uri: 'path/to/model.gltf' }, clampToGround: false }); ``` 以上代码中，我们通过设置clampToGround为false来禁止Entity贴着地面移动。这样，当您拖拽Entity时，它们将在空中移动，而不会受到地形的影响。 希望这可以帮助到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值