From 4a494373e83e271142cf8e2639e5577dc56f6a24 Mon Sep 17 00:00:00 2001 From: "yuqi.pyq" Date: Tue, 26 Nov 2019 17:51:29 +0800 Subject: [PATCH 1/7] feat(map): adjust Scene API, use @antv/l7-maps instead re #86 --- dev-docs/ConfigSchemaValidation.md | 30 ++++++ ...oC 容器、依赖注入与服务说明.md | 2 +- dev-docs/使用方法.md | 49 +++++----- dev-docs/构建方案.md | 4 +- dev-docs/自定义后处理效果.md | 12 +-- docs/api/scene.en.md | 32 ++++--- docs/api/scene.zh.md | 51 ++++++---- docs/tutorial/map/amap.en.md | 27 +++--- docs/tutorial/map/amap.zh.md | 27 +++--- docs/tutorial/map/mapbox.en.md | 27 +++--- docs/tutorial/quickstart.en.md | 32 +++---- docs/tutorial/quickstart.zh.md | 32 +++---- examples/gallery/basic/demo/arcCircle.js | 15 +-- examples/gallery/basic/demo/bus_dark.js | 15 +-- examples/gallery/basic/demo/column_dark.js | 15 +-- examples/gallery/basic/demo/light.js | 15 +-- examples/gallery/basic/demo/normal.js | 13 +-- examples/gallery/basic/demo/point.js | 15 +-- examples/heatmap/grid/demo/china.js | 15 +-- examples/heatmap/grid/demo/grid1.js | 15 +-- examples/heatmap/grid/demo/heatmap3.js | 13 ++- examples/heatmap/grid/demo/world.js | 14 +-- examples/heatmap/heatmap/demo/heatmap.js | 13 ++- examples/heatmap/heatmap/demo/heatmap3d.js | 16 ++-- .../heatmap/heatmap/demo/heatmap_purple.js | 13 ++- examples/heatmap/hexagon/demo/china.js | 15 +-- examples/heatmap/hexagon/demo/hexagon.js | 17 ++-- examples/heatmap/hexagon/demo/light.js | 15 +-- examples/heatmap/hexagon/demo/world.js | 13 ++- examples/line/arc/demo/arc.js | 14 ++- examples/line/arc/demo/arcCircle.js | 13 ++- examples/line/arc/demo/trip_arc.js | 14 ++- examples/line/arc/demo/trip_arc_dark.js | 15 +-- examples/line/isoline/demo/ele.js | 13 ++- examples/line/isoline/demo/ele_dark.js | 13 ++- examples/line/isoline/demo/isoline.js | 13 ++- examples/line/line/demo/isoline.js | 13 ++- examples/line/path/demo/bus_dark.js | 15 +-- examples/line/path/demo/bus_light.js | 15 +-- examples/line/path/demo/road_dark.js | 15 +-- examples/line/path/demo/road_light.js | 15 +-- examples/point/bubble/demo/color.js | 14 +-- examples/point/bubble/demo/point.js | 16 ++-- examples/point/bubble/demo/scatter.js | 13 ++- examples/point/bubble/demo/world.js | 15 +-- examples/point/chart/demo/bar.js | 13 ++- examples/point/chart/demo/chart.js | 13 ++- examples/point/chart/demo/ring.js | 12 ++- examples/point/column/demo/clumn_shape.js | 16 ++-- .../point/column/demo/clumn_shape_light.js | 16 ++-- examples/point/column/demo/column_dark.js | 14 +-- examples/point/column/demo/column_light.js | 17 ++-- examples/point/image/demo/image.js | 13 ++- examples/point/image/demo/locate.js | 13 ++- examples/point/image/demo/weather.js | 15 +-- examples/point/marker/demo/marker.js | 13 ++- examples/point/scatter/demo/normal.js | 15 +-- examples/point/scatter/demo/normal2.js | 15 +-- examples/polygon/3d/demo/polygon.js | 14 +-- examples/polygon/fill/demo/fill.js | 15 +-- examples/polygon/fill/demo/polygon.js | 13 ++- examples/polygon/fill/demo/population.js | 13 ++- examples/raster/basic/demo/image.js | 13 ++- examples/raster/basic/demo/radar.js | 13 ++- gatsby-browser.js | 1 + lerna.json | 4 +- packages/component/src/marker.ts | 2 +- packages/component/src/popup.ts | 2 +- packages/core/package.json | 2 - .../src/services/component/IMarkerService.ts | 2 +- .../core/src/services/config/ConfigService.ts | 16 +++- .../src/services/config/IConfigService.ts | 13 ++- .../services/config/__tests__/schema.spec.ts | 93 ++++++++++++++++++- .../src/services/config/mapConfigSchema.ts | 36 +++++++ .../src/services/config/sceneConfigSchema.ts | 24 ----- packages/core/src/services/map/IMapService.ts | 23 ++--- .../core/src/services/scene/SceneService.ts | 4 +- packages/core/src/types.ts | 1 + packages/maps/src/BaseMapWrapper.ts | 52 +++++++++++ packages/maps/src/amap/Wrapper.ts | 11 +++ packages/maps/src/amap/index.ts | 15 ++- packages/maps/src/index.ts | 6 +- packages/maps/src/mapbox/Wrapper.ts | 12 +++ packages/maps/src/mapbox/index.ts | 23 ++--- packages/scene/src/ILayerManager.ts | 11 +++ packages/scene/src/IMapController.ts | 67 +++++++++++++ packages/scene/src/index.ts | 45 ++++----- stories/Animation/components/Polygon.tsx | 14 +-- stories/Components/components/Marker.tsx | 12 ++- stories/Components/components/Popup.tsx | 12 ++- stories/Components/components/Scale.tsx | 12 ++- stories/Components/components/Zoom.tsx | 12 ++- stories/Layers/components/Arc2DLine.tsx | 12 ++- stories/Layers/components/Arcline.tsx | 12 ++- stories/Layers/components/HeatMap.tsx | 12 ++- stories/Layers/components/HeatmapGrid.tsx | 12 ++- stories/Layers/components/Line.tsx | 12 ++- stories/Layers/components/Point.tsx | 13 +-- stories/Layers/components/Point3D.tsx | 12 ++- stories/Layers/components/PointImage.tsx | 12 ++- stories/Layers/components/Polygon3D.tsx | 13 +-- stories/Layers/components/RasterImage.tsx | 12 ++- stories/Layers/components/RasterLayer.tsx | 13 +-- stories/MapAdaptor/components/AMap.tsx | 14 +-- stories/MapAdaptor/components/Mapbox.tsx | 14 +-- stories/MapAdaptor/components/Mixed.tsx | 45 +++++---- stories/MapAdaptor/components/MultiAMap.tsx | 43 +++------ stories/MapAdaptor/components/MultiMapbox.tsx | 64 +++---------- stories/MultiPassRenderer/components/Blur.tsx | 13 +-- .../components/ColorHalftone.tsx | 13 +-- .../components/CustomPostProcessing.tsx | 12 ++- .../components/HexagonalPixelate.tsx | 12 ++- stories/MultiPassRenderer/components/Ink.tsx | 12 ++- .../MultiPassRenderer/components/Noise.tsx | 12 ++- .../MultiPassRenderer/components/Sepia.tsx | 12 ++- stories/MultiPassRenderer/components/TAA.tsx | 12 ++- stories/Picking/components/AdvancedAPI.tsx | 13 +-- stories/Picking/components/Highlight.tsx | 12 ++- stories/Picking/components/Tooltip.tsx | 14 +-- 119 files changed, 1255 insertions(+), 788 deletions(-) create mode 100644 packages/core/src/services/config/mapConfigSchema.ts create mode 100644 packages/maps/src/BaseMapWrapper.ts create mode 100644 packages/maps/src/amap/Wrapper.ts create mode 100644 packages/maps/src/mapbox/Wrapper.ts create mode 100644 packages/scene/src/ILayerManager.ts create mode 100644 packages/scene/src/IMapController.ts diff --git a/dev-docs/ConfigSchemaValidation.md b/dev-docs/ConfigSchemaValidation.md index e8736469b8..0b17d579b3 100644 --- a/dev-docs/ConfigSchemaValidation.md +++ b/dev-docs/ConfigSchemaValidation.md @@ -12,6 +12,36 @@ Invalid configuration object. MyPlugin has been initialised using a configuratio 和 Webpack 一样，我们也选择 [ajv](https://github.com/epoberezkin/ajv) 作为 JSON Schema 校验器。 目前我们只在 Layer 初始阶段进行校验，一旦校验失败会中断后续初始化插件的处理，并在控制台给出校验失败信息。后续需要在属性更新时同样进行校验。 +## 地图参数校验 + +当用户传入地图参数时，需要进行校验： +```javascript +// l7-core/services/config/mapConfigSchema.ts + +export default { + properties: { + // 地图缩放等级 + zoom: { + type: 'number', + minimum: 0, + maximum: 20, + }, + // 地图中心点 + center: { + item: { + type: 'number', + }, + maxItems: 2, + minItems: 2, + }, + // 仰角 + pitch: { + type: 'number', + }, + }, +}; +``` + ## Layer 基类配置项 Schema 目前在基类中我们声明了如下属性及其对应的校验规则： diff --git a/dev-docs/IoC 容器、依赖注入与服务说明.md b/dev-docs/IoC 容器、依赖注入与服务说明.md index 4d50bccf85..c154b448c6 100644 --- a/dev-docs/IoC 容器、依赖注入与服务说明.md +++ b/dev-docs/IoC 容器、依赖注入与服务说明.md @@ -171,6 +171,7 @@ protected getConfigSchema() { 通过 `mapService` 引用。 常用地图状态获取方法如下： + | 方法名 | 参数 | 返回值 | 说明 | | -------- | ------------- | --------- | --------- | | getSize | 无 | `[number, number]` | 获取地图尺寸（像素单位） | @@ -196,7 +197,6 @@ protected getConfigSchema() { 通过 `rendererService` 引用。 - ### 图层管理服务 开发者不需要显式调用。用于管理场景中所有的图层，负责图层的创建、销毁。 diff --git a/dev-docs/使用方法.md b/dev-docs/使用方法.md index ab21ebc66f..a8538ff11a 100644 --- a/dev-docs/使用方法.md +++ b/dev-docs/使用方法.md @@ -39,12 +39,13 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。 // 创建场景 const scene = new L7.Scene({ id: 'map', // 容器 id - type: 'mapbox', // 高德 amap 或者 mapbox - style: 'mapbox://styles/mapbox/streets-v9', - center: [110.19382669582967, 50.258134], - pitch: 0, - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token + map: new L7.Mapbox({ // 高德地图为 L7.AMap + style: 'mapbox://styles/mapbox/streets-v9', + center: [110.19382669582967, 50.258134], + pitch: 0, + zoom: 3, + token: 'pg.xxx', // 高德或者 Mapbox 的 token + }), }); // 创建图层 @@ -89,16 +90,17 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。 ## 通过 Submodule 使用 -首先通过 `npm/yarn` 安装 `@antv/l7`： +首先通过 `npm/yarn` 安装 `@antv/l7@beta`： ```bash -npm install --save @antv/l7 +npm install --save @antv/l7@beta // or -yarn add @antv/l7 +yarn add @antv/l7@beta ``` 然后就可以使用其中包含的场景和各类图层： ```typescript import { Scene, PolygonLayer } from '@antv/l7'; +import { AMap } from '@antv/l7-maps'; (async function() { // 获取数据 @@ -109,13 +111,14 @@ import { Scene, PolygonLayer } from '@antv/l7'; // 创建场景 const scene = new Scene({ - center: [110.19382669582967, 50.258134], id: 'map', - pitch: 0, - style: 'dark', - type: 'amap', - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token + map: new AMap({ + center: [110.19382669582967, 50.258134], + pitch: 0, + style: 'dark', + zoom: 3, + token: 'pg.xxx', // 高德或者 Mapbox 的 token + }), }); // 创建图层 @@ -151,9 +154,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories React 组件待开发，目前可以暂时以 Submodule 方式使用： ```tsx import { Scene, PolygonLayer } from '@antv/l7'; +import { AMap } from '@antv/l7-maps'; import * as React from 'react'; -export default class AMap extends React.Component { +export default class AMapExample extends React.Component { private scene: Scene; public componentWillUnmount() { @@ -165,13 +169,14 @@ export default class AMap extends React.Component { 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', ); const scene = new Scene({ - center: [110.19382669582967, 50.258134], id: 'map', - pitch: 0, - style: 'dark', - type: 'amap', - zoom: 3, - token: 'pg.xxx', // 高德或者 Mapbox 的 token + map: new AMap({ + center: [110.19382669582967, 50.258134], + pitch: 0, + style: 'dark', + zoom: 3, + token: 'pg.xxx', // 高德或者 Mapbox 的 token + }), }); const layer = new PolygonLayer({}); diff --git a/dev-docs/构建方案.md b/dev-docs/构建方案.md index 580a2f157e..33bb6d28b4 100644 --- a/dev-docs/构建方案.md +++ b/dev-docs/构建方案.md @@ -344,9 +344,9 @@ yarn build } ``` -### [WIP] 异步加载 Mapbox +### 按需引入地图依赖 以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。 目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。 -一个可能的方案是对于 Mapbox 使用 CodeSplitting。在容器首次获取 Mapbox 地图服务时异步加载并缓存。 \ No newline at end of file +[ISSUE](https://github.com/antvis/L7/issues/86) diff --git a/dev-docs/自定义后处理效果.md b/dev-docs/自定义后处理效果.md index 2d2bc401a4..527aa2775c 100644 --- a/dev-docs/自定义后处理效果.md +++ b/dev-docs/自定义后处理效果.md @@ -136,11 +136,12 @@ void main() { // 场景定义 const scene = new Scene({ id: 'map', - type: 'mapbox', - style: 'mapbox://styles/mapbox/streets-v9', - center: [110.19382669582967, 50.258134], - pitch: 0, - zoom: 3, + map: new Mapbox({ + style: 'mapbox://styles/mapbox/streets-v9', + center: [110.19382669582967, 50.258134], + pitch: 0, + zoom: 3, + }), }); // 注册自定义后处理效果 scene.registerPostProcessingPass( @@ -154,7 +155,6 @@ scene.registerPostProcessingPass( 和 L7 内置的后处理效果使用方法一致，通过效果名引用，同时传入定义参数即可： ```typescript const layer = new PolygonLayer({ - enableMultiPassRenderer: true, enablePicking: true, enableHighlight: true, passes: [ diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index 1df02e419c..92c8c55352 100644 --- a/docs/api/scene.en.md +++ b/docs/api/scene.en.md @@ -10,19 +10,24 @@ order: 1 ```javascript // Module 引用 import { Scene } from '@antv/l7'; +import { AMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', - mapStyle: 'dark', - center: [ 110.770672, 34.159869 ], - pitch: 45, + map: new AMap({ + style: 'dark', + center: [ 110.770672, 34.159869 ], + pitch: 45, + }), }); // CDN 使用方法 const scene = new L7.Scene({ id: 'map', - mapStyle: 'dark', - center: [ 110.770672, 34.159869 ], - pitch: 45, + map: new L7.AMap({ + style: 'dark', + center: [ 110.770672, 34.159869 ], + pitch: 45, + }), }); ``` @@ -43,20 +48,21 @@ const scene = new L7.Scene({ 可以通过scene map 属性获取 map实例 ```javascript - const map = scene.map +const map = scene.map ``` -为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。 +为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。 示例代码 ```javascript -import { Scene } from '@antv/l7'; const scene =new L7.Scene({ - id:'map', - mapStyle:'dark', - center:[ 110.770672, 34.159869 ], - pitch:45 + id: 'map', + map: new L7.AMap({ + style: 'dark', + center: [ 110.770672, 34.159869 ], + pitch: 45, + }), }) ``` diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index fc59be053a..92c8c55352 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -1,5 +1,5 @@ --- -title: 场景 Scene +title: Scene order: 1 --- @@ -7,7 +7,29 @@ order: 1 ## Scene -L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理 +```javascript +// Module 引用 +import { Scene } from '@antv/l7'; +import { AMap } from '@antv/l7-maps'; +const scene = new Scene({ + id: 'map', + map: new AMap({ + style: 'dark', + center: [ 110.770672, 34.159869 ], + pitch: 45, + }), +}); + +// CDN 使用方法 +const scene = new L7.Scene({ + id: 'map', + map: new L7.AMap({ + style: 'dark', + center: [ 110.770672, 34.159869 ], + pitch: 45, + }), +}); +``` ## Map @@ -26,7 +48,7 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源 可以通过scene map 属性获取 map实例 ```javascript - const map = scene.map +const map = scene.map ``` 为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。 @@ -34,24 +56,17 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源 示例代码 ```javascript -// Module 引用 -import { Scene } from '@antv/l7'; -const scene = new Scene({ +const scene =new L7.Scene({ id: 'map', - mapStyle: 'dark', - center: [ 110.770672, 34.159869 ], - pitch: 45, -}); - -// CDN 使用方法 -const scene = new L7.Scene({ - id: 'map', - mapStyle: 'dark', - center: [ 110.770672, 34.159869 ], - pitch: 45, -}); + map: new L7.AMap({ + style: 'dark', + center: [ 110.770672, 34.159869 ], + pitch: 45, + }), +}) ``` + ### 构造函数 **Scene** diff --git a/docs/tutorial/map/amap.en.md b/docs/tutorial/map/amap.en.md index c4b5a3b738..07c4190f2b 100644 --- a/docs/tutorial/map/amap.en.md +++ b/docs/tutorial/map/amap.en.md @@ -35,13 +35,13 @@ order: 0 ``` javascript const scene = new L7.Scene({ id: 'map', - style: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - type:'amap', - token: '高德地图token' - + map: new L7.AMap({ + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + token: '高德地图token', + }), }); ``` @@ -111,12 +111,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') const scene = new L7.Scene({ id: 'map', - mapStyle: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - type:'amap', - + map: new L7.AMap({ + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + token: '高德地图token', + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') diff --git a/docs/tutorial/map/amap.zh.md b/docs/tutorial/map/amap.zh.md index b9272fa92e..613319d507 100644 --- a/docs/tutorial/map/amap.zh.md +++ b/docs/tutorial/map/amap.zh.md @@ -35,13 +35,13 @@ order: 0 ``` javascript const scene = new L7.Scene({ id: 'map', - style: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - type:'amap', - token: '高德地图token' - + map: new L7.AMap({ + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + token: '高德地图token', + }), }); ``` @@ -111,12 +111,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') const scene = new L7.Scene({ id: 'map', - mapStyle: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - type:'amap', - + map: new L7.AMap({ + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + token: '高德地图token', + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') diff --git a/docs/tutorial/map/mapbox.en.md b/docs/tutorial/map/mapbox.en.md index f3fcb92e00..fcf792add6 100644 --- a/docs/tutorial/map/mapbox.en.md +++ b/docs/tutorial/map/mapbox.en.md @@ -42,13 +42,13 @@ order: 0 ``` javascript const scene = new L7.Scene({ id: 'map', - style: 'dark', // 样式URL - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 12, - type:'mapbox', - token: 'mapbox token' - + map: new L7.Mapbox({ + style: 'dark', // 样式URL + center: [120.19382669582967, 30.258134], + pitch: 0, + zoom: 12, + token: 'mapbox token', + }), }); ``` @@ -118,12 +118,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')