From 6244b50c5661cf0b7d1081032b74b1ac607b313c Mon Sep 17 00:00:00 2001
From: yunji <yunji.me@outlook.com>
Date: Mon, 27 Nov 2023 15:35:22 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A4=8D=E7=8E=B0=20IconImage=20Scale?=
 =?UTF-8?q?=20=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../icon-layer/iconImageScale.tsx             | 111 ++++++++++++++++++
 .../icon-layer/index.stories.tsx              |   2 +
 2 files changed, 113 insertions(+)
 create mode 100644 storybook/stories/composite-layers/icon-layer/iconImageScale.tsx

diff --git a/storybook/stories/composite-layers/icon-layer/iconImageScale.tsx b/storybook/stories/composite-layers/icon-layer/iconImageScale.tsx
new file mode 100644
index 000000000..e7db927d8
--- /dev/null
+++ b/storybook/stories/composite-layers/icon-layer/iconImageScale.tsx
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import { Scene, GaodeMap } from '@antv/l7';
+import { IconImageLayer } from '@antv/l7-composite-layers';
+
+class IconImageScale extends Component {
+  public scene: Scene | undefined;
+
+  constructor(props) {
+    super(props);
+  }
+
+  async initMap() {
+    this.scene = new Scene({
+      id: 'container',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+        center: [120.19660949707033, 30.234747338474293],
+      }),
+    });
+    this.scene.on('loaded', () => {
+      fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+        .then((response) => response.json())
+        .then((data) => {
+          const iconLayer = new IconImageLayer({
+            id: 'iconImageLayer1',
+            autoFit: true,
+            source: {
+              data,
+              parser: {
+                type: 'json',
+                x: 'longitude',
+                y: 'latitude',
+              },
+            },
+            iconAtlas: {
+              icon1: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+              icon2: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
+              empty: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EcQZS6JM69EAAAAAAAAAAAAADmJ7AQ/original',
+            },
+            icon: {
+              field: 'name',
+              value: ['icon1', 'icon2'],
+              scale: {
+                type: 'cat',
+                domain: ['新体育广场', '梅岭新村'],
+                unknown: 'empty',
+              },
+            },
+            label: {
+              field: 'name',
+              style: {
+                fill: '#0f0',
+                opacity: 0.7,
+                fontSize: 12,
+                textAnchor: 'top',
+                textOffset: [0, -40],
+                spacing: 1,
+                padding: [5, 5],
+                stroke: '#ffffff',
+                strokeWidth: 0.3,
+                strokeOpacity: 1.0,
+              },
+            },
+          });
+          this.scene && iconLayer.addTo(this.scene);
+
+          setTimeout(() => {
+            iconLayer.update({
+              icon: {
+                field: 'name',
+                value: ['icon1', 'icon2'],
+                scale: {
+                  type: 'cat',
+                  domain: ['半岛花园', '中岚大楼'],
+                  unknown: 'empty',
+                },
+              },
+            });
+            console.log('update');
+          }, 1000 * 5);
+        });
+    });
+  }
+
+  componentDidMount() {
+    this.initMap();
+  }
+
+  componentWillUnmount() {
+    this.scene && this.scene.destroy();
+  }
+
+  render() {
+    return (
+      <div
+        id="container"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      ></div>
+    );
+  }
+}
+
+export default IconImageScale;
diff --git a/storybook/stories/composite-layers/icon-layer/index.stories.tsx b/storybook/stories/composite-layers/icon-layer/index.stories.tsx
index cb6494d15..5877868f4 100644
--- a/storybook/stories/composite-layers/icon-layer/index.stories.tsx
+++ b/storybook/stories/composite-layers/icon-layer/index.stories.tsx
@@ -1,8 +1,10 @@
 import { storiesOf } from '@storybook/react';
 
 import IconImage from './iconImage';
+import IconImageScale from './iconImageScale';
 import IconFont from './IconFont';
 
 storiesOf('复合图层/标注图层', module)
   .add('图片标注', () => <IconImage />)
+  .add('图片自定义映射', () => <IconImageScale />)
   .add('图标标注', () => <IconFont />);