首页 / 浏览问题 / WebGIS / 问题详情
框选后获取数据数组为空,未拿到图元id
10EXP 2024年05月17日

第一张图是官网框选的,第二张图是用在本地项目上的

2 个回答

您好,您这边用的是什么前端框架?是Cesium/WebGL还是iClient for JavaScript?
571EXP 2024年05月17日
vue 2.0

javascript

Cesium
方便贴一下您的框选功能的关键代码吗?
// DrawRectHandler、Rect 单独放在一个js 文件里面在

export function DrawRectHandler(dom) {

  this._active = false;

  this.isDestroyed = false;

  this.handler = new Cesium.ScreenSpaceEventHandler(dom);

  this.rect = new Rect(dom);

  this.activeEvt = new Cesium.Event();

  this.movingEvt = new Cesium.Event();

  this.drawEvt = new Cesium.Event();

  // 开关相机控制

  function setCameraCtrl(isActive) {

    let cameraCtrl = viewer.scene.screenSpaceCameraController;

    cameraCtrl.enableRotate = isActive;

    cameraCtrl.enableTranslate = isActive;

    cameraCtrl.enableZoom = isActive;

    cameraCtrl.enableTilt = isActive;

    cameraCtrl.enableLook = isActive;

  }

  // 鼠标cursor控制

  function toggleCursorStyle(isActive) {

    if (isActive) {

      viewer.enableCursorStyle = false;

      viewer._element.style.cursor = "";

      dom.style.cursor = "default";

    } else {

      viewer.enableCursorStyle = true;

    }

  }

  DrawRectHandler.prototype.initEvent = function () {

    var isShiftAndLeftDown = false;

    var startPoint;

    this.handler.setInputAction(

      (e) => {

        isShiftAndLeftDown = true;

        startPoint = new Cesium.Cartesian2(e.position.x, e.position.y);

      },

      Cesium.ScreenSpaceEventType.LEFT_DOWN,

      Cesium.KeyboardEventModifier.SHIFT

    );

    this.handler.setInputAction(

      (e) => {

        let endPosition = e.endPosition;

        this.activeEvt.raiseEvent(endPosition);

        if (!isShiftAndLeftDown) return;

        this.rect.setPosition(startPoint, endPosition);

        this.rect.setShow(true);

        this.movingEvt.raiseEvent(this.rect.getRectPoint());

      },

      Cesium.ScreenSpaceEventType.MOUSE_MOVE,

      Cesium.KeyboardEventModifier.SHIFT

    );

    this.handler.setInputAction(

      (e) => {

        isShiftAndLeftDown = false;

        this.rect.setShow(false);

        this.drawEvt.raiseEvent(this.rect.getRectPoint());

      },

      Cesium.ScreenSpaceEventType.LEFT_UP,

      Cesium.KeyboardEventModifier.SHIFT

    );

  };

  DrawRectHandler.prototype.removeEvent = function () {

    this.handler.removeInputAction(

      Cesium.ScreenSpaceEventType.LEFT_CLICK,

      Cesium.KeyboardEventModifier.SHIFT

    );

    this.handler.removeInputAction(

      Cesium.ScreenSpaceEventType.MOUSE_MOVE,

      Cesium.KeyboardEventModifier.SHIFT

    );

    this.handler.removeInputAction(

      Cesium.ScreenSpaceEventType.LEFT_UP,

      Cesium.KeyboardEventModifier.SHIFT

    );

  };

  DrawRectHandler.prototype.destroy = function () {

    if (this.isDestroyed) return;

    setCameraCtrl(true);

    this.removeEvent();

    this.handler.destroy();

    this.rect.destroy();

    this.rect = null;

    this.isDestroyed = true;

  };

  DrawRectHandler.prototype.activate = function () {

    if (this._active) return;

    this._active = true;

    if (this.isDestroyed) return;

    setCameraCtrl(false);

    toggleCursorStyle(true);

    this.initEvent();

  };

  DrawRectHandler.prototype.deactivate = function () {

    if (!this._active) return;

    this._active = false;

    if (this.isDestroyed) return;

    setCameraCtrl(true);

    toggleCursorStyle(false);

    this.removeEvent();

  };

}

export function Rect(parentDom) {

  this.rect = document.createElement("div");

  this.rect.style.visibility = "hidden";

  this.rect.className = "hello";

  parentDom.appendChild(this.rect);

  const rectInfo = parentDom.getBoundingClientRect();

  this.leftTopPoint = new Cesium.Cartesian2();

  this.rightBottomPoint = new Cesium.Cartesian2();

  Rect.prototype.setShow = function (flag) {

    this.rect.style.visibility = flag ? "visible" : "hidden";

  };

  Rect.prototype.setPosition = function (startPoint, endPosition) {

    let w = endPosition.x - startPoint.x;

    let h = endPosition.y - startPoint.y;

    let left, top, width, height;

    if (w < 0) {

      left = endPosition.x;

      width = -w;

    } else {

      left = startPoint.x;

      width = w;

    }

    if (h < 0) {

      top = endPosition.y;

      height = -h;

    } else {

      top = startPoint.y;

      height = h;

    }

    this.leftTopPoint = new Cesium.Cartesian2(parseInt(left), parseInt(top));

    this.rightBottomPoint = new Cesium.Cartesian2(parseInt(left + width), parseInt(top + height));

    this.rect.style = `

  position:fixed;

  top:${top + rectInfo.top}px;

  left:${left + rectInfo.left}px;

  width:${width}px;

  height:${height}px;

  border:2px dashed #333;

  background-color: rgba(112,0,0,0.5);

  `;

  };

  Rect.prototype.getRectPoint = function () {

    return {

      leftTopPoint: this.leftTopPoint,

      rightBottomPoint: this.rightBottomPoint,

    };

  };

  Rect.prototype.destroy = function () {

    parentDom.removeChild(this.rect);

    this.rect = null;

  };

}

// 以下是vue文件中的代码,objects对象中isCallInMoving、mode 分别设置默认值为true,1; for...of注释掉是因为我这个地方目前只有一个图层

multipleChoice() {

      let layers = getPileLayer();

      this.tooltip = createTooltip(viewer.scene.canvas.parentNode);

      // window.tooltip = this.tooltip;

      // for (let layer of layers) {

      layers.selectColorType = 1;

      this.objects.selectedObjs[layers.name] = [];

      // }

      this.drawRect = new DrawRectHandler(viewer.scene.canvas.parentNode);

      // debounce 防抖

      const debouncedDrawHandler = _.debounce(this.drawHandler.bind(this), 100);

      this.drawRect.drawEvt.addEventListener((res) => {

        debouncedDrawHandler(res);

        // drawHandler(res);

      });

      this.drawRect.movingEvt.addEventListener((res) => {

        this.tooltip.showAt(res.rightBottomPoint, "<p>松开鼠标左键以结束选择区域</p>");

        if (this.objects.isCallInMoving) {

          // for (let layer of layers) {

          layers.selectColorType = 1;

          // }

          viewer.scene.pickRect(res.leftTopPoint, res.rightBottomPoint);

        }

      });

      this.drawRect.activeEvt.addEventListener((position) => {

        this.tooltip.showAt(position, "<p>点击鼠标左键以开始选择区域</p>");

      });

    },

    drawHandler(res) {

      let layers = getPileLayer();

      // for (let layer of layers) {

      layers.selectColorType = 1;

      // }

      this.tooltip.setVisible(false);

      let selectedColor = new Cesium.Color(1, 0, 0, 1);

      viewer.scene.pickRect(res.leftTopPoint, res.rightBottomPoint);

      const objs = viewer.scene.getPickRectIDs();

      let selectedObjs = this.objects.selectedObjs;

      for (let k in selectedObjs) {

        viewer.scene.layers.find(k).removeObjsColor(selectedObjs[k]);

      }

      for (let layer of layers) {

        let layerName = layer.name;

        let layerSlt = objs.find((e) => e.layerName === layerName);

        let sltIds = (layerSlt && layerSlt.ids) || [];

        let lastIds = selectedObjs[layerName];

        switch (this.objects.mode) {

          case 1:

            selectedObjs[layerName] = sltIds;

            break;

          case 2:

            selectedObjs[layerName] = _.union(lastIds, sltIds);

            break;

          case 4:

            selectedObjs[layerName] = _.intersection(lastIds, sltIds);

            break;

          case 8:

            selectedObjs[layerName] = _.difference(lastIds, sltIds);

            break;

          default:

            break;

        }

        layer.setObjsColor(selectedObjs[layerName], selectedColor);

        window.selectedObjs = selectedObjs;

      }

    },

    /* shift 键按下*/

    keydownFunction(e) {

      if (e.key === "Shift") {

        this.drawRect.activate();

      }

    },

    /* shift 键松开*/

    keyupFunction(e) {

      if (e.key === "Shift") {

        this.drawRect.deactivate();

      }

    },
您好,1、第一个截图是用的自己的服务在官网示例中框选的吗?

2、麻烦提供下您的本地代码详细截图
780EXP 2024年05月17日
上一条评论有代码,咋换人了?
您的功能是画框,查询框内的模型数据吗?有涉及到数据服务吗?您参考的官网示例是哪个呢?
画框然后,拿到框内模型的图元id
您把服务在本地示例包中加载,看看能否获取到id值呢?
...