// data :geojson数据
dbcBuliding(data = this.option.geojsonData) {
    let _this = this
    // let viewer = _this.viewer;
    let promise = Cesium.GeoJsonDataSource.load(data, {
      clampToGround: true,
    });
    promise.then(dataSource => {
      dataSource.name = "bdc"
      //dataSources添加成功,监听
      // _this.viewer.dataSources.dataSourceAdded.addEventListener(function (a, b) {
      //   console.log("addEventListener", a, b)
      // })
      viewer.dataSources.add(dataSource);
      _this.dataSource_dbc = dataSource
      _this.addEntites_Geojson(dataSource) // 创建实体,label标签
      _this.customStyle(dataSource) //标签聚合
    }).otherwise(function (error) {
      console.log(error);
    });
  }

customStyle(dataSource) {
    let enabled = true;///是否聚合
    let pixelRange = 30;//聚合范围(单位px)
    let minimumClusterSize = 3;//最小聚合数值(小于等于该数值,不聚合)
    dataSource.clustering.enabled = enabled;//是否聚合
    dataSource.clustering.pixelRange = pixelRange;//聚合范围(单位px)
    dataSource.clustering.minimumClusterSize = minimumClusterSize;//最小屏幕聚合对象数值(小于等于该数值,不聚合)

    let removeListener;
    const pin50 = drawCircle("50+", 3)
    const pin40 = drawCircle("40+", 2)
    const pin30 = drawCircle("30+", 0)
    const pin20 = drawCircle("20+", 0)
    const pin10 = drawCircle("10+", 0)

    const singleDigitPins = new Array(8);
    for (let i = 0; i < singleDigitPins.length; ++i) {
      singleDigitPins[i] = drawCircle("" + (i + 2), 0, 16)
    }
    let clustermStyle = () => {
      if (Cesium.defined(removeListener)) {
        removeListener();
        removeListener = undefined;
      } else {
        removeListener = dataSource.clustering.clusterEvent.addEventListener(
          function (clusteredEntities, cluster) {
            cluster.label.show = false;
            cluster.billboard.show = true;
            cluster.billboard.id = cluster.label.id;

            cluster.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 10000.0),
              cluster.billboard.verticalOrigin =
              Cesium.VerticalOrigin.BOTTOM;
            if (clusteredEntities.length >= 50) {
              cluster.billboard.image = pin50;
            } else if (clusteredEntities.length >= 40) {
              cluster.billboard.image = pin40;
            } else if (clusteredEntities.length >= 30) {
              cluster.billboard.image = pin30;
            } else if (clusteredEntities.length >= 20) {
              cluster.billboard.image = pin20;
            } else if (clusteredEntities.length >= 10) {
              cluster.billboard.image = pin10;
            }
            else {
              cluster.billboard.image =
                singleDigitPins[clusteredEntities.length - 2];
            }
          }
        );
      }

      // force a re-cluster with the new styling
      const pixelRange = dataSource.clustering.pixelRange;
      dataSource.clustering.pixelRange = 0;
      dataSource.clustering.pixelRange = pixelRange;
    }
    clustermStyle()
  }
// text 文本,key判断颜色,centerx让文本居中1位数6/2位数16
/ drawCircle(text, key, centerx = 6) {
  const canvas_option = [
    "rgba(0,191,255,0.8)", // 深蓝色
    "rgba(0,128,0,0.8)", //纯绿
    "rgba(255,165,0,0.8)", // 橙色	
    "rgba(220,20,60,0.8)", // 红色
  ]
  var canvas = document.createElement('canvas')
  canvas.width = 42
  canvas.height = 42
  let context2D = canvas.getContext('2d')
  context2D.save();
  context2D.beginPath();
  context2D.arc(21, 21, 20, 0, 2 * Math.PI);
  context2D.fillStyle = canvas_option[key]//设置图形的填充颜色
  context2D.fill()
  context2D.closePath();
  context2D.restore();
  context2D.stroke();
  context2D.save(); //save和restore可以保证样式属性只运用于该段canvas元素
  // context2D.strokeStyle = canvas_option[key]; //设置描边样式
  context2D.font = "20px Arial"; //设置字体大小和字体
  context2D.fillText(text, centerx, 28); //填充线
  context2D.stroke(); //执行绘制
  context2D.restore();
  context2D.closePath()
  context2D.restore()
  let a = canvas.toDataURL()
  return a
}

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐