cesium 实体聚合

2023-11-05 来源：小侦探旅游网
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 引入Cesium -->
  <script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

  <!-- jquery -->
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <style>
    html,
    body,
    #map3d {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div id="map3d"></div> 

  <script>
    var viewer = new Cesium.Viewer('map3d', {
      infoBox: false,
      selectionIndicator: false,
      navigation: false,
      animation: false,
      timeline: false,
      baseLayerPicker: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      navigationHelpButton: false,
      shouldAnimate: false,
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
      })
    });
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    viewer.selectedEntityChanged.addEventListener(this.selectedEntityChanged);
    viewer.scene.camera.setView({
      // 初始化相机经纬度
      destination: new Cesium.Cartesian3.fromDegrees(113.573651, 39.899329, 300000),
    })
    let enabled = true;///是否聚合

    let pixelRange = 35;//聚合范围（单位px）

    let minimumClusterSize = 3;//最小聚合数值（小于等于该数值，不聚合）

    let myDataSource = new Cesium.CustomDataSource("myDataSource"); //实例化实体级对象（实现，可用于手动管理一组实体）

    // let obj = createEntityObj(data.features[0]);//创建entity实例属性

    // let entity = myDataSource.entities.add(obj);
    createEntityObj(data);

    //添加entity数组

    viewer.dataSources.add(myDataSource).then(function (dataSource)
    {
      // console.log(dataSource)
      dataSource.clustering.enabled = enabled;//是否聚合

      dataSource.clustering.pixelRange = pixelRange;//聚合范围（单位px）

      dataSource.clustering.minimumClusterSize = minimumClusterSize;//最小屏幕聚合对象数值（小于等于该数值，不聚合）

      //监听聚合事件
      dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster)
      {
        cluster.label.show = false;
        // cluster.billboard.show = true;
        // cluster.billboard.id = cluster.label.id;
        // cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

        // cluster.billboard.image = pin50;
      });


    });

    //创建entity实例属性

    function createEntityObj(data)
    {
      // console.log(o)
      var fontSize = 30;
      for (var o of data.features)
      {
        var obj = {

          position: Cesium.Cartesian3.fromDegrees(o.geometry.coordinates[0], o.geometry.coordinates[1]),

          label: { //文字标签

            text: o.properties.Name, //显示内容

            font: '600 ' + fontSize + 'px Helvetica', //'14pt monospace', //字体大小

            scale: 0.5, //倍数,设置0.5字体带下设置2倍,可防止字体模糊

            // fillColor: new Cesium.Color(255, 255, 255, 1), //字体填充颜色.withAlpha(0.9)

            fillColor: Cesium.Color.WHITESMOKE, //fromCssColorString('#fff'),

            outlineWidth: 5,

            outlineColor: Cesium.Color.fromCssColorString('#000'),

            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //为Cesium.LabelStyle.CENTER_LABEL时不可设置outline

            showBackground: false,

            //verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,//水平位置

            // pixelOffset: new Cesium.Cartesian2(1, obj.oY || 20), //偏移量
          }

        }

        myDataSource.entities.add(obj)

      }

     
    }
  </script>
</body>

</html>
因篇幅问题不能全部显示，请点此查看更多更全内容
查看全文
全部栏目

cesium 实体聚合
