Question

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

Answer 1

您好，您这边用的是什么前端框架？是Cesium/WebGL还是iClient for JavaScript？

Comments

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();

      }

    },

Answer 2

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

2、麻烦提供下您的本地代码详细截图

Comments

上一条评论有代码，咋换人了？

---

您的功能是画框，查询框内的模型数据吗？有涉及到数据服务吗？您参考的官网示例是哪个呢？

---

http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#drawRect

---

画框然后，拿到框内模型的图元id

---

您把服务在本地示例包中加载，看看能否获取到id值呢？