cesium5之SelectionIndicator& InfoBox（entity）

本文链接：https://blog.youkuaiyun.com/MYNAMEL/article/details/120430818

本文详细介绍了如何在 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>