From ef51064b00d7feebdb9f2d1b93eea6a2d05f6479 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 14 Apr 2020 17:01:40 +0800 Subject: [PATCH] =?UTF-8?q?fix(scale):=20scale=20=E4=B8=8D=E5=93=8D?= =?UTF-8?q?=E5=BA=94=E7=BC=A9=E6=94=BE=E5=8F=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/draw/UI/API.en.md | 3 +++ examples/draw/UI/API.zh.md | 3 +++ examples/draw/UI/demo/amap.js | 34 +++++++++++++++++++++++++ examples/draw/UI/demo/mapbox.js | 29 +++++++++++++++++++++ examples/draw/UI/demo/meta.json | 19 ++++++++++++++ examples/draw/UI/index.en.md | 4 +++ examples/draw/UI/index.zh.md | 4 +++ gatsby-browser.js | 1 + gatsby-config.js | 8 ++++++ gatsby-node.js | 3 ++- packages/component/src/control/scale.ts | 6 +++++ stories/Components/components/Scale.tsx | 2 +- 12 files changed, 114 insertions(+), 2 deletions(-) create mode 100644 examples/draw/UI/API.en.md create mode 100644 examples/draw/UI/API.zh.md create mode 100644 examples/draw/UI/demo/amap.js create mode 100644 examples/draw/UI/demo/mapbox.js create mode 100644 examples/draw/UI/demo/meta.json create mode 100644 examples/draw/UI/index.en.md create mode 100644 examples/draw/UI/index.zh.md diff --git a/examples/draw/UI/API.en.md b/examples/draw/UI/API.en.md new file mode 100644 index 0000000000..9af5745d94 --- /dev/null +++ b/examples/draw/UI/API.en.md @@ -0,0 +1,3 @@ +--- +title: API +--- diff --git a/examples/draw/UI/API.zh.md b/examples/draw/UI/API.zh.md new file mode 100644 index 0000000000..9af5745d94 --- /dev/null +++ b/examples/draw/UI/API.zh.md @@ -0,0 +1,3 @@ +--- +title: API +--- diff --git a/examples/draw/UI/demo/amap.js b/examples/draw/UI/demo/amap.js new file mode 100644 index 0000000000..e8ba25279b --- /dev/null +++ b/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); + +}); diff --git a/examples/draw/UI/demo/mapbox.js b/examples/draw/UI/demo/mapbox.js new file mode 100644 index 0000000000..a5eba485e5 --- /dev/null +++ b/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); + +}); diff --git a/examples/draw/UI/demo/meta.json b/examples/draw/UI/demo/meta.json new file mode 100644 index 0000000000..bc57e9f59e --- /dev/null +++ b/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" + } + ] +} diff --git a/examples/draw/UI/index.en.md b/examples/draw/UI/index.en.md new file mode 100644 index 0000000000..05a76d0480 --- /dev/null +++ b/examples/draw/UI/index.en.md @@ -0,0 +1,4 @@ +--- +title: L7 Draw +order: 3 +--- diff --git a/examples/draw/UI/index.zh.md b/examples/draw/UI/index.zh.md new file mode 100644 index 0000000000..9545c8985f --- /dev/null +++ b/examples/draw/UI/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 绘制组件 +order: 3 +--- diff --git a/gatsby-browser.js b/gatsby-browser.js index c3ebe92abb..dcc461d387 100644 --- a/gatsby-browser.js +++ b/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'); diff --git a/gatsby-config.js b/gatsby-config.js index 934a1468d5..d7bbd81577 100644 --- a/gatsby-config.js +++ b/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', diff --git a/gatsby-node.js b/gatsby-node.js index 8cf2f43a85..fe874911b1 100644 --- a/gatsby-node.js +++ b/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') }; }; diff --git a/packages/component/src/control/scale.ts b/packages/component/src/control/scale.ts index 404c618089..fd69532f86 100644 --- a/packages/component/src/control/scale.ts +++ b/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() { diff --git a/stories/Components/components/Scale.tsx b/stories/Components/components/Scale.tsx index 9251c1272e..1f2061f41f 100644 --- a/stories/Components/components/Scale.tsx +++ b/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 {