From e64644dfd15fce5cbcf9b7c1e7e28211a22a2f48 Mon Sep 17 00:00:00 2001 From: lvisei Date: Wed, 8 Jun 2022 15:03:43 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=9B=B4=E6=96=B0=20(#8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复地图状态更新 * chore: 深度对比使用 ahooks * fix: 修复单独实例情况下 mapOptions 没有默认值 * fix: 修复图层摧毁时 * chore: 优化图层组件重复渲染 * chore: update to 0.0.1-alpha.3 --- .umirc.ts | 1 + package.json | 4 +- .../LarkMap/hooks/use-layer/demos/default.tsx | 36 +++++++--------- src/components/LarkMap/index.tsx | 42 +++++++++++++++++++ .../Layers/BubbleLayer/demos/default.tsx | 35 +++++++--------- src/components/Layers/BubbleLayer/index.tsx | 14 ++++--- .../Layers/ChoroplethLayer/demos/default.tsx | 33 +++++---------- .../Layers/ChoroplethLayer/index.tsx | 14 ++++--- .../Layers/hooks/use-create-layer.ts | 30 ++++++------- src/version.ts | 2 +- 10 files changed, 118 insertions(+), 93 deletions(-) diff --git a/.umirc.ts b/.umirc.ts index c60780cd..eea4031e 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -35,6 +35,7 @@ export default defineConfig({ hash: true, // 同步 gh-page CNAME 文件 copy: isProduction ? ['docs/CNAME'] : [], + devtool: isProduction ? false : 'eval', externals: { react: 'window.React', 'react-dom': 'window.ReactDOM', diff --git a/package.json b/package.json index fcf1491b..b70446a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/larkmap", - "version": "0.0.1-alpha.2", + "version": "0.0.1-alpha.3", "description": "A React toolkit for geospatial visualization based on L7", "license": "MIT", "main": "lib/index.js", @@ -32,7 +32,7 @@ "version": "node scripts/sync-version" }, "dependencies": { - "@antv/l7-composite-layers": "^0.0.1-alpha.5", + "@antv/l7-composite-layers": "^0.0.1-alpha.6", "ahooks": "^3.3.13", "classnames": "^2.3.1" }, diff --git a/src/components/LarkMap/hooks/use-layer/demos/default.tsx b/src/components/LarkMap/hooks/use-layer/demos/default.tsx index 6a9da6df..1c26ec1e 100644 --- a/src/components/LarkMap/hooks/use-layer/demos/default.tsx +++ b/src/components/LarkMap/hooks/use-layer/demos/default.tsx @@ -8,11 +8,20 @@ const source = { ], parser: { type: 'json', x: 'lng', y: 'lat' }, }; -const state = { - active: { - strokeColor: 'red', - lineWidth: 2, - lineOpacity: 1, +const layerOptions = { + autoFit: false, + radius: 40, + fillColor: '#0f9960', + opacity: 0.4, + strokeColor: 'blue', + lineWidth: 2, + state: { + active: { strokeColor: 'red', lineWidth: 2, lineOpacity: 1 }, + }, + label: { + field: 't', + visible: true, + style: { fill: '#454d64', fontSize: 18, stroke: '#fff', strokeWidth: 2, textOffset: [0, -20] as [number, number] }, }, }; @@ -29,22 +38,7 @@ const MyComponent = () => { export default () => { return ( - + ); diff --git a/src/components/LarkMap/index.tsx b/src/components/LarkMap/index.tsx index cf03990a..e9728a31 100644 --- a/src/components/LarkMap/index.tsx +++ b/src/components/LarkMap/index.tsx @@ -1,4 +1,5 @@ import { Scene } from '@antv/l7'; +import { useDeepCompareEffect } from 'ahooks'; import classNames from 'classnames'; import type { CSSProperties } from 'react'; import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; @@ -57,10 +58,50 @@ export const LarkMap = forwardRef((props, re scene.destroy(); } }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useImperativeHandle(ref, () => ({ getScene: () => sceneInstance, getMap: () => sceneInstance.map }), [sceneInstance]); + // 更新地图样式 + useEffect(() => { + if (sceneInstance && mapOptions.style) { + sceneInstance.setMapStyle(mapOptions.style); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mapOptions.style]); + + // 更新地图层级 + useEffect(() => { + if (sceneInstance && mapOptions.zoom) { + sceneInstance.setZoom(mapOptions.zoom); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mapOptions.zoom]); + + // 更新地图视野中心点 + useDeepCompareEffect(() => { + if (sceneInstance && mapOptions.center) { + sceneInstance.setCenter(mapOptions.center); + } + }, [mapOptions.center]); + + // 更新地图视野倾角 + useEffect(() => { + if (sceneInstance && mapOptions.pitch) { + sceneInstance.setPitch(mapOptions.pitch); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mapOptions.pitch]); + + // 更新地图旋转角度 + useEffect(() => { + if (sceneInstance && mapOptions.rotation) { + sceneInstance.setRotation(mapOptions.rotation); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mapOptions.rotation]); + const styles: CSSProperties = useMemo( () => ({ position: 'relative', @@ -80,4 +121,5 @@ export const LarkMap = forwardRef((props, re LarkMap.defaultProps = { mapType: 'Mapbox', + mapOptions: {}, }; diff --git a/src/components/Layers/BubbleLayer/demos/default.tsx b/src/components/Layers/BubbleLayer/demos/default.tsx index 91fdd155..73373181 100644 --- a/src/components/Layers/BubbleLayer/demos/default.tsx +++ b/src/components/Layers/BubbleLayer/demos/default.tsx @@ -8,32 +8,27 @@ const source = { ], parser: { type: 'json', x: 'lng', y: 'lat' }, }; -const state = { - active: { - strokeColor: 'red', - lineWidth: 2, - lineOpacity: 1, +const layerOptions = { + autoFit: true, + radius: 40, + fillColor: '#0f9960', + opacity: 0.4, + strokeColor: 'blue', + lineWidth: 2, + state: { + active: { strokeColor: 'red', lineWidth: 2, lineOpacity: 1 }, + }, + label: { + field: 't', + visible: true, + style: { fill: '#454d64', fontSize: 18, stroke: '#fff', strokeWidth: 2, textOffset: [0, -20] as [number, number] }, }, }; export default () => { return ( - + ); }; diff --git a/src/components/Layers/BubbleLayer/index.tsx b/src/components/Layers/BubbleLayer/index.tsx index fff2906d..68eda1a0 100644 --- a/src/components/Layers/BubbleLayer/index.tsx +++ b/src/components/Layers/BubbleLayer/index.tsx @@ -1,14 +1,16 @@ import { BubbleLayer as L7BubbleLayer } from '@antv/l7-composite-layers'; -import { forwardRef, useImperativeHandle } from 'react'; +import { forwardRef, memo, useImperativeHandle } from 'react'; import { useCreateLayer } from '../hooks/use-create-layer'; import type { BubbleLayerProps } from './types'; export type { BubbleLayerProps }; -export const BubbleLayer = forwardRef((props, ref) => { - const layerRef = useCreateLayer(L7BubbleLayer, props); +export const BubbleLayer = memo( + forwardRef((props, ref) => { + const layerRef = useCreateLayer(L7BubbleLayer, props); - useImperativeHandle(ref, () => layerRef.current); + useImperativeHandle(ref, () => layerRef.current); - return null; -}); + return null; + }), +); diff --git a/src/components/Layers/ChoroplethLayer/demos/default.tsx b/src/components/Layers/ChoroplethLayer/demos/default.tsx index 3f2566e4..0b977937 100644 --- a/src/components/Layers/ChoroplethLayer/demos/default.tsx +++ b/src/components/Layers/ChoroplethLayer/demos/default.tsx @@ -6,35 +6,22 @@ const source = { data: hangezhouGeoJSON, parser: { type: 'geojson' }, }; -const state = { - active: { - strokeColor: 'green', - lineWidth: 1.5, - lineOpacity: 0.8, - }, - select: { - strokeColor: 'yellow', - lineWidth: 1.5, - lineOpacity: 0.8, +const layerOptions = { + autoFit: true, + fillColor: 'rgb(239,243,255)', + opacity: 0.3, + strokeColor: 'blue', + state: { + active: { strokeColor: 'green', lineWidth: 1.5, lineOpacity: 0.8 }, + select: { strokeColor: 'yellow', lineWidth: 1.5, lineOpacity: 0.8 }, }, + label: { field: 'name', visible: true, style: { fill: 'blue', fontSize: 12, stroke: '#fff', strokeWidth: 2 } }, }; export default () => { return ( - + ); }; diff --git a/src/components/Layers/ChoroplethLayer/index.tsx b/src/components/Layers/ChoroplethLayer/index.tsx index 24057490..67386bbe 100644 --- a/src/components/Layers/ChoroplethLayer/index.tsx +++ b/src/components/Layers/ChoroplethLayer/index.tsx @@ -1,14 +1,16 @@ import { ChoroplethLayer as L7ChoroplethLayer } from '@antv/l7-composite-layers'; -import { forwardRef, useImperativeHandle } from 'react'; +import { forwardRef, memo, useImperativeHandle } from 'react'; import { useCreateLayer } from '../hooks/use-create-layer'; import type { ChoroplethLayerProps } from './types'; export type { ChoroplethLayerProps }; -export const ChoroplethLayer = forwardRef((props, ref) => { - const layerRef = useCreateLayer(L7ChoroplethLayer, props); +export const ChoroplethLayer = memo( + forwardRef((props, ref) => { + const layerRef = useCreateLayer(L7ChoroplethLayer, props); - useImperativeHandle(ref, () => layerRef.current); + useImperativeHandle(ref, () => layerRef.current); - return null; -}); + return null; + }), +); diff --git a/src/components/Layers/hooks/use-create-layer.ts b/src/components/Layers/hooks/use-create-layer.ts index 9f6e7c2e..9244c714 100644 --- a/src/components/Layers/hooks/use-create-layer.ts +++ b/src/components/Layers/hooks/use-create-layer.ts @@ -1,5 +1,5 @@ import { useUpdateEffect } from 'ahooks'; -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; import type { Layer } from 'utils/layer-manager'; import type { LayerCommonProps } from '../../../types/common'; import { useLayerManager } from '../../LarkMap/hooks'; @@ -22,8 +22,7 @@ export const useCreateLayer = & ) => { const layerManager = useLayerManager(); const layerRef = useRef(); - - const { onCreated } = config; + const { onCreated, source, ...options } = config; // 生成图层 // 添加到 layerManager 自动加载到 scene @@ -44,27 +43,30 @@ export const useCreateLayer = & } } - // config 更新时 + // options 更新时 + useUpdateEffect(() => { + if (layerRef.current) { + layerRef.current.update(options); + } + }, [options]); + + // source 更新时 useUpdateEffect(() => { if (layerRef.current) { - layerRef.current.update(config); + layerRef.current.changeData(source); + console.log('changeData: '); } + }, [source]); - // 组件销毁时 + // 组件销毁时 + useEffect(() => { return () => { if (layerRef.current) { layerManager.removeLayer(layerRef.current); layerRef.current = null; } }; - }, [config]); - - // source 更新时 - useUpdateEffect(() => { - if (layerRef.current) { - layerRef.current.changeData(config.source); - } - }, [config.source]); + }, []); return layerRef; }; diff --git a/src/version.ts b/src/version.ts index 6d51bd43..547d04a1 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export default '0.0.1-alpha.2'; +export default '0.0.1-alpha.3';