From 7c32dd1b4d863bc5c54e9e9ea550f068160210fc Mon Sep 17 00:00:00 2001
From: lvisei <yunji.me@outlook.com>
Date: Fri, 8 Dec 2023 20:18:23 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=8F=8C=E5=B1=8F?=
 =?UTF-8?q?=E6=A1=88=E4=BE=8B=20(#203)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: 双屏对比方案

* docs: 更新高度
---
 src/components/SyncScene/demos/default.tsx | 74 ++++++++++++++++++++--
 src/components/SyncScene/demos/zoomGap.tsx |  2 +-
 2 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/components/SyncScene/demos/default.tsx b/src/components/SyncScene/demos/default.tsx
index 9bb2e8ef..0813029b 100644
--- a/src/components/SyncScene/demos/default.tsx
+++ b/src/components/SyncScene/demos/default.tsx
@@ -2,8 +2,9 @@
  * 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([]);
@@ -11,26 +12,85 @@ export default () => {
     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
index df04bd62..dfff5f5d 100644
--- 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"