@antv/l7-scene 2.9.34 → 2.9.36-alpha.1

package/es/boxSelect.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from 'eventemitter3';
+import { Scene } from './index';
+export declare const BoxSelectEventList: string[];
+export declare type BoxSelectOptions = {
+    className?: string;
+};
+export default class BoxSelect extends EventEmitter {
+    protected scene: Scene;
+    protected options: BoxSelectOptions;
+    protected isEnable: boolean;
+    protected box: HTMLElement;
+    protected startEvent: any;
+    protected endEvent: any;
+    constructor(scene: Scene, options?: BoxSelectOptions);
+    get container(): HTMLElement;
+    enable(): void;
+    disable(): void;
+    protected onDragStart: (e: any) => void;
+    protected onDragging: (e: any) => void;
+    protected onDragEnd: (e: any) => void;
+    protected syncBoxBound(): void;
+    protected getLngLatBox(): import("@turf/helpers").BBox;
+}

package/es/boxSelect.js

@@ -0,0 +1,149 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import { DOM } from '@antv/l7-utils';
+import { EventEmitter } from 'eventemitter3';
+import bbox from '@turf/bbox';
+import { featureCollection, lineString } from '@turf/helpers';
+export var BoxSelectEventList = ['selectstart', 'selecting', 'selectend'];
+
+var BoxSelect = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(BoxSelect, _EventEmitter);
+
+  var _super = _createSuper(BoxSelect);
+
+  function BoxSelect(scene) {
+    var _this;
+
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    _classCallCheck(this, BoxSelect);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "isEnable", false);
+
+    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e) {
+      _this.box.style.display = 'block';
+      _this.startEvent = _this.endEvent = e;
+
+      _this.syncBoxBound();
+
+      _this.emit('selectstart', _this.getLngLatBox(), _this.startEvent, _this.endEvent);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDragging", function (e) {
+      _this.endEvent = e;
+
+      _this.syncBoxBound();
+
+      _this.emit('selecting', _this.getLngLatBox(), _this.startEvent, _this.endEvent);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDragEnd", function (e) {
+      _this.endEvent = e;
+      _this.box.style.display = 'none';
+
+      _this.emit('selectend', _this.getLngLatBox(), _this.startEvent, _this.endEvent);
+    });
+
+    _this.scene = scene;
+    _this.options = options;
+    return _this;
+  }
+
+  _createClass(BoxSelect, [{
+    key: "container",
+    get: function get() {
+      return this.scene.getMapService().getMarkerContainer();
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      if (this.isEnable) {
+        return;
+      }
+
+      var className = this.options.className;
+      this.scene.setMapStatus({
+        dragEnable: false
+      });
+      this.container.style.cursor = 'crosshair';
+
+      if (!this.box) {
+        var box = DOM.create('div', undefined, this.container);
+        box.classList.add('l7-select-box');
+
+        if (className) {
+          box.classList.add(className);
+        }
+
+        box.style.display = 'none';
+        this.box = box;
+      }
+
+      this.scene.on('dragstart', this.onDragStart);
+      this.scene.on('dragging', this.onDragging);
+      this.scene.on('dragend', this.onDragEnd);
+      this.isEnable = true;
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      if (!this.isEnable) {
+        return;
+      }
+
+      this.scene.setMapStatus({
+        dragEnable: true
+      });
+      this.container.style.cursor = 'auto';
+      this.scene.off('dragstart', this.onDragStart);
+      this.scene.off('dragging', this.onDragging);
+      this.scene.off('dragend', this.onDragEnd);
+      this.isEnable = false;
+    }
+  }, {
+    key: "syncBoxBound",
+    value: function syncBoxBound() {
+      var _this$startEvent = this.startEvent,
+          x1 = _this$startEvent.x,
+          y1 = _this$startEvent.y;
+      var _this$endEvent = this.endEvent,
+          x2 = _this$endEvent.x,
+          y2 = _this$endEvent.y;
+      var left = Math.min(x1, x2);
+      var top = Math.min(y1, y2);
+      var width = Math.abs(x1 - x2);
+      var height = Math.abs(y1 - y2);
+      this.box.style.top = "".concat(top, "px");
+      this.box.style.left = "".concat(left, "px");
+      this.box.style.width = "".concat(width, "px");
+      this.box.style.height = "".concat(height, "px");
+    }
+  }, {
+    key: "getLngLatBox",
+    value: function getLngLatBox() {
+      var _this$startEvent$lngL = this.startEvent.lngLat,
+          lng1 = _this$startEvent$lngL.lng,
+          lat1 = _this$startEvent$lngL.lat;
+      var _this$endEvent$lngLat = this.endEvent.lngLat,
+          lng2 = _this$endEvent$lngLat.lng,
+          lat2 = _this$endEvent$lngLat.lat;
+      return bbox(featureCollection([lineString([[lng1, lat1], [lng2, lat2]])]));
+    }
+  }]);
+
+  return BoxSelect;
+}(EventEmitter);
+
+export { BoxSelect as default };

package/es/index.d.ts

@@ -25,6 +25,7 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
     private popupService;
     private fontService;
     private interactionService;
+    private boxSelect;
     private container;
     constructor(config: ISceneConfig);
     get map(): unknown;
@@ -70,12 +71,13 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
     addIconFontGlyphs(fontFamily: string, glyphs: IIconFontGlyph[]): void;
     addControl(ctr: IControl): void;
     removeControl(ctr: IControl): void;
-    getControlByName(name: string): IControl | undefined;
+    getControlByName(name: string): IControl<any> | undefined;
     addMarker(marker: IMarker): void;
     addMarkerLayer(layer: IMarkerLayer): void;
     removeMarkerLayer(layer: IMarkerLayer): void;
     removeAllMakers(): void;
     addPopup(popup: IPopup): void;
+    removePopup(popup: IPopup): void;
     on(type: string, handle: (...args: any[]) => void): void;
     once(type: string, handle: (...args: any[]) => void): void;
     emit(type: string, handle: (...args: any[]) => void): void;
@@ -106,6 +108,8 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
     registerPostProcessingPass(constructor: new (...args: any[]) => IPostProcessingPass<unknown>, name: string): void;
     enableShaderPick(): void;
     diasbleShaderPick(): void;
+    enableBoxSelect(once?: boolean): void;
+    disableBoxSelect(): void;
     getPointSizeRange(): Float32Array;
     private initComponent;
     private initControl;

package/es/index.js

@@ -7,6 +7,7 @@ import { createLayerContainer, createSceneContainer, SceneEventList, TYPES } fro
 import { MaskLayer } from '@antv/l7-layers';
 import { ReglRendererService } from '@antv/l7-renderer';
 import { DOM, isMini } from '@antv/l7-utils';
+import BoxSelect, { BoxSelectEventList } from "./boxSelect";
 
 /**
  * 暴露 Scene API
@@ -45,6 +46,9 @@ var Scene = /*#__PURE__*/function () {
     this.markerService = sceneContainer.get(TYPES.IMarkerService);
     this.interactionService = sceneContainer.get(TYPES.IInteractionService);
     this.popupService = sceneContainer.get(TYPES.IPopupService);
+    this.boxSelect = new BoxSelect(this, {
+      className: config.selectBoxClassName
+    });
 
     if (isMini) {
       this.sceneService.initMiniScene(config);
@@ -329,15 +333,36 @@ var Scene = /*#__PURE__*/function () {
     value: function addPopup(popup) {
       this.popupService.addPopup(popup);
     }
+  }, {
+    key: "removePopup",
+    value: function removePopup(popup) {
+      this.popupService.removePopup(popup);
+    }
   }, {
     key: "on",
     value: function on(type, handle) {
-      SceneEventList.indexOf(type) === -1 ? this.mapService.on(type, handle) : this.sceneService.on(type, handle);
+      if (BoxSelectEventList.includes(type)) {
+        var _this$boxSelect;
+
+        (_this$boxSelect = this.boxSelect) === null || _this$boxSelect === void 0 ? void 0 : _this$boxSelect.on(type, handle);
+      } else if (SceneEventList.includes(type)) {
+        this.sceneService.on(type, handle);
+      } else {
+        this.mapService.on(type, handle);
+      }
     }
   }, {
     key: "once",
     value: function once(type, handle) {
-      SceneEventList.indexOf(type) === -1 ? this.mapService.once(type, handle) : this.sceneService.once(type, handle);
+      if (BoxSelectEventList.includes(type)) {
+        var _this$boxSelect2;
+
+        (_this$boxSelect2 = this.boxSelect) === null || _this$boxSelect2 === void 0 ? void 0 : _this$boxSelect2.once(type, handle);
+      } else if (SceneEventList.includes(type)) {
+        this.sceneService.once(type, handle);
+      } else {
+        this.mapService.once(type, handle);
+      }
     }
   }, {
     key: "emit",
@@ -347,7 +372,15 @@ var Scene = /*#__PURE__*/function () {
   }, {
     key: "off",
     value: function off(type, handle) {
-      SceneEventList.indexOf(type) === -1 ? this.mapService.off(type, handle) : this.sceneService.off(type, handle);
+      if (BoxSelectEventList.includes(type)) {
+        var _this$boxSelect3;
+
+        (_this$boxSelect3 = this.boxSelect) === null || _this$boxSelect3 === void 0 ? void 0 : _this$boxSelect3.off(type, handle);
+      } else if (SceneEventList.includes(type)) {
+        this.sceneService.off(type, handle);
+      } else {
+        this.mapService.off(type, handle);
+      }
     } // implements IMapController
 
   }, {
@@ -488,6 +521,25 @@ var Scene = /*#__PURE__*/function () {
     key: "diasbleShaderPick",
     value: function diasbleShaderPick() {
       this.layerService.disableShaderPick();
+    }
+  }, {
+    key: "enableBoxSelect",
+    value: function enableBoxSelect() {
+      var _this4 = this;
+
+      var once = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.boxSelect.enable();
+
+      if (once) {
+        this.boxSelect.once('selectend', function () {
+          _this4.disableBoxSelect();
+        });
+      }
+    }
+  }, {
+    key: "disableBoxSelect",
+    value: function disableBoxSelect() {
+      this.boxSelect.disable();
     } // get current point size info
 
   }, {

package/lib/boxSelect.js

@@ -0,0 +1,126 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/boxSelect.ts
+var boxSelect_exports = {};
+__export(boxSelect_exports, {
+  BoxSelectEventList: () => BoxSelectEventList,
+  default: () => BoxSelect
+});
+module.exports = __toCommonJS(boxSelect_exports);
+var import_l7_utils = require("@antv/l7-utils");
+var import_eventemitter3 = require("eventemitter3");
+var import_bbox = __toESM(require("@turf/bbox"));
+var import_helpers = require("@turf/helpers");
+var BoxSelectEventList = ["selectstart", "selecting", "selectend"];
+var BoxSelect = class extends import_eventemitter3.EventEmitter {
+  constructor(scene, options = {}) {
+    super();
+    this.isEnable = false;
+    this.onDragStart = (e) => {
+      this.box.style.display = "block";
+      this.startEvent = this.endEvent = e;
+      this.syncBoxBound();
+      this.emit("selectstart", this.getLngLatBox(), this.startEvent, this.endEvent);
+    };
+    this.onDragging = (e) => {
+      this.endEvent = e;
+      this.syncBoxBound();
+      this.emit("selecting", this.getLngLatBox(), this.startEvent, this.endEvent);
+    };
+    this.onDragEnd = (e) => {
+      this.endEvent = e;
+      this.box.style.display = "none";
+      this.emit("selectend", this.getLngLatBox(), this.startEvent, this.endEvent);
+    };
+    this.scene = scene;
+    this.options = options;
+  }
+  get container() {
+    return this.scene.getMapService().getMarkerContainer();
+  }
+  enable() {
+    if (this.isEnable) {
+      return;
+    }
+    const { className } = this.options;
+    this.scene.setMapStatus({
+      dragEnable: false
+    });
+    this.container.style.cursor = "crosshair";
+    if (!this.box) {
+      const box = import_l7_utils.DOM.create("div", void 0, this.container);
+      box.classList.add("l7-select-box");
+      if (className) {
+        box.classList.add(className);
+      }
+      box.style.display = "none";
+      this.box = box;
+    }
+    this.scene.on("dragstart", this.onDragStart);
+    this.scene.on("dragging", this.onDragging);
+    this.scene.on("dragend", this.onDragEnd);
+    this.isEnable = true;
+  }
+  disable() {
+    if (!this.isEnable) {
+      return;
+    }
+    this.scene.setMapStatus({
+      dragEnable: true
+    });
+    this.container.style.cursor = "auto";
+    this.scene.off("dragstart", this.onDragStart);
+    this.scene.off("dragging", this.onDragging);
+    this.scene.off("dragend", this.onDragEnd);
+    this.isEnable = false;
+  }
+  syncBoxBound() {
+    const { x: x1, y: y1 } = this.startEvent;
+    const { x: x2, y: y2 } = this.endEvent;
+    const left = Math.min(x1, x2);
+    const top = Math.min(y1, y2);
+    const width = Math.abs(x1 - x2);
+    const height = Math.abs(y1 - y2);
+    this.box.style.top = `${top}px`;
+    this.box.style.left = `${left}px`;
+    this.box.style.width = `${width}px`;
+    this.box.style.height = `${height}px`;
+  }
+  getLngLatBox() {
+    const {
+      lngLat: { lng: lng1, lat: lat1 }
+    } = this.startEvent;
+    const {
+      lngLat: { lng: lng2, lat: lat2 }
+    } = this.endEvent;
+    return (0, import_bbox.default)((0, import_helpers.featureCollection)([
+      (0, import_helpers.lineString)([
+        [lng1, lat1],
+        [lng2, lat2]
+      ])
+    ]));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BoxSelectEventList
+});

package/lib/index.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -27,6 +30,7 @@ var import_l7_core = require("@antv/l7-core");
 var import_l7_layers = require("@antv/l7-layers");
 var import_l7_renderer = require("@antv/l7-renderer");
 var import_l7_utils = require("@antv/l7-utils");
+var import_boxSelect = __toESM(require("./boxSelect"));
 var Scene = class {
   constructor(config) {
     const { id, map, canvas, hasBaseMap } = config;
@@ -43,6 +47,9 @@ var Scene = class {
     this.markerService = sceneContainer.get(import_l7_core.TYPES.IMarkerService);
     this.interactionService = sceneContainer.get(import_l7_core.TYPES.IInteractionService);
     this.popupService = sceneContainer.get(import_l7_core.TYPES.IPopupService);
+    this.boxSelect = new import_boxSelect.default(this, {
+      className: config.selectBoxClassName
+    });
     if (import_l7_utils.isMini) {
       this.sceneService.initMiniScene(config);
     } else {
@@ -213,17 +220,41 @@ var Scene = class {
   addPopup(popup) {
     this.popupService.addPopup(popup);
   }
+  removePopup(popup) {
+    this.popupService.removePopup(popup);
+  }
   on(type, handle) {
-    import_l7_core.SceneEventList.indexOf(type) === -1 ? this.mapService.on(type, handle) : this.sceneService.on(type, handle);
+    var _a;
+    if (import_boxSelect.BoxSelectEventList.includes(type)) {
+      (_a = this.boxSelect) == null ? void 0 : _a.on(type, handle);
+    } else if (import_l7_core.SceneEventList.includes(type)) {
+      this.sceneService.on(type, handle);
+    } else {
+      this.mapService.on(type, handle);
+    }
   }
   once(type, handle) {
-    import_l7_core.SceneEventList.indexOf(type) === -1 ? this.mapService.once(type, handle) : this.sceneService.once(type, handle);
+    var _a;
+    if (import_boxSelect.BoxSelectEventList.includes(type)) {
+      (_a = this.boxSelect) == null ? void 0 : _a.once(type, handle);
+    } else if (import_l7_core.SceneEventList.includes(type)) {
+      this.sceneService.once(type, handle);
+    } else {
+      this.mapService.once(type, handle);
+    }
   }
   emit(type, handle) {
     import_l7_core.SceneEventList.indexOf(type) === -1 ? this.mapService.on(type, handle) : this.sceneService.emit(type, handle);
   }
   off(type, handle) {
-    import_l7_core.SceneEventList.indexOf(type) === -1 ? this.mapService.off(type, handle) : this.sceneService.off(type, handle);
+    var _a;
+    if (import_boxSelect.BoxSelectEventList.includes(type)) {
+      (_a = this.boxSelect) == null ? void 0 : _a.off(type, handle);
+    } else if (import_l7_core.SceneEventList.includes(type)) {
+      this.sceneService.off(type, handle);
+    } else {
+      this.mapService.off(type, handle);
+    }
   }
   getZoom() {
     return this.mapService.getZoom();
@@ -307,6 +338,17 @@ var Scene = class {
   diasbleShaderPick() {
     this.layerService.disableShaderPick();
   }
+  enableBoxSelect(once = true) {
+    this.boxSelect.enable();
+    if (once) {
+      this.boxSelect.once("selectend", () => {
+        this.disableBoxSelect();
+      });
+    }
+  }
+  disableBoxSelect() {
+    this.boxSelect.disable();
+  }
   getPointSizeRange() {
     return this.sceneService.getPointSizeRange();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.9.34",
+  "version": "2.9.36-alpha.1",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,21 +23,23 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "2.9.34",
-    "@antv/l7-core": "2.9.34",
-    "@antv/l7-layers": "2.9.34",
-    "@antv/l7-maps": "2.9.34",
-    "@antv/l7-renderer": "2.9.34",
-    "@antv/l7-utils": "2.9.34",
+    "@antv/l7-component": "2.9.36-alpha.1",
+    "@antv/l7-core": "2.9.36-alpha.1",
+    "@antv/l7-layers": "2.9.36-alpha.1",
+    "@antv/l7-maps": "2.9.36-alpha.1",
+    "@antv/l7-renderer": "2.9.36-alpha.1",
+    "@antv/l7-utils": "2.9.36-alpha.1",
     "@babel/runtime": "^7.7.7",
+    "@turf/turf": "^6.5.0",
+    "eventemitter3": "^4.0.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.9.34"
+    "@antv/l7-test-utils": "2.9.36-alpha.1"
   },
-  "gitHead": "5e0fdaf978907383aedd4ba77a8508e7b3b87671",
+  "gitHead": "dafb82e5eb2cf73db95d8dbdcef63d4ad5f99554",
   "publishConfig": {
     "access": "public"
   }