Cesium聚合+点击地图缩放+entity弹窗

Oxygen_liu

已于 2022-11-22 08:45:57 修改

阅读量3.5k

点赞数 5

分类专栏： Cesium Vue3 TS 文章标签：前端

于 2022-11-18 15:13:16 首次发布

本文链接：https://blog.csdn.net/qq_41400354/article/details/127922444

版权

TS 同时被 3 个专栏收录

23 篇文章 2 订阅

订阅专栏

19 篇文章 4 订阅

订阅专栏

Cesium

16 篇文章 21 订阅

订阅专栏

聚合

聚合功能可以提高Cesium性能，减少Entity的渲染数量。
以下代码在官网实例中都有，只是做了些许的改动。

注意聚合功能只对label标签，point点和广告牌billboard生效

效果放在前面

未聚合

在这里插入图片描述

聚合

在这里插入图片描述

添加窗体

在这里插入图片描述

可以看到使用聚合前帧数在40左右，使用后在55左右

const loadCustom = () => {
    //聚合属性只对label标签，point点和广告牌billboard生效
    const dataSource = new Cesium.CustomDataSource("myData");
    for (let i = 0; i < 2000; ++i) {
        dataSource.entities.add({
            position: Cesium.Cartesian3.fromDegrees(103.769644 + Math.random() * 0.1, 31.097718 + Math.random() * 0.1),
            // point: {
            //     color: Cesium.Color.RED,
            // },
            label: {
                text: '车辆编号-' + i,
                pixelOffset: new Cesium.Cartesian2(10, -70), // 偏移方向
                fillColor: Cesium.Color.BLACK.withAlpha(0.65),
                backgroundColor: Cesium.Color.YELLOW,
                showBackground: true,
                font: '12px;'
            },
            billboard: {
                image: 'icons/icon_chezai_m_d.png',
                width: 64,
                height: 64,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // //相对于对象的原点（注意是原点的位置）的水平位置
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(12.5, 0), // 偏移
            }
        });
    }
    const dataSourcePromise = viewer.dataSources.add(dataSource);
    dataSourcePromise.then(function (dataSource) {
        const pixelRange = 15;
        const minimumClusterSize = 3;
        const enabled = true;
        dataSource.clustering.enabled = enabled; //是否聚合
        dataSource.clustering.pixelRange = pixelRange;
        dataSource.clustering.minimumClusterSize = minimumClusterSize;
        const pinBuilder = new Cesium.PinBuilder();
        const pin1000 = pinBuilder
            .fromText("1000+", Cesium.Color.RED, 48)
            .toDataURL();
        const pin500 = pinBuilder
            .fromText("100+", Cesium.Color.RED, 48)
            .toDataURL();
        const pin100 = pinBuilder
            .fromText("100+", Cesium.Color.RED, 48)
            .toDataURL();
        const pin50 = pinBuilder
            .fromText("50+", Cesium.Color.RED, 48)
            .toDataURL();
        const pin40 = pinBuilder
            .fromText("40+", Cesium.Color.ORANGE, 48)
            .toDataURL();
        const pin30 = pinBuilder
            .fromText("30+", Cesium.Color.YELLOW, 48)
            .toDataURL();
        const pin20 = pinBuilder
            .fromText("20+", Cesium.Color.GREEN, 48)
            .toDataURL();
        const pin10 = pinBuilder
            .fromText("10+", Cesium.Color.BLUE, 48)
            .toDataURL();
        const singleDigitPins = new Array(8);
        for (let i = 0; i < singleDigitPins.length; ++i) {
            singleDigitPins[i] = pinBuilder
                .fromText(`${i + 2}`, Cesium.Color.VIOLET, 48)
                .toDataURL();
        }
        function customStyle() {
            if (Cesium.defined(removeListener)) {
                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.verticalOrigin =
                            Cesium.VerticalOrigin.BOTTOM;

                        if (clusteredEntities.length >= 1000) {
                            cluster.billboard.image = pin1000;
                        } else if (clusteredEntities.length >= 500) {
                            cluster.billboard.image = pin500;
                        } else if (clusteredEntities.length >= 100) {
                            cluster.billboard.image = pin100;
                        } else 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];
                        }
                    }
                );
            }
            const pixelRange = dataSource.clustering.pixelRange;
            dataSource.clustering.pixelRange = 0;
            dataSource.clustering.pixelRange = pixelRange;
        }
        customStyle();
        const handler = new Cesium.ScreenSpaceEventHandler(
            viewer.scene.canvas
        );
        handler.setInputAction(function (movement) {
            const pickedLabel = viewer.scene.pick(movement.position);
            if (Cesium.defined(pickedLabel)) {
                const ids = pickedLabel.id;
                if(ids.length > 1) {
                	let PoRay = viewer.camera.getPickRay(ray);
                	const car3 = viewer.scene.globe.pick(PoRay, viewer.scene);
                   let cartographic = Cesium.Cartographic.fromCartesian(car3);
				   let longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
				   let latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    viewer.camera.flyTo({
			            destination: Cesium.Cartesian3.fromDegrees(longitudeString , latitudeString , 			height / 1.8),
			            duration: 1.0
			        });
                }
                console.log(pickedLabel)
                // if (Array.isArray(ids)) {
                //     for (let i = 0; i < ids.length; ++i) {
                //         ids[i].billboard.color = Cesium.Color.RED;
                //     }
                // }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    })
}

entity添加弹窗

拾取

//识别到的entity ids为对象时单个entity ids为数组时为entity数组

handler.setInputAction(function (movement) {
  const pickedLabel = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedLabel)) {
        const ids = pickedLabel.id;
       		console.log(ids)
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

添加弹窗-核心代码

利用entity的point定位窗体，给entity一个空点，在cesium下一次渲染前获取当前entity在屏幕上的坐标值赋值给dom元素。
缺点是即使在地球的另一面也还是会显示窗体，这个可以后面优化
let pos = (props.trackEntity.position && props.trackEntity.position.getValue(Cesium.JulianDate.now())) || Cesium.Cartesian3.ZERO; screenPos = Cesium.SceneTransforms.wgs84ToWindowCoordinates( Viewer.scene, pos );

const handler = new Cesium.ScreenSpaceEventHandler();
const onUpdate = () => {
  if (element == null) return;
  let screenPos;
  if (trackCursor) {
    screenPos = mousePos;
  } else if (props.trackEntity) {
    let pos =
      (props.trackEntity.position &&
        props.trackEntity.position.getValue(Cesium.JulianDate.now())) ||
      Cesium.Cartesian3.ZERO;
    screenPos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      Viewer.scene,
      pos
    );
  } else if (props.trackPos) {
    screenPos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      Viewer.scene,
      props.trackPos
    );
  }

  if (screenPos) {
    if (element.value) {
      element.value.style.display = "";
      switch (props.alignX) {
        case "left":
          element.value.style.left = screenPos.x + "px";
          break;
        case "center":
          element.value.style.left =
            screenPos.x + element.value.clientWidth * 0.5 + "px";
          break;
        case "right":
        default:
          element.value.style.left =
            screenPos.x - element.value.clientWidth * 0.5 + "px";
      }

      switch (props.alignY) {
        case "top":
          element.value.style.top =
            screenPos.y - element.value.clientHeight + "px";
          break;
        case "bottom":
          // this.element.style.top = (screenPos.y + this.element.clientHeight * 0.5) + "px";
          element.value.style.top = screenPos.y + "px";
          break;
        case "center":
        default:
          element.value.style.top =
            screenPos.y - element.value.clientHeight * 0.5 + "px";
      }
    }
  } else {
    if (element.value) element.value.style.display = "none";
  }
};
onMounted(() => {
  handler.setInputAction((event) => {
    let offsetToLeftTop = Viewer.container.getBoundingClientRect();
    mousePos = Cesium.Cartesian2.subtract(
      event.endPosition,
      new Cesium.Cartesian2(offsetToLeftTop.left, offsetToLeftTop.top),
      new Cesium.Cartesian2()
    );
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  Viewer.scene.preUpdate.addEventListener(onUpdate);
});