fix(scale): scale 不响应缩放变化

examples/draw/UI/API.en.md

@@ -0,0 +1,3 @@
+---
+title: API
+---

examples/draw/UI/API.zh.md

@@ -0,0 +1,3 @@
+---
+title: API
+---

examples/draw/UI/demo/amap.js

@@ -0,0 +1,34 @@
+// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import { DrawControl } from '@antv/l7-draw';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    layers: [],
+    center: [ 116.1608, 40.1119 ],
+    zoom: 15
+  })
+});
+scene.on('loaded', () => {
+  const layer1 = new AMap.TileLayer.Satellite();
+  scene.map.setLayers([]);
+  layer1.setMap(scene.map);
+  const drawControl = new DrawControl(scene, {
+    position: 'topright',
+    layout: 'horizontal', // horizontal vertical
+    controls: {
+      point: true,
+      polygon: true,
+      line: true,
+      circle: true,
+      rect: true,
+      delete: true
+    }
+  });
+  scene.addControl(drawControl);
+
+});

examples/draw/UI/demo/mapbox.js

@@ -0,0 +1,29 @@
+// https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif
+import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+import { DrawControl } from '@antv/l7-draw';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 0,
+    style: 'mapbox://styles/mapbox/satellite-v9',
+    center: [ 115.5268, 34.3628 ],
+    zoom: 15
+  })
+});
+scene.on('loaded', () => {
+  const drawControl = new DrawControl(scene, {
+    position: 'topright',
+    layout: 'horizontal', // horizontal vertical
+    controls: {
+      point: true,
+      polygon: true,
+      line: true,
+      circle: true,
+      rect: true,
+      delete: true
+    }
+  });
+  scene.addControl(drawControl);
+
+});

examples/draw/UI/demo/meta.json

@@ -0,0 +1,19 @@
+{
+  "title": {
+    "zh": "栅格图层",
+    "en": "Gallery"
+  },
+  "demos": [
+
+    {
+      "filename": "amap.js",
+      "title": "高德地图绘制",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "Mapbox 地图绘制",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*oX9uTpfcIJ4AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/draw/UI/index.en.md

@@ -0,0 +1,4 @@
+---
+title: L7 Draw
+order: 3
+---

examples/draw/UI/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 绘制组件
+order: 3
+---

gatsby-browser.js

@@ -6,5 +6,6 @@ window.g2 = require('@antv/g2');
 window.l7 = require('@antv/l7');
 window.l7Maps = require('@antv/l7-maps');
 window.l7React = require('@antv/l7-react');
+window.l7Draw = require('@antv/l7-draw');
 window.react = require('react');
 window.reactDom = require('react-dom');

gatsby-config.js

@@ -183,6 +183,14 @@ module.exports = {
           en: 'React Demo'
         }
       },
+      {
+        slug: 'draw',
+        icon: 'map',
+        title: {
+          zh: '绘制 组件',
+          en: 'L7 Draw'
+        }
+      },
       {
         slug: 'point',
         icon: 'point',

gatsby-node.js

@@ -19,6 +19,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
     '@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
     '@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
     '@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
-    '@antv/l7-react': path.resolve(__dirname, 'packages/react/src')
+    '@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
+    '@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src')
   };
 };

packages/component/src/control/scale.ts

@@ -33,13 +33,19 @@ export default class Scale extends Control {
     this.addScales(className + '-line', container);
     const { updateWhenIdle } = this.controlOption;
     // TODO: 高德地图和MapBox地图事件不一致问题
+    // 高德zoomchange
     this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
+    this.mapsService.on(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
     this.update();
 
     return container;
   }
   public onRemove() {
     const { updateWhenIdle } = this.controlOption;
+    this.mapsService.off(
+      updateWhenIdle ? 'zoomend' : 'zoomchange',
+      this.update,
+    );
     this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
   }
   public update() {

stories/Components/components/Scale.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { Layers, PointLayer, PolygonLayer, Scale, Scene, Zoom } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class ScaleComponent extends React.Component {