@antv/l7-component 2.20.13 → 2.20.15

package/es/control/layerSwitch.d.ts

@@ -17,7 +17,7 @@ export default class LayerSwitch extends SelectControl<ILayerSwitchOption> {
     getLayerVisible(): string[];
     getLayerOptions(): ControlOptionItem[];
     setOptions(option: Partial<ILayerSwitchOption>): void;
-    private handleSingleSelectionMode;
+    private handleSingleSelection;
     onAdd(): HTMLElement;
     onRemove(): void;
     protected onLayerChange: () => void;

package/es/control/layerSwitch.js

@@ -143,7 +143,7 @@ var LayerSwitch = /*#__PURE__*/function (_SelectControl) {
       _get(_getPrototypeOf(LayerSwitch.prototype), "setOptions", this).call(this, option);
       if (isLayerChange) {
         if (this.controlOption.multiple === false) {
-          this.handleSingleSelectionMode();
+          this.handleSingleSelection();
         }
         this.selectValue = this.getLayerVisible();
         this.controlOption.options = this.getLayerOptions();
@@ -154,8 +154,8 @@ var LayerSwitch = /*#__PURE__*/function (_SelectControl) {
     // TODO: 单选模式下，目前默认展示第一项，通过用户提供defaultValue展示默认选项的属性待开发
     // 如果是单选模式，则只显示第一个图层
   }, {
-    key: "handleSingleSelectionMode",
-    value: function handleSingleSelectionMode() {
+    key: "handleSingleSelection",
+    value: function handleSingleSelection() {
       this.layers.forEach(function (layer, index) {
         index === 0 ? layer.show() : layer.hide();
       });
@@ -165,7 +165,7 @@ var LayerSwitch = /*#__PURE__*/function (_SelectControl) {
     value: function onAdd() {
       var _this$controlOption$o;
       if (this.controlOption.multiple === false) {
-        this.handleSingleSelectionMode();
+        this.handleSingleSelection();
       }
       if (!((_this$controlOption$o = this.controlOption.options) !== null && _this$controlOption$o !== void 0 && _this$controlOption$o.length)) {
         this.controlOption.options = this.getLayerOptions();

package/es/marker.d.ts

@@ -11,6 +11,7 @@ export default class Marker extends EventEmitter {
     private lngLat;
     private scene;
     private added;
+    private preLngLat;
     getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void;
     constructor(option?: Partial<IMarkerOption>);
     getDefault(): {
@@ -33,12 +34,16 @@ export default class Marker extends EventEmitter {
     getPopup(): IPopup;
     getOffset(): number[];
     setDraggable(draggable: boolean): void;
-    isDraggable(): boolean;
+    getDraggable(): boolean;
     getExtData(): any;
     setExtData(data: any): void;
     private update;
     private onMapClick;
     private getCurrentContainerSize;
+    private updateDraggable;
+    private onMarkerDragStart;
+    private onMarkerDragMove;
+    private onMarkerDragEnd;
     private updatePosition;
     private init;
     private registerMarkerEvent;

package/es/marker.js

@@ -20,6 +20,53 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
     _classCallCheck(this, Marker);
     _this = _super.call(this);
     _defineProperty(_assertThisInitialized(_this), "added", false);
+    _defineProperty(_assertThisInitialized(_this), "preLngLat", {
+      lng: 0,
+      lat: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMarkerDragStart", function (e) {
+      var mapContainer = _this.mapsService.getContainer();
+      if (!mapContainer) {
+        return;
+      }
+      _this.mapsService.setMapStatus({
+        dragEnable: false,
+        zoomEnable: false
+      });
+      var _ref = mapContainer.getClientRects()[0],
+        containerX = _ref.left,
+        containerY = _ref.top;
+      var clickX = e.x,
+        clickY = e.y;
+      _this.preLngLat = _this.mapsService.containerToLngLat([clickX - containerX, clickY - containerY]);
+      _this.mapsService.on('mousemove', _this.onMarkerDragMove);
+      document.addEventListener('mouseup', _this.onMarkerDragEnd);
+      _this.emit('dragstart', _this.lngLat);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMarkerDragMove", function (e) {
+      var _this$preLngLat = _this.preLngLat,
+        preLng = _this$preLngLat.lng,
+        preLat = _this$preLngLat.lat;
+      var _e$lnglat = e.lnglat,
+        curLng = _e$lnglat.lng,
+        curLat = _e$lnglat.lat;
+      var newLngLat = {
+        lng: _this.lngLat.lng + curLng - preLng,
+        lat: _this.lngLat.lat + curLat - preLat
+      };
+      _this.setLnglat(newLngLat);
+      _this.preLngLat = e.lnglat;
+      _this.emit('dragging', newLngLat);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMarkerDragEnd", function (e) {
+      _this.mapsService.setMapStatus({
+        dragEnable: true,
+        zoomEnable: true
+      });
+      _this.mapsService.off('mousemove', _this.onMarkerDragMove);
+      document.removeEventListener('mouseup', _this.onMarkerDragEnd);
+      _this.emit('dragend', _this.lngLat);
+    });
     _defineProperty(_assertThisInitialized(_this), "eventHandle", function (e) {
       _this.polyfillEvent(e);
       _this.emit(e.type, {
@@ -63,6 +110,7 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       this.registerMarkerEvent(element);
       this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
       this.update();
+      this.updateDraggable();
       this.added = true;
       this.emit('added');
       return this;
@@ -131,6 +179,7 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       this.init();
       this.mapsService.getMarkerContainer().appendChild(el);
       this.registerMarkerEvent(el);
+      this.updateDraggable();
       this.update();
       return this;
     }
@@ -200,16 +249,15 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
     value: function getOffset() {
       return this.markerOption.offsets;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "setDraggable",
     value: function setDraggable(draggable) {
-      throw new Error('Method not implemented.');
+      this.markerOption.draggable = draggable;
+      this.updateDraggable();
     }
   }, {
-    key: "isDraggable",
-    value: function isDraggable() {
+    key: "getDraggable",
+    value: function getDraggable() {
       return this.markerOption.draggable;
     }
   }, {
@@ -254,6 +302,17 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
         bounds: this.mapsService.getBounds()
       };
     }
+  }, {
+    key: "updateDraggable",
+    value: function updateDraggable() {
+      var element = this.markerOption.element;
+      element === null || element === void 0 || element.removeEventListener('mousedown', this.onMarkerDragStart);
+      this.mapsService.off('mousemove', this.onMarkerDragMove);
+      document.removeEventListener('mouseup', this.onMarkerDragEnd);
+      if (this.markerOption.draggable) {
+        element === null || element === void 0 || element.addEventListener('mousedown', this.onMarkerDragStart);
+      }
+    }
   }, {
     key: "updatePosition",
     value: function updatePosition() {
@@ -270,10 +329,10 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       if (element) {
         element.style.display = 'block';
         element.style.whiteSpace = 'nowrap';
-        var _ref = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
-          containerHeight = _ref.containerHeight,
-          containerWidth = _ref.containerWidth,
-          bounds = _ref.bounds;
+        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+          containerHeight = _ref2.containerHeight,
+          containerWidth = _ref2.containerWidth,
+          bounds = _ref2.bounds;
         if (!bounds) {
           return;
         }

package/lib/control/layerSwitch.js

@@ -149,7 +149,7 @@ var LayerSwitch = exports.default = exports.LayerSwitch = /*#__PURE__*/function
       (0, _get2.default)((0, _getPrototypeOf2.default)(LayerSwitch.prototype), "setOptions", this).call(this, option);
       if (isLayerChange) {
         if (this.controlOption.multiple === false) {
-          this.handleSingleSelectionMode();
+          this.handleSingleSelection();
         }
         this.selectValue = this.getLayerVisible();
         this.controlOption.options = this.getLayerOptions();
@@ -160,8 +160,8 @@ var LayerSwitch = exports.default = exports.LayerSwitch = /*#__PURE__*/function
     // TODO: 单选模式下，目前默认展示第一项，通过用户提供defaultValue展示默认选项的属性待开发
     // 如果是单选模式，则只显示第一个图层
   }, {
-    key: "handleSingleSelectionMode",
-    value: function handleSingleSelectionMode() {
+    key: "handleSingleSelection",
+    value: function handleSingleSelection() {
       this.layers.forEach(function (layer, index) {
         index === 0 ? layer.show() : layer.hide();
       });
@@ -171,7 +171,7 @@ var LayerSwitch = exports.default = exports.LayerSwitch = /*#__PURE__*/function
     value: function onAdd() {
       var _this$controlOption$o;
       if (this.controlOption.multiple === false) {
-        this.handleSingleSelectionMode();
+        this.handleSingleSelection();
       }
       if (!((_this$controlOption$o = this.controlOption.options) !== null && _this$controlOption$o !== void 0 && _this$controlOption$o.length)) {
         this.controlOption.options = this.getLayerOptions();

package/lib/marker.js

@@ -27,6 +27,53 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
     (0, _classCallCheck2.default)(this, Marker);
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "added", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preLngLat", {
+      lng: 0,
+      lat: 0
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMarkerDragStart", function (e) {
+      var mapContainer = _this.mapsService.getContainer();
+      if (!mapContainer) {
+        return;
+      }
+      _this.mapsService.setMapStatus({
+        dragEnable: false,
+        zoomEnable: false
+      });
+      var _ref = mapContainer.getClientRects()[0],
+        containerX = _ref.left,
+        containerY = _ref.top;
+      var clickX = e.x,
+        clickY = e.y;
+      _this.preLngLat = _this.mapsService.containerToLngLat([clickX - containerX, clickY - containerY]);
+      _this.mapsService.on('mousemove', _this.onMarkerDragMove);
+      document.addEventListener('mouseup', _this.onMarkerDragEnd);
+      _this.emit('dragstart', _this.lngLat);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMarkerDragMove", function (e) {
+      var _this$preLngLat = _this.preLngLat,
+        preLng = _this$preLngLat.lng,
+        preLat = _this$preLngLat.lat;
+      var _e$lnglat = e.lnglat,
+        curLng = _e$lnglat.lng,
+        curLat = _e$lnglat.lat;
+      var newLngLat = {
+        lng: _this.lngLat.lng + curLng - preLng,
+        lat: _this.lngLat.lat + curLat - preLat
+      };
+      _this.setLnglat(newLngLat);
+      _this.preLngLat = e.lnglat;
+      _this.emit('dragging', newLngLat);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMarkerDragEnd", function (e) {
+      _this.mapsService.setMapStatus({
+        dragEnable: true,
+        zoomEnable: true
+      });
+      _this.mapsService.off('mousemove', _this.onMarkerDragMove);
+      document.removeEventListener('mouseup', _this.onMarkerDragEnd);
+      _this.emit('dragend', _this.lngLat);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "eventHandle", function (e) {
       _this.polyfillEvent(e);
       _this.emit(e.type, {
@@ -70,6 +117,7 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       this.registerMarkerEvent(element);
       this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
       this.update();
+      this.updateDraggable();
       this.added = true;
       this.emit('added');
       return this;
@@ -138,6 +186,7 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       this.init();
       this.mapsService.getMarkerContainer().appendChild(el);
       this.registerMarkerEvent(el);
+      this.updateDraggable();
       this.update();
       return this;
     }
@@ -207,16 +256,15 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
     value: function getOffset() {
       return this.markerOption.offsets;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "setDraggable",
     value: function setDraggable(draggable) {
-      throw new Error('Method not implemented.');
+      this.markerOption.draggable = draggable;
+      this.updateDraggable();
     }
   }, {
-    key: "isDraggable",
-    value: function isDraggable() {
+    key: "getDraggable",
+    value: function getDraggable() {
       return this.markerOption.draggable;
     }
   }, {
@@ -261,6 +309,17 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
         bounds: this.mapsService.getBounds()
       };
     }
+  }, {
+    key: "updateDraggable",
+    value: function updateDraggable() {
+      var element = this.markerOption.element;
+      element === null || element === void 0 || element.removeEventListener('mousedown', this.onMarkerDragStart);
+      this.mapsService.off('mousemove', this.onMarkerDragMove);
+      document.removeEventListener('mouseup', this.onMarkerDragEnd);
+      if (this.markerOption.draggable) {
+        element === null || element === void 0 || element.addEventListener('mousedown', this.onMarkerDragStart);
+      }
+    }
   }, {
     key: "updatePosition",
     value: function updatePosition() {
@@ -277,10 +336,10 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       if (element) {
         element.style.display = 'block';
         element.style.whiteSpace = 'nowrap';
-        var _ref = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
-          containerHeight = _ref.containerHeight,
-          containerWidth = _ref.containerWidth,
-          bounds = _ref.bounds;
+        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+          containerHeight = _ref2.containerHeight,
+          containerWidth = _ref2.containerWidth,
+          bounds = _ref2.bounds;
         if (!bounds) {
           return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.20.13",
+  "version": "2.20.15",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.20.13",
-    "@antv/l7-utils": "2.20.13",
+    "@antv/l7-core": "2.20.15",
+    "@antv/l7-utils": "2.20.15",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -35,12 +35,12 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-layers": "2.20.13",
-    "@antv/l7-test-utils": "2.20.13",
+    "@antv/l7-layers": "2.20.15",
+    "@antv/l7-test-utils": "2.20.15",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "9487cca3bdd14eb2fc81b310e4eae5d30a30496f",
+  "gitHead": "283c12854a06cd2181552d6a9cf00d3e34bbd58e",
   "publishConfig": {
     "access": "public"
   }