docs: 更新双屏案例 (#203)

* docs: 双屏对比方案 * docs: 更新高度
antvis · Dec 8, 2023 · 7c32dd1 · 7c32dd1
1 parent a958bc4
commit 7c32dd1
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 8 deletions.
diff --git a/src/components/SyncScene/demos/default.tsx b/src/components/SyncScene/demos/default.tsx
@@ -2,35 +2,95 @@
  * compact: true
  */
 import type { Scene } from '@antv/l7';
-import { LarkMap, SyncScene } from '@antv/larkmap';
-import React from 'react';
+import { HeatmapLayer, LarkMap, PointLayer, SyncScene } from '@antv/larkmap';
+import { useRequest } from 'ahooks';
+import React, { useMemo } from 'react';
 
 export default () => {
   const [sceneArray, setSceneArray] = React.useState([]);
   const onSceneLoaded = (scene: Scene) => {
     setSceneArray((oldValue) => [...oldValue, scene]);
   };
 
+  const { data } = useRequest(() =>
+    fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then((res) =>
+      res.json(),
+    ),
+  );
+
+  const sourc1 = useMemo(
+    () => ({
+      data: data ?? { type: 'FeatureCollection', features: [] },
+      parser: {
+        type: 'geojson',
+      },
+    }),
+    [data],
+  );
+
+  const sourc2 = useMemo(
+    () => ({
+      data: data ?? { type: 'FeatureCollection', features: [] },
+      parser: {
+        type: 'geojson',
+      },
+      transforms: [
+        {
+          type: 'hexagon',
+          size: 400,
+          field: 'h12',
+          method: 'sum',
+        },
+      ],
+    }),
+    [data],
+  );
+
+  if (!data) return null;
+
   return (
     <div>
-      <div style={{ display: 'flex', flexDirection: 'row', height: '300px' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', height: '600px' }}>
         <LarkMap
           id="baseScene"
           mapType="Gaode"
-          mapOptions={{ style: 'light', center: [120.210792, 30.246026], zoom: 9 }}
+          mapOptions={{
+            style: 'light',
+            center: [114.07737552216226, 22.542656745583486],
+            rotation: 90,
+            zoom: 12.47985,
+          }}
           onSceneLoaded={onSceneLoaded}
           style={{ flex: 1 }}
         >
-          <h2 style={{ position: 'absolute', left: '10px' }}>地图1</h2>
+          <h2 style={{ position: 'absolute', left: '10px' }}>方案 1</h2>
+          <PointLayer
+            source={sourc1}
+            size={{ field: 'h12', value: [2, 5] }}
+            shape="circle"
+            color={{
+              field: 'h12',
+              value: ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E'].reverse(),
+            }}
+          />
         </LarkMap>
         <SyncScene scenes={sceneArray} />
         <LarkMap
           id="baseScene2"
-          mapOptions={{ style: 'dark', center: [120.210792, 30.246026], zoom: 9 }}
+          mapOptions={{ style: 'light', center: [120.210792, 30.246026], rotation: 90, zoom: 12.47985 }}
           onSceneLoaded={onSceneLoaded}
           style={{ flex: 1 }}
         >
-          <h2 style={{ position: 'absolute', left: '10px' }}>地图2</h2>
+          <h2 style={{ position: 'absolute', left: '10px' }}>方案 2</h2>
+          <HeatmapLayer
+            source={sourc2}
+            shape={'hexagon'}
+            style={{ coverage: 0.8, angle: 0 }}
+            color={{
+              field: 'sum',
+              value: ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E'].reverse(),
+            }}
+          />
         </LarkMap>
       </div>
     </div>

diff --git a/src/components/SyncScene/demos/zoomGap.tsx b/src/components/SyncScene/demos/zoomGap.tsx
@@ -20,7 +20,7 @@ export default () => {
   return (
     <div>
       设置zoomGap： <input onChange={changeHandler} />
-      <div style={{ display: 'flex', flexDirection: 'row', height: '300px' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', height: '600px' }}>
         <SyncScene scenes={sceneArray} options={{ zoomGap: zoomGap }} />
         <LarkMap
           id="gapScene"