From a6f004b65e5fefed167e09fde84ed7811d18bb96 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sun, 8 Mar 2020 14:48:52 +0800 Subject: [PATCH 1/3] fix: fix scene loaded & add react docs --- docs/api/layer/layer.zh.md | 2 +- docs/api/react/layer.en.md | 4 ++ docs/api/react/layer.zh.md | 61 ++++++++++++++++++ docs/api/react/scene.en.md | 11 ++++ docs/api/react/scene.zh.md | 63 +++++++++++++++++++ docs/api/react/{index.en.md => start.en.md} | 0 docs/api/react/{index.zh.md => start.zh.md} | 0 docs/api/scene.zh.md | 12 ++++ examples/react/scene/demo/amap.jsx | 56 +++++++++++++++++ examples/react/scene/demo/meta.json | 14 +++++ examples/react/scene/index.en.md | 4 ++ examples/react/scene/index.zh.md | 4 ++ gatsby-config.js | 16 +++++ .../core/src/services/scene/SceneService.ts | 3 +- stories/Layers/components/Point.tsx | 11 ++-- 15 files changed, 251 insertions(+), 10 deletions(-) create mode 100644 docs/api/react/layer.en.md create mode 100644 docs/api/react/layer.zh.md create mode 100644 docs/api/react/scene.en.md create mode 100644 docs/api/react/scene.zh.md rename docs/api/react/{index.en.md => start.en.md} (100%) rename docs/api/react/{index.zh.md => start.zh.md} (100%) create mode 100644 examples/react/scene/demo/amap.jsx create mode 100644 examples/react/scene/demo/meta.json create mode 100644 examples/react/scene/index.en.md create mode 100644 examples/react/scene/index.zh.md diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index 17f374e6b1..2dc99fa580 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -69,7 +69,7 @@ scene.addLayer(layer); - parser 数据解析，默认是解析层 geojson - transforms [transform，transform ]  数据处理转换 可设置多个 -parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source) +parser 和  transforms [见 source 文档](../source/source) ```javascript layer.source(data, { diff --git a/docs/api/react/layer.en.md b/docs/api/react/layer.en.md new file mode 100644 index 0000000000..d53433e589 --- /dev/null +++ b/docs/api/react/layer.en.md @@ -0,0 +1,4 @@ +--- +title: Layer Component +order: 1 +--- diff --git a/docs/api/react/layer.zh.md b/docs/api/react/layer.zh.md new file mode 100644 index 0000000000..f44f0161cf --- /dev/null +++ b/docs/api/react/layer.zh.md @@ -0,0 +1,61 @@ +--- +title: Layer 组件 +order: 1 +--- + +## Scene Props +| prop name | Type | Default | Description | +| ---- | ---- | ---- | ---- | +|option |`Object`||layer配置项| +|source|||数据源配置项| +|color |`attributeOption`||颜色通道| +|shape |`attributeOption`||图层形状属性| +|size |`attributeOption`||图层大小属性| +|style |`Object`||图层样式| +|scale |`Object`||图层度量| +|filter |`Function`||图层数据过滤方法| +|select |`boolean` `Object`||图层选中高亮| +|active | `boolean` `Object`|`false`|图层hover高亮| +|onLayerLoad|`Function`||图层添加完成后回调，用于获取layer对象| + +### attributeOption +color, size, shape 等图形映射通道配置项 +#### option +- field 映射字段，如果是常量设置为 null +- values 映射值 支持 常量，数组，回调函数，如果values为数组或回调需要设置field字段 + +### sourceOption + +数据源配置项 +#### Option +- data 支持 geojson、csv、json +- parser 数据解析配置项 +- transforms 数据处理配置项 + + +```jsx +import {PolygonLayer } from '@antv/l7-react'; + +``` diff --git a/docs/api/react/scene.en.md b/docs/api/react/scene.en.md new file mode 100644 index 0000000000..a67126dd25 --- /dev/null +++ b/docs/api/react/scene.en.md @@ -0,0 +1,11 @@ +--- +title: 高德地图 +order: 1 +--- +| prop name | Type | Default | Description | +| ---- | ---- | ---- | ---- | ---- | +| style | `Object` | `null` | scene css样式 | +| className | `string` |`null` | 样式名称 | +| map | `Object` |`Required` | 地图配置项 | +| option | `Object` | `void` | scene 配置项 | +| onSceneLoaded | `Function` |`void` | scene加载回调函数 | diff --git a/docs/api/react/scene.zh.md b/docs/api/react/scene.zh.md new file mode 100644 index 0000000000..6068c5a207 --- /dev/null +++ b/docs/api/react/scene.zh.md @@ -0,0 +1,63 @@ +--- +title: 高德地图 +order: 1 +--- +## Scene Props +| prop name | Type | Default | Description | +| ---- | ---- | ---- | ---- | +| style | `Object` | `null` | scene css样式 | +| className | `string` |`null` | 样式名称 | +| map | `Object` |`Required` | map option [地图配置项]() | +| option | `Object` | `void` | scene option 配置项 [详情](#map-props) | +| onSceneLoaded | `Function` |`void` | scene加载回调函数 | + +```jsx +import { AMapScene } from '@antv/l7-react'; + +``` + +### map option +地图配置项 + +| option | Type | Default | Description | +| ---- | ---- | ---- |----| +| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7默认提供四种样式，同时也支持自定义样式 | +| token |`string`|`Required`|地图密钥，需要平台申请| +| plugin |`string[]`|`null`|高德地图[API插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']`| +| center |`number`|null|地图中心点| +| pitch |`number`|0|地图倾角| +| rotation |`number`|0|地图旋转角| +| zoom |`number`|null|地图缩放等级| +| maxZoom |`number`|0|最大缩放等级| +| minZoom |`number`|AMap 18 ,Mapbox 20|最小缩放等级| + + +其他配置项见地图文档 +高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map) + +Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map) + + +其他配置项和底图一致 + + +### scene option +| option | Type | Default | Description | +| ---- | ---- | ---- | ---- | +| logoPosition | string | `bottomleft` | logo位置 `bottomright|topright|bottomleft|topleft` | +| logoVisible | `boolean` | `true` | 是否显示logo | +| antialias | `boolean` | `true` | 是否开启抗锯齿 | +| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 | + + + + diff --git a/docs/api/react/index.en.md b/docs/api/react/start.en.md similarity index 100% rename from docs/api/react/index.en.md rename to docs/api/react/start.en.md diff --git a/docs/api/react/index.zh.md b/docs/api/react/start.zh.md similarity index 100% rename from docs/api/react/index.zh.md rename to docs/api/react/start.zh.md diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index 1b02bbb74e..3f7b4a4314 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -89,6 +89,16 @@ L7 Logo 的显示位置 默认左下角 是否显示 L7 的 Logo {boolean} true +### antialias + +是否开始前抗锯齿 `boolean` `true` + +### preserveDrawingBuffer + +是否保留缓冲区数据 `boolean` `false` + +## Map 配置项 + ### zoom 地图初始显示级别 {number} （0-22） @@ -114,6 +124,8 @@ L7 Logo 的显示位置 默认左下角 比如高德地图 +⚠️ 高德地图样式 增加 `isPublic=true` 参数 + ```javascript { style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致 diff --git a/examples/react/scene/demo/amap.jsx b/examples/react/scene/demo/amap.jsx new file mode 100644 index 0000000000..fddba29229 --- /dev/null +++ b/examples/react/scene/demo/amap.jsx @@ -0,0 +1,56 @@ +import { AMapScene, LineLayer } from '@antv/l7-react'; +import * as React from 'react'; + +export default React.memo(function Map() { + const [ data, setData ] = React.useState(); + React.useEffect(() => { + const fetchData = async () => { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json' + ); + const raw = await response.json(); + setData(raw); + }; + fetchData(); + }, []); + return ( + <> + + + )} + + + ); +}); + diff --git a/examples/react/scene/demo/meta.json b/examples/react/scene/demo/meta.json new file mode 100644 index 0000000000..845cca79f6 --- /dev/null +++ b/examples/react/scene/demo/meta.json @@ -0,0 +1,14 @@ +{ + "title": { + "zh": "Scene 组件", + "en": "Scene Component" + }, + "demos": [ + + { + "filename": "amap.jsx", + "title": "高德地图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/react/scene/index.en.md b/examples/react/scene/index.en.md new file mode 100644 index 0000000000..d2f6f8583e --- /dev/null +++ b/examples/react/scene/index.en.md @@ -0,0 +1,4 @@ +--- +title: React Map +order: 0 +--- diff --git a/examples/react/scene/index.zh.md b/examples/react/scene/index.zh.md new file mode 100644 index 0000000000..4277741ef1 --- /dev/null +++ b/examples/react/scene/index.zh.md @@ -0,0 +1,4 @@ +--- +title: React 地图 +order: 0 +--- diff --git a/gatsby-config.js b/gatsby-config.js index d8ca9b9665..dfec4b4bfe 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -77,6 +77,14 @@ module.exports = { }, order: 1 }, + { + slug: 'api/react', + title: { + zh: 'react 组件', + en: 'react component' + }, + order: 10 + }, { slug: 'api/layer', title: { @@ -167,6 +175,14 @@ module.exports = { en: 'Featured' } }, + { + slug: 'react', + icon: 'raster', + title: { + zh: 'React 组件', + en: 'React Component' + } + }, { slug: 'point', icon: 'point', diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 9efc72d874..6ced9fac6c 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -204,7 +204,7 @@ export default class Scene extends EventEmitter implements ISceneService { } public async render() { - if (this.rendering && this.destroyed) { + if (this.rendering || this.destroyed) { return; } @@ -216,7 +216,6 @@ export default class Scene extends EventEmitter implements ISceneService { if (this.destroyed) { this.destroy(); } - // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？ this.logger.info(' render inited'); this.layerService.initLayers(); diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 8c677278a7..ca5b91d059 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -51,14 +51,11 @@ export default class Point3D extends React.Component { strokeWidth: 1, }); scene.addLayer(pointLayer); + const hander = () => { + console.log('click'); - // scene.on('loaded', () => { - // const newData = { - // type: 'FeatureCollection', - // features: pointsData.features.slice(0, 100), - // }; - // pointLayer.setData(newData); - // }); + }; + scene.on('click', hander); this.scene = scene; }); } From 56e535cac3f08f857093bd06f6fc4de1d5ad1059 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sun, 8 Mar 2020 15:19:21 +0800 Subject: [PATCH 2/3] docs: react scene --- docs/api/react/layer.zh.md | 48 +++++++++---------- docs/api/react/scene.en.md | 15 +++--- docs/api/react/scene.zh.md | 73 ++++++++++++++--------------- docs/api/scene.zh.md | 4 +- stories/Layers/components/Point.tsx | 1 - 5 files changed, 67 insertions(+), 74 deletions(-) diff --git a/docs/api/react/layer.zh.md b/docs/api/react/layer.zh.md index f44f0161cf..72522722bc 100644 --- a/docs/api/react/layer.zh.md +++ b/docs/api/react/layer.zh.md @@ -4,37 +4,42 @@ order: 1 --- ## Scene Props -| prop name | Type | Default | Description | -| ---- | ---- | ---- | ---- | -|option |`Object`||layer配置项| -|source|||数据源配置项| -|color |`attributeOption`||颜色通道| -|shape |`attributeOption`||图层形状属性| -|size |`attributeOption`||图层大小属性| -|style |`Object`||图层样式| -|scale |`Object`||图层度量| -|filter |`Function`||图层数据过滤方法| -|select |`boolean` `Object`||图层选中高亮| -|active | `boolean` `Object`|`false`|图层hover高亮| -|onLayerLoad|`Function`||图层添加完成后回调，用于获取layer对象| + +| prop name | Type | Default | Description | +| ----------- | ------------------ | ------- | --------------------------------------- | +| option | `Object` | | layer 配置项 | +| source | | | 数据源配置项 | +| color | `attributeOption` | | 颜色通道 | +| shape | `attributeOption` | | 图层形状属性 | +| size | `attributeOption` | | 图层大小属性 | +| style | `Object` | | 图层样式 | +| scale | `Object` | | 图层度量 | +| filter | `Function` | | 图层数据过滤方法 | +| select | `boolean` `Object` | | 图层选中高亮 | +| active | `boolean` `Object` | `false` | 图层 hover 高亮 | +| onLayerLoad | `Function` | | 图层添加完成后回调，用于获取 layer 对象 | ### attributeOption + color, size, shape 等图形映射通道配置项 + #### option + - field 映射字段，如果是常量设置为 null -- values 映射值 支持 常量，数组，回调函数，如果values为数组或回调需要设置field字段 +- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段 ### sourceOption 数据源配置项 + #### Option + - data 支持 geojson、csv、json - parser 数据解析配置项 - transforms 数据处理配置项 - ```jsx -import {PolygonLayer } from '@antv/l7-react'; +import { PolygonLayer } from '@antv/l7-react'; +/>; ``` diff --git a/docs/api/react/scene.en.md b/docs/api/react/scene.en.md index a67126dd25..cf48730b83 100644 --- a/docs/api/react/scene.en.md +++ b/docs/api/react/scene.en.md @@ -2,10 +2,11 @@ title: 高德地图 order: 1 --- -| prop name | Type | Default | Description | -| ---- | ---- | ---- | ---- | ---- | -| style | `Object` | `null` | scene css样式 | -| className | `string` |`null` | 样式名称 | -| map | `Object` |`Required` | 地图配置项 | -| option | `Object` | `void` | scene 配置项 | -| onSceneLoaded | `Function` |`void` | scene加载回调函数 | + +| prop name | Type | Default | Description | +| ------------- | ---------- | ---------- | ------------------ | +| style | `Object` | `null` | scene css 样式 | +| className | `string` | `null` | 样式名称 | +| map | `Object` | `Required` | 地图配置项 | +| option | `Object` | `void` | scene 配置项 | +| onSceneLoaded | `Function` | `void` | scene 加载回调函数 | diff --git a/docs/api/react/scene.zh.md b/docs/api/react/scene.zh.md index 6068c5a207..c1be2f3a39 100644 --- a/docs/api/react/scene.zh.md +++ b/docs/api/react/scene.zh.md @@ -2,62 +2,57 @@ title: 高德地图 order: 1 --- + ## Scene Props -| prop name | Type | Default | Description | -| ---- | ---- | ---- | ---- | -| style | `Object` | `null` | scene css样式 | -| className | `string` |`null` | 样式名称 | -| map | `Object` |`Required` | map option [地图配置项]() | -| option | `Object` | `void` | scene option 配置项 [详情](#map-props) | -| onSceneLoaded | `Function` |`void` | scene加载回调函数 | + +| prop name | Type | Default | Description | +| ------------- | ---------- | ---------- | -------------------------------------- | +| style | `Object` | `null` | scene css 样式 | +| className | `string` | `null` | 样式名称 | +| map | `Object` | `Required` | map option [地图配置项]() | +| option | `Object` | `void` | scene option 配置项 [详情](#map-props) | +| onSceneLoaded | `Function` | `void` | scene 加载回调函数 | ```jsx import { AMapScene } from '@antv/l7-react'; + option={{}} + map={{ + style: 'light', + center: [112, 20], + token: '', + }} +/>; ``` ### map option + 地图配置项 -| option | Type | Default | Description | -| ---- | ---- | ---- |----| -| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7默认提供四种样式，同时也支持自定义样式 | -| token |`string`|`Required`|地图密钥，需要平台申请| -| plugin |`string[]`|`null`|高德地图[API插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']`| -| center |`number`|null|地图中心点| -| pitch |`number`|0|地图倾角| -| rotation |`number`|0|地图旋转角| -| zoom |`number`|null|地图缩放等级| -| maxZoom |`number`|0|最大缩放等级| -| minZoom |`number`|AMap 18 ,Mapbox 20|最小缩放等级| - +| option | Type | Default | Description | +| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- | +| style | `string` | `light` | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式 | +| token | `string` | `Required` | 地图密钥，需要平台申请 | +| plugin | `string[]` | `null` | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` | +| center | `number` | null | 地图中心点 | +| pitch | `number` | 0 | 地图倾角 | +| rotation | `number` | 0 | 地图旋转角 | +| zoom | `number` | null | 地图缩放等级 | +| maxZoom | `number` | 0 | 最大缩放等级 | +| minZoom | `number` | AMap 18 ,Mapbox 20 | 最小缩放等级 | 其他配置项见地图文档 高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map) Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map) - 其他配置项和底图一致 - ### scene option -| option | Type | Default | Description | -| ---- | ---- | ---- | ---- | -| logoPosition | string | `bottomleft` | logo位置 `bottomright|topright|bottomleft|topleft` | -| logoVisible | `boolean` | `true` | 是否显示logo | -| antialias | `boolean` | `true` | 是否开启抗锯齿 | -| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 | - - - +| option | Type | Default | Description | +| --------------------- | --------- | ------------ | --------------------------------------------------- | +| logoPosition | string | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` | +| logoVisible | `boolean` | `true` | 是否显示 logo | +| antialias | `boolean` | `true` | 是否开启抗锯齿 | +| preserveDrawingBuffer | `boolean` | `false` | 是否保留缓冲区数据 | diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index 3f7b4a4314..10d6bd2c6c 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -91,11 +91,11 @@ L7 Logo 的显示位置 默认左下角 ### antialias -是否开始前抗锯齿 `boolean` `true` +是否开始前抗锯齿 `boolean` `true` ### preserveDrawingBuffer -是否保留缓冲区数据 `boolean` `false` +是否保留缓冲区数据 `boolean` `false` ## Map 配置项 diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index ca5b91d059..1742766e0f 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -53,7 +53,6 @@ export default class Point3D extends React.Component { scene.addLayer(pointLayer); const hander = () => { console.log('click'); - }; scene.on('click', hander); this.scene = scene; From b4800cdbf4fed49f4ad40a3609af16843b3cb774 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sun, 8 Mar 2020 15:40:22 +0800 Subject: [PATCH 3/3] fix: site react example --- {examples => demos}/react/scene/demo/amap.jsx | 0 {examples => demos}/react/scene/demo/meta.json | 0 {examples => demos}/react/scene/index.en.md | 0 {examples => demos}/react/scene/index.zh.md | 0 gatsby-config.js | 8 -------- 5 files changed, 8 deletions(-) rename {examples => demos}/react/scene/demo/amap.jsx (100%) rename {examples => demos}/react/scene/demo/meta.json (100%) rename {examples => demos}/react/scene/index.en.md (100%) rename {examples => demos}/react/scene/index.zh.md (100%) diff --git a/examples/react/scene/demo/amap.jsx b/demos/react/scene/demo/amap.jsx similarity index 100% rename from examples/react/scene/demo/amap.jsx rename to demos/react/scene/demo/amap.jsx diff --git a/examples/react/scene/demo/meta.json b/demos/react/scene/demo/meta.json similarity index 100% rename from examples/react/scene/demo/meta.json rename to demos/react/scene/demo/meta.json diff --git a/examples/react/scene/index.en.md b/demos/react/scene/index.en.md similarity index 100% rename from examples/react/scene/index.en.md rename to demos/react/scene/index.en.md diff --git a/examples/react/scene/index.zh.md b/demos/react/scene/index.zh.md similarity index 100% rename from examples/react/scene/index.zh.md rename to demos/react/scene/index.zh.md diff --git a/gatsby-config.js b/gatsby-config.js index dfec4b4bfe..fcb296eb86 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -175,14 +175,6 @@ module.exports = { en: 'Featured' } }, - { - slug: 'react', - icon: 'raster', - title: { - zh: 'React 组件', - en: 'React Component' - } - }, { slug: 'point', icon: 'point',