diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index 4ffc060ac6..97275f9017 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -126,24 +126,22 @@ layer.source(data, { - cat 枚举 ```javascript - -layer.scale('name',{ - type: 'cat' -}) +layer.scale('name', { + type: 'cat', +}); // 设置多个scale -字段名为 key, value 为scale配置项 +// 字段名为 key, value 为scale配置项 layer.scale({ - name:{ - type: 'cat' + name: { + type: 'cat', }, value: { - type: 'linear' - } -}) - + type: 'linear', + }, +}); ``` ## 视觉编码方法 diff --git a/docs/api/react/layer.zh.md b/docs/api/react/layer.zh.md index 956ffaf4f8..3752b6dc1b 100644 --- a/docs/api/react/layer.zh.md +++ b/docs/api/react/layer.zh.md @@ -7,7 +7,7 @@ order: 2 | prop name | Type | Default | Description | | ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- | -| option | `layer option` | | layer 配置项 | +| options | `layer options` | | layer 配置项 | | source | `sourceOption` | | 数据源配置项 | | color | `attributeOption` | | 颜色通道 | | shape | `attributeOption` | | 图层形状属性 | @@ -19,15 +19,17 @@ order: 2 | active | `boolean` `interaction option` | `false` | 图层 hover 高亮 | | onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 | -### layer option +### layer options -| prop name | Type | Default | Description | -| --------- | --------- | ----------------------- | ---------------------------------------- | -| name | `string` | | 图层名字，可根据名称获取 layer | -| visible | `boolean` | `true` | 图层是否可见 | -| zIndex | `number` | 0 | 图层绘制顺序， | -| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 | -| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 | +| prop name | Type | Default | Description | +| --------- | --------- | ----------------------- | ------------------------------------------------ | +| name | `string` | | 图层名字，可根据名称获取 layer | +| visible | `boolean` | `true` | 图层是否可见 | +| zIndex | `number` | 0 | 图层绘制顺序， | +| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 | +| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 | +| aotoFit | `boolean` | `false` | 是否缩放到图层范围 | +| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') | ### attribute Option diff --git a/examples/react/control/demo/control.tsx b/examples/react/control/demo/control.tsx new file mode 100644 index 0000000000..17128e868c --- /dev/null +++ b/examples/react/control/demo/control.tsx @@ -0,0 +1,27 @@ +import { AMapScene, Control, LineLayer } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +const MapScene = React.memo(function Map() { + return ( + + + + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/control/index.en.md b/examples/react/control/index.en.md new file mode 100644 index 0000000000..bea65a1ecf --- /dev/null +++ b/examples/react/control/index.en.md @@ -0,0 +1,4 @@ +--- +title: Control Component +order: 0 +--- diff --git a/examples/react/control/index.zh.md b/examples/react/control/index.zh.md new file mode 100644 index 0000000000..8e352710d8 --- /dev/null +++ b/examples/react/control/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Control 组件 +order: 0 +--- diff --git a/examples/react/layer/demo/meta.json b/examples/react/layer/demo/meta.json new file mode 100644 index 0000000000..649cdde08b --- /dev/null +++ b/examples/react/layer/demo/meta.json @@ -0,0 +1,14 @@ +{ + "title": { + "zh": "Layer 组件", + "en": "Layer Component" + }, + "demos": [ + + { + "filename": "world.jsx", + "title": "世界地图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/react/layer/demo/world.jsx b/examples/react/layer/demo/world.jsx new file mode 100644 index 0000000000..c0c4d4c72f --- /dev/null +++ b/examples/react/layer/demo/world.jsx @@ -0,0 +1,83 @@ +import { AMapScene, LineLayer, MapboxScene, PolygonLayer } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; + +const World = 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/68dc6756-627b-4e9e-a5ba-e834f6ba48f8.json' + ); + const data = await response.json(); + setData(data); + }; + fetchData(); + }, []); + return ( + + {data && [ + , + + ]} + + ); +}); + +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/react/layer/index.en.md b/examples/react/layer/index.en.md new file mode 100644 index 0000000000..10ec6ccf53 --- /dev/null +++ b/examples/react/layer/index.en.md @@ -0,0 +1,4 @@ +--- +title: Layer Component +order: 0 +--- diff --git a/examples/react/layer/index.zh.md b/examples/react/layer/index.zh.md new file mode 100644 index 0000000000..abf5d8dc21 --- /dev/null +++ b/examples/react/layer/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Layer 组件 +order: 0 +--- diff --git a/examples/react/scene/demo/amap.jsx b/examples/react/scene/demo/amap.jsx new file mode 100644 index 0000000000..e8e2cb805a --- /dev/null +++ b/examples/react/scene/demo/amap.jsx @@ -0,0 +1,25 @@ +import { AMapScene, LineLayer } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +const MapScene = React.memo(function Map() { + return ( + + ); +}); + +ReactDOM.render(, document.getElementById('map')); + diff --git a/examples/react/scene/demo/mapbox.jsx b/examples/react/scene/demo/mapbox.jsx new file mode 100644 index 0000000000..fba6d844be --- /dev/null +++ b/examples/react/scene/demo/mapbox.jsx @@ -0,0 +1,24 @@ +import { MapboxScene } from '@antv/l7-react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +const MapScene = React.memo(function Map() { + return ( + + ); +}); +ReactDOM.render(, document.getElementById('map')); + diff --git a/examples/react/scene/demo/meta.json b/examples/react/scene/demo/meta.json new file mode 100644 index 0000000000..edcdca68e5 --- /dev/null +++ b/examples/react/scene/demo/meta.json @@ -0,0 +1,19 @@ +{ + "title": { + "zh": "Scene 组件", + "en": "Scene Component" + }, + "demos": [ + + { + "filename": "amap.jsx", + "title": "高德地图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "Mapbox.jsx", + "title": "Mapbox 地图", + "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..35186e11ba --- /dev/null +++ b/examples/react/scene/index.en.md @@ -0,0 +1,4 @@ +--- +title: Scene Component +order: 0 +--- diff --git a/examples/react/scene/index.zh.md b/examples/react/scene/index.zh.md new file mode 100644 index 0000000000..67355df55e --- /dev/null +++ b/examples/react/scene/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Scene 组件 +order: 0 +--- diff --git a/gatsby-browser.js b/gatsby-browser.js index 487778f8c1..c3ebe92abb 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,3 +5,6 @@ window.geotiff = require('geotiff/dist/geotiff.bundle.min.js'); window.g2 = require('@antv/g2'); window.l7 = require('@antv/l7'); window.l7Maps = require('@antv/l7-maps'); +window.l7React = require('@antv/l7-react'); +window.react = require('react'); +window.reactDom = require('react-dom'); diff --git a/gatsby-config.js b/gatsby-config.js index ef5fa53c84..ec050798cb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -216,6 +216,14 @@ module.exports = { en: 'Raster Layer' } }, + { + slug: 'react', + icon: 'map', + title: { + zh: 'React 组件', + en: 'React Demo' + } + }, { slug: 'tutorial', icon: 'map', diff --git a/packages/component/src/control/zoom.ts b/packages/component/src/control/zoom.ts index b96155d618..abe8549633 100644 --- a/packages/component/src/control/zoom.ts +++ b/packages/component/src/control/zoom.ts @@ -93,7 +93,7 @@ export default class Zoom extends Control { ) { const link = DOM.create('a', className, container) as HTMLLinkElement; link.innerHTML = html; - link.href = '#'; + link.href = 'javascript:void(0)'; link.addEventListener('click', fn); return link; } diff --git a/packages/layers/src/plugins/LayerStylePlugin.ts b/packages/layers/src/plugins/LayerStylePlugin.ts index 45e38793aa..d91d42571c 100644 --- a/packages/layers/src/plugins/LayerStylePlugin.ts +++ b/packages/layers/src/plugins/LayerStylePlugin.ts @@ -13,7 +13,9 @@ export default class LayerStylePlugin implements ILayerPlugin { layer.updateLayerConfig({}); const { autoFit } = layer.getLayerConfig(); if (autoFit) { - layer.fitBounds(); + setTimeout(() => { + layer.fitBounds(); + }, 100); } }); } diff --git a/packages/react/package.json b/packages/react/package.json index 7a4cc08bfc..5629cc3f05 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -27,7 +27,9 @@ "@antv/l7": "^2.0.34", "@antv/l7-maps": "^2.0.34", "@babel/runtime": "^7.7.7", - "load-styles": "^2.0.0", + "load-styles": "^2.0.0" + }, + "peerDependencies": { "react": "^16.8.6", "react-dom": "^16.10.2" }, diff --git a/packages/react/src/component/AMapScene.tsx b/packages/react/src/component/AMapScene.tsx index 6a753e07e3..b1576dc949 100644 --- a/packages/react/src/component/AMapScene.tsx +++ b/packages/react/src/component/AMapScene.tsx @@ -1,7 +1,7 @@ import { IMapConfig, ISceneConfig, Scene } from '@antv/l7'; // @ts-ignore // tslint:disable-next-line:no-submodule-imports -import GaodeMap from '@antv/l7-maps/lib/amap'; +import { GaodeMap } from '@antv/l7-maps'; import React, { createElement, createRef, useEffect, useState } from 'react'; import { SceneContext } from './SceneContext'; interface IMapSceneConig { diff --git a/packages/react/src/component/Control.tsx b/packages/react/src/component/Control.tsx index 776e402a12..b47480034c 100644 --- a/packages/react/src/component/Control.tsx +++ b/packages/react/src/component/Control.tsx @@ -1,9 +1,9 @@ -import { IControl, Logo, PositionType, Scale, Scene, Zoom } from '@antv/l7'; +import { IControl, Logo, PositionName, Scale, Scene, Zoom } from '@antv/l7'; import React, { useEffect, useState } from 'react'; import { useSceneValue } from './SceneContext'; interface IControlProps { type: 'scale' | 'zoom' | 'logo'; - position: PositionType; + position: PositionName; [key: string]: any; } export default React.memo(function MapControl(props: IControlProps) { @@ -15,17 +15,17 @@ export default React.memo(function MapControl(props: IControlProps) { switch (type) { case 'scale': ctr = new Scale({ - position, + position: position || 'bottomright', }); break; case 'zoom': ctr = new Zoom({ - position, + position: position || 'topright', }); break; case 'logo': ctr = new Logo({ - position, + position: position || 'bottomleft', }); } setControl(ctr); diff --git a/packages/react/src/component/LayerAttribute/Layer.tsx b/packages/react/src/component/LayerAttribute/Layer.tsx index ce31428cb6..a34fb3b80c 100644 --- a/packages/react/src/component/LayerAttribute/Layer.tsx +++ b/packages/react/src/component/LayerAttribute/Layer.tsx @@ -103,6 +103,12 @@ export default function BaseLayer(type: string, props: ILayerProps) { } }, [options?.blend]); + // useEffect(() => { + // if (layer && layer.inited && options && options.autoFit === true) { + // layer.fitBounds(); + // } + // }, [options?.autoFit]); + return layer !== null && layer !== undefined ? ( diff --git a/packages/react/src/component/MapboxScene.tsx b/packages/react/src/component/MapboxScene.tsx index e42c79f3a9..5b2fa184b5 100644 --- a/packages/react/src/component/MapboxScene.tsx +++ b/packages/react/src/component/MapboxScene.tsx @@ -1,7 +1,7 @@ import { IMapConfig, ISceneConfig, Scene, Zoom } from '@antv/l7'; // @ts-ignore // tslint:disable-next-line:no-submodule-imports -import Mapbox from '@antv/l7-maps/lib/mapbox'; +import { Mapbox } from '@antv/l7-maps'; import React, { createElement, createRef, useEffect, useState } from 'react'; import { SceneContext } from './SceneContext'; interface IMapSceneConig {