fix: 修复地图状态更新 (#8)

* fix: 修复地图状态更新 * chore: 深度对比使用 ahooks * fix: 修复单独实例情况下 mapOptions 没有默认值 * fix: 修复图层摧毁时 * chore: 优化图层组件重复渲染 * chore: update to 0.0.1-alpha.3
antvis · Jun 8, 2022 · e64644d · e64644d
1 parent e653c35
commit e64644d
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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 (
     <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
-      <BubbleLayer
-        id="myBubbleLayer"
-        source={source}
-        autoFit={false}
-        radius={40}
-        fillColor="#0f9960"
-        opacity={0.4}
-        strokeColor="blue"
-        lineWidth={2}
-        state={state}
-        label={{
-          field: 't',
-          visible: true,
-          style: { fill: '#454d64', fontSize: 18, stroke: '#fff', strokeWidth: 2, textOffset: [0, -20] },
-        }}
-      />
+      <BubbleLayer {...layerOptions} id="myBubbleLayer" source={source} />
       <MyComponent />
     </LarkMap>
   );

diff --git 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<LarkMapRefAttributes, LarkMapProps>((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<LarkMapRefAttributes, LarkMapProps>((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
@@ -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 (
     <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
-      <BubbleLayer
-        source={source}
-        autoFit={true}
-        radius={40}
-        fillColor="#0f9960"
-        opacity={0.4}
-        strokeColor="blue"
-        lineWidth={2}
-        state={state}
-        label={{
-          field: 't',
-          visible: true,
-          style: { fill: '#454d64', fontSize: 18, stroke: '#fff', strokeWidth: 2, textOffset: [0, -20] },
-        }}
-      />
+      <BubbleLayer {...layerOptions} source={source} />
     </LarkMap>
   );
 };
diff --git 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<L7BubbleLayer, BubbleLayerProps>((props, ref) => {
-  const layerRef = useCreateLayer<L7BubbleLayer, BubbleLayerProps>(L7BubbleLayer, props);
+export const BubbleLayer = memo(
+  forwardRef<L7BubbleLayer, BubbleLayerProps>((props, ref) => {
+    const layerRef = useCreateLayer<L7BubbleLayer, BubbleLayerProps>(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
@@ -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 (
     <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
-      <ChoroplethLayer
-        source={source}
-        autoFit={true}
-        fillColor="rgb(239,243,255)"
-        opacity={0.3}
-        strokeColor="blue"
-        state={state}
-        label={{
-          field: 'name',
-          visible: true,
-          style: { fill: 'blue', fontSize: 12, stroke: '#fff', strokeWidth: 2 },
-        }}
-      />
+      <ChoroplethLayer {...layerOptions} source={source} />
     </LarkMap>
   );
 };
diff --git 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<L7ChoroplethLayer, ChoroplethLayerProps>((props, ref) => {
-  const layerRef = useCreateLayer<L7ChoroplethLayer, ChoroplethLayerProps>(L7ChoroplethLayer, props);
+export const ChoroplethLayer = memo(
+  forwardRef<L7ChoroplethLayer, ChoroplethLayerProps>((props, ref) => {
+    const layerRef = useCreateLayer<L7ChoroplethLayer, ChoroplethLayerProps>(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
@@ -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 = <L extends Layer, C extends LayerCommonProps<L> &
 ) => {
   const layerManager = useLayerManager();
   const layerRef = useRef<L>();
-
-  const { onCreated } = config;
+  const { onCreated, source, ...options } = config;
 
   // 生成图层
   // 添加到 layerManager 自动加载到 scene
@@ -44,27 +43,30 @@ export const useCreateLayer = <L extends Layer, C extends LayerCommonProps<L> &
     }
   }
 
-  // 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
@@ -1 +1 @@
-export default '0.0.1-alpha.2';
+export default '0.0.1-alpha.3';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export default '0.0.1-alpha.2';
		export default '0.0.1-alpha.3';