cesium5之SelectionIndicator& InfoBox(entity)

本文详细介绍了如何在 Cesium 中创建并显示实体对象,以及如何改变其描述。通过示例代码展示 `viewer.entities.add` 和 `viewer.zoomTo` 的用法,并提供了参考资料链接和关键文件的获取方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要参考资料:
https://www.cnblogs.com/fuckgiser/p/5702544.html

以下为示例一

创建一个实体对象,在地图中显示,然后改变他的描述

在这里插入图片描述

源码如下,其他的不多说,我代码注释是很完整的。(ps:你这要是看不懂,也别问我了,至于原理方面的知识我也没吃透,去看我的参考地址,在最上方。)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <!-- 该文件很重要是所有的核心 -->
    <script src="../../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../../Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        // Viewer是所有的入口
        var viewer = new Cesium.Viewer("cesiumContainer");
        
        //创建元素节点,HTML的 DOM 知识
        var canvas = document.createElement('canvas');
        canvas.width = 400;
        canvas.height = 400;

        //使用CallbackProperty(回调函数)的方式来实现
        function createDescriptionCallback() {
            var description;
            return function (time, result) {
                var image = canvas.toDataURL("image/png");
                description = "楼主好帅啊,我们爱死你了";
                return description;
            };
        }
        //创建实体模型
        var redBox = viewer.entities.add({//创建实体
            name: 'Red box with black outline',//名字
            position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 20.0),//经度,纬度,中心点离地面距离
            description:'111111111111111',
            box: {//实体的类型(box为长方体)
                dimensions: new Cesium.Cartesian3(20.0, 20.0, 40.0),//长宽高
                material: Cesium.Color.RED.withAlpha(0.1),//透明度
                outline: true,//边界线显示
                outlineColor: Cesium.Color.BLUE//边界线颜色
            }
        });
        viewer.zoomTo(viewer.entities);//定位到创建的物体
        
		//调用描述方法,改变redBox的描述。
        redBox.description = new Cesium.CallbackProperty(createDescriptionCallback(), true);
    </script>
</body>
</html>

想了半天试了一下,直接修改redBox.description也行,就是说创建一个实体模型,然后直接如下也行(建议看一下参考网址,回调函数修改值一定有一些应用价值)

<body>
    <div id="cesiumContainer"></div>
    <script>
        // Viewer是所有的入口
        var viewer = new Cesium.Viewer("cesiumContainer");
        
        //创建实体模型
        var redBox = viewer.entities.add({//创建实体
            name: 'This is its name,hahaha',//名字
            position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 20.0),//经度,纬度,中心点离地面距离
            description:'111111111111111',
            box: {//实体的类型(box为长方体)
                dimensions: new Cesium.Cartesian3(20.0, 20.0, 40.0),//长宽高
                material: Cesium.Color.RED.withAlpha(0.1),//透明度
                outline: true,//边界线显示
                outlineColor: Cesium.Color.BLUE//边界线颜色
            }
        });
        viewer.zoomTo(viewer.entities);//定位到创建的物体
		//修改description
        redBox.description = "123123123123";
    </script>
</body>

viewer.entities的api:
在这里插入图片描述
viewer.entities.add的api:
在这里插入图片描述
viewer.zoomTo的api
在这里插入图片描述

以下为示例二(此为参考资料的网址示例还原的模样)

在这里插入图片描述

注意三个文件的位置是否摆放正确:js、css、ne_10m_us_states.topojson

ne_10m_us_states.topojson 文件百度网盘地址:
链接:https://pan.baidu.com/s/1aMlYV0NZFOiEOVG7r0s1rA
提取码:zbst

<!--
    Custom InfoBox
-->
<!DOCTYPE html>

<head>
  <title>Info Box</title>
  <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <!-- <script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script> -->
  <script src="../../Build/Cesium/Cesium.js"></script>
  <style>
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    //创建viewer对象
    var viewer = new Cesium.Viewer('cesiumContainer');

    viewer.infoBox.frame.setAttribute('sandbox', 'allow-same-origin allow-popups allow-forms allow-scripts');

    //移除双击效果
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    //创建元素节点,HTML的 DOM 知识
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;

    //使用CallbackProperty(回调函数)的方式来实现
    function createDescriptionCallback() {
      var description;
      return function (time, result) {
        var image = canvas.toDataURL("image/png");
        description = "ExamplesforCesium";
        return description;
      };
    }

    function MyObject() {

    }

    MyObject.prototype.myListener = function (dataCollection, dataValue) {
      var entities;
      var values = [];
      var names = [];

      entities = dataValue.entities.values;
      var i = 0;
      for (i = 0; i < entities.length; i++) {
        var name = entities[i].properties.name;
        var nValue = entities[i].properties.Population;
        values.push(nValue);
        names.push(name);
        //主要涉及到CallbackProperty和ConstantProperty两种类型
        entities[i].description = new Cesium.CallbackProperty(createDescriptionCallback(), true);
      }
    }

    var myObjectInstance = new MyObject();
    var evt = viewer.dataSources.dataSourceAdded;
    evt.addEventListener(MyObject.prototype.myListener, myObjectInstance);

    viewer.dataSources.add(Cesium.GeoJsonDataSource.load('ne_10m_us_states.topojson', {
      stroke: Cesium.Color.HOTPINK,
      fill: Cesium.Color.PINK.withAlpha(0.5),
      strokeWidth: 3
    }));

  </script>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值