zoukankan      html  css  js  c++  java
  • Cesium GeometryIntstance 选中改变颜色 和 绘制带箭头的直线

    1、GeometryInstance选中颜色更改

    let that = this;
          that.leftHander = new Cesium.ScreenSpaceEventHandler(
            that.Earth.viewer.scene.canvas
          );
    
          that.leftHander.setInputAction((click) => {
            let pickObj = that.Earth.viewer.scene.pick(click.position);
            if (pickObj) {
              that.clearSelected();
              let attributes = pickObj.primitive.getGeometryInstanceAttributes(
                pickObj.id
              );
    
              if (attributes) {
                that.primitive = pickObj.primitive;
                that.selectId = pickObj.id;
                attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
                  Cesium.Color.fromCssColorString("#7B68EE").withAlpha(0.6)
                );
              }
    
              let data =
                that.Earth.cimdatamanager.paishuiFacilityData.psdypolygonList;
              if (data) {
                data.forEach((o) => {
                  if (o.properties.gw_id == pickObj.id) {
                    that.isShow = 2;
                    that.unitData = o.properties;
                    that.drawPaiShuiLine(o.properties.drauintid);
                  }
                });
              }
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    2、恢复原来的颜色

        clearSelected() {
          if (this.primitive) {
            let attributes = this.primitive.getGeometryInstanceAttributes(
              this.selectId
            );
            if (attributes) {
              attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
                Cesium.Color.fromCssColorString("#4a7d84").withAlpha(0.6)
              );
            }
          }
        },

    3、绘制带箭头直线

          result.forEach((o) => {
            var redLine = this.viewer.entities.add({
              // 贴在地面上 两点之间的直线距离
              name: "line",
              polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                  o.inx,
                  o.iny,
                  o.outx,
                  o.outy,
                ]),
                 10,
                // 不带箭头的线
                // material: Cesium.Color.RED,
                // 是否紧贴地面
                //clampToGround: true,
                // 带箭头的线
                material: new Cesium.PolylineArrowMaterialProperty(
                  Cesium.Color.RED
                ),
              },
            });
  • 相关阅读:
    如何开始DDD(续)
    如何开始DDD
    ThinkNet终于见面了
    [Umbraco] umbraco中如何分页
    ETL 工具下载全集 包括 Informatica Datastage Cognos( 持续更新)
    js时间对比-转化为几天前,几小时前,几分钟前
    原生JS实现返回顶部和滚动锚点
    JSONP原理及简单实现 可做简单插件使用
    CSS3 transition效果 360度旋转 旋转放大 放大 移动
    js获取url的常用方法
  • 原文地址:https://www.cnblogs.com/xiaoqiyaozou/p/15749819.html
Copyright © 2011-2022 走看看