From c21960d9716325bd92cdc4e98c8831fdc259c842 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B1=A1=E6=95=B0?= <zhengxue.lzx@antgroup.com>
Date: Mon, 9 Dec 2024 16:55:25 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20marker,polyline=20=E6=94=AF?=
=?UTF-8?q?=E6=8C=81=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.vscode/settings.json | 8 ++++++-
src/Map/Component/MapView.tsx | 20 +++++++++++++++++
src/Map/Component/Marker.tsx | 33 ++++++++++++++++++++++++++++
src/Map/Component/Polyline.tsx | 31 ++++++++++++++++++++++++++
src/Map/Component/index.tsx | 5 +++++
src/Map/index.tsx | 40 ++++++++++++----------------------
src/utils/map/context.ts | 3 +++
src/utils/map/view.ts | 13 ++++++-----
8 files changed, 120 insertions(+), 33 deletions(-)
create mode 100644 src/Map/Component/MapView.tsx
create mode 100644 src/Map/Component/Marker.tsx
create mode 100644 src/Map/Component/Polyline.tsx
create mode 100644 src/Map/Component/index.tsx
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d465499..90194a8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,11 @@
// typescript auto-format settings
"typescript.tsdk": "node_modules/typescript/lib",
"editor.defaultFormatter": "esbenp.prettier-vscode",
- "editor.formatOnSave": true
+ "editor.formatOnSave": true,
+ "[typescript]": {
+ "editor.defaultFormatter": "vscode.typescript-language-features"
+ },
+ "[typescriptreact]": {
+ "editor.defaultFormatter": "vscode.typescript-language-features"
+ }
}
diff --git a/src/Map/Component/MapView.tsx b/src/Map/Component/MapView.tsx
new file mode 100644
index 0000000..cf77bcc
--- /dev/null
+++ b/src/Map/Component/MapView.tsx
@@ -0,0 +1,20 @@
+import { useScene } from '@antv/larkmap';
+import { useEffect } from 'react';
+import type { Map } from '../../types/map';
+import { fitBounds, setMapStatus, setMapView } from '../../utils/map';
+
+// 更新地图视野
+export default (props: Map) => {
+ const scene = useScene();
+ useEffect(() => {
+ setMapView(props, scene);
+ }, []);
+ useEffect(() => {
+ setMapStatus(props, scene);
+ }, [props.enableRotate, props.enableScroll, props.enableZoom]);
+ useEffect(() => {
+ fitBounds(props, scene);
+ }, [props.includePoints, props.markers, props.polyline, props.includePadding]);
+
+ return null;
+};
diff --git a/src/Map/Component/Marker.tsx b/src/Map/Component/Marker.tsx
new file mode 100644
index 0000000..6692ec4
--- /dev/null
+++ b/src/Map/Component/Marker.tsx
@@ -0,0 +1,33 @@
+import type { ILayer } from '@antv/l7';
+import { useScene } from '@antv/larkmap';
+import { useEffect, useState } from 'react';
+import type { Map } from '../../types/map';
+import { setMapContext, setMarkers } from '../../utils/map';
+// 更新地图视野
+export default (props: Map) => {
+ const scene = useScene();
+ const [layers, setLayers] = useState<ILayer[]>([]);
+ const removeLayers = () => {
+ layers.forEach((item) => {
+ scene.removeLayer(item);
+ });
+ };
+ useEffect(() => {
+ if (!props.markers) return;
+ // 异步调用
+ setMapContext(props, scene)?.then(() => {
+ // 初始化资源
+ const markerLayer = setMarkers(props.markers || []);
+ removeLayers();
+ markerLayer.forEach((item) => {
+ scene.addLayer(item);
+ });
+ setLayers(markerLayer);
+ });
+ return () => {
+ removeLayers();
+ };
+ }, [props.markers]);
+
+ return null;
+};
diff --git a/src/Map/Component/Polyline.tsx b/src/Map/Component/Polyline.tsx
new file mode 100644
index 0000000..0d20834
--- /dev/null
+++ b/src/Map/Component/Polyline.tsx
@@ -0,0 +1,31 @@
+import type { ILayer } from '@antv/l7';
+import { useScene } from '@antv/larkmap';
+import { useEffect, useState } from 'react';
+import type { Map } from '../../types/map';
+import { setPolyline } from '../../utils/map';
+// 更新地图视野
+export default (props: Map) => {
+ const scene = useScene();
+ const [layers, setLayers] = useState<ILayer[]>([]);
+ const removeLayers = () => {
+ layers.forEach((item) => {
+ scene.removeLayer(item);
+ });
+ };
+ useEffect(() => {
+ if (!props.polyline) return;
+ const lineLayers = setPolyline(props.polyline || []);
+ removeLayers();
+ console.log('lineLayers', lineLayers);
+ lineLayers.forEach((item) => {
+ scene.addLayer(item);
+ });
+ setLayers(lineLayers);
+
+ return () => {
+ removeLayers();
+ };
+ }, [props.polyline]);
+
+ return null;
+};
diff --git a/src/Map/Component/index.tsx b/src/Map/Component/index.tsx
new file mode 100644
index 0000000..29eef7d
--- /dev/null
+++ b/src/Map/Component/index.tsx
@@ -0,0 +1,5 @@
+import MapView from './MapView';
+import Marker from './Marker';
+import Polyline from './Polyline';
+
+export { MapView, Marker, Polyline };
diff --git a/src/Map/index.tsx b/src/Map/index.tsx
index 2bf0821..441e153 100644
--- a/src/Map/index.tsx
+++ b/src/Map/index.tsx
@@ -1,37 +1,18 @@
-import type { ILayer, Scene } from '@antv/l7';
import { LarkMap } from '@antv/larkmap';
-import React, { type FC } from 'react';
+import React, { useMemo, type FC } from 'react';
import type { BaseMapProps } from '../types';
-import { formatMapStyle, setMapContext, setMapView, setMarkers, setPolyline } from '../utils/map';
+import { formatMapStyle } from '../utils/map';
+import { MapView, Marker, Polyline } from './Component/';
export type MapProps = Omit<BaseMapProps<any>, 'data'>;
const Map: FC<MapProps> = (props) => {
const { className, containerStyle, children } = props;
- const allLayers: ILayer[] = [];
- const mapConfig = formatMapStyle(props);
-
- const onSceneLoaded = async (scene: Scene) => {
- // 初始地图视野
- setMapView(props, scene);
- // 初始化地图资源和状态
- await setMapContext(props, scene);
-
- // 添加线图层
- if (props.polyline) {
- const polylineLayer = setPolyline(props.polyline || []);
- allLayers.push(...polylineLayer);
- }
-
- // 添加标记
- if (props.markers) {
- const markerLayer = setMarkers(props.markers || []);
- allLayers.push(...markerLayer);
+ const mapConfig = useMemo(() => formatMapStyle(props), [props]);
+ const onSceneLoaded = async () => {
+ if (props.onInitComplete) {
+ props.onInitComplete();
}
-
- allLayers.forEach((item) => {
- scene.addLayer(item);
- });
};
return (
@@ -41,6 +22,13 @@ const Map: FC<MapProps> = (props) => {
{...mapConfig}
onSceneLoaded={onSceneLoaded}
>
+ {/* 设置地图状态 */}
+ <MapView {...props} />
+ {/* 初始化图片，并加载 Marker */}
+ <Marker {...props} />
+ {/* 初始化线，并加载 Polyline */}
+ <Polyline {...props} />
+
{children}
</LarkMap>
);
diff --git a/src/utils/map/context.ts b/src/utils/map/context.ts
index 956551c..d3eb817 100644
--- a/src/utils/map/context.ts
+++ b/src/utils/map/context.ts
@@ -14,6 +14,9 @@ export function setMapContext(props: Map, scene: Scene) {
return Promise.all(
Array.from(icons.values()).map(async (url: string) => {
const id = urlToMarkerId(url);
+ if (scene.hasImage(id)) {
+ return;
+ }
return await scene.addImage(id, url);
}),
);
diff --git a/src/utils/map/view.ts b/src/utils/map/view.ts
index 2eddd22..eb716d0 100644
--- a/src/utils/map/view.ts
+++ b/src/utils/map/view.ts
@@ -32,7 +32,11 @@ function fitIncludePoints(
}
export const setMapView = (props: Map, scene: Scene) => {
- // 单个点,多个点
+ fitBounds(props, scene);
+ setMapStatus(props, scene);
+};
+
+export const fitBounds = (props: Map, scene: Scene) => {
if (props.includePoints) {
fitIncludePoints(props.includePoints, scene, props.includePadding);
} else {
@@ -53,7 +57,9 @@ export const setMapView = (props: Map, scene: Scene) => {
fitIncludePoints(points, scene, props.includePadding);
}
}
+};
+export const setMapStatus = (props: Map, scene: Scene) => {
if (props.enableZoom !== undefined) {
scene.setMapStatus({
zoomEnable: props.enableZoom,
@@ -69,9 +75,4 @@ export const setMapView = (props: Map, scene: Scene) => {
dragEnable: props.enableScroll,
});
}
-
- if (props.onInitComplete) {
- scene.off('loaded', props.onInitComplete);
- scene.on('loaded', props.onInitComplete);
- }
};
From 022d3390313cdf2caa7edbc775e0fadae9b328de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B1=A1=E6=95=B0?= <zhengxue.lzx@antgroup.com>
Date: Mon, 9 Dec 2024 17:20:28 +0800
Subject: [PATCH 2/5] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9=E4=B8=80?=
=?UTF-8?q?=E4=BA=9B=E6=8F=8F=E8=BF=B0=E4=BF=A1=E6=81=AF=E5=92=8C=E9=85=8D?=
=?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.vscode/settings.json | 3 ---
src/Map/Component/Marker.tsx | 2 +-
src/Map/Component/Polyline.tsx | 3 +--
3 files changed, 2 insertions(+), 6 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 90194a8..7b2d6ab 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,9 +8,6 @@
"typescript.tsdk": "node_modules/typescript/lib",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
- "[typescript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
- },
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
diff --git a/src/Map/Component/Marker.tsx b/src/Map/Component/Marker.tsx
index 6692ec4..8505f02 100644
--- a/src/Map/Component/Marker.tsx
+++ b/src/Map/Component/Marker.tsx
@@ -3,7 +3,7 @@ import { useScene } from '@antv/larkmap';
import { useEffect, useState } from 'react';
import type { Map } from '../../types/map';
import { setMapContext, setMarkers } from '../../utils/map';
-// 更新地图视野
+// 渲染标记点
export default (props: Map) => {
const scene = useScene();
const [layers, setLayers] = useState<ILayer[]>([]);
diff --git a/src/Map/Component/Polyline.tsx b/src/Map/Component/Polyline.tsx
index 0d20834..e42130a 100644
--- a/src/Map/Component/Polyline.tsx
+++ b/src/Map/Component/Polyline.tsx
@@ -3,7 +3,7 @@ import { useScene } from '@antv/larkmap';
import { useEffect, useState } from 'react';
import type { Map } from '../../types/map';
import { setPolyline } from '../../utils/map';
-// 更新地图视野
+// 渲染线图层
export default (props: Map) => {
const scene = useScene();
const [layers, setLayers] = useState<ILayer[]>([]);
@@ -16,7 +16,6 @@ export default (props: Map) => {
if (!props.polyline) return;
const lineLayers = setPolyline(props.polyline || []);
removeLayers();
- console.log('lineLayers', lineLayers);
lineLayers.forEach((item) => {
scene.addLayer(item);
});
From e258a24f726acdd5e1a98e2d5072a115a974e6b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B1=A1=E6=95=B0?= <zhengxue.lzx@antgroup.com>
Date: Mon, 9 Dec 2024 17:25:47 +0800
Subject: [PATCH 3/5] chore: setting
---
.vscode/settings.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7b2d6ab..bce9908 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,7 +8,7 @@
"typescript.tsdk": "node_modules/typescript/lib",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
- "[typescriptreact]": {
+ "[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
}
From d657d744b512e278f024f64fe9e6dc978674fe04 Mon Sep 17 00:00:00 2001
From: lvisei <yunji.me@outlook.com>
Date: Mon, 9 Dec 2024 17:29:12 +0800
Subject: [PATCH 4/5] Update settings.json
---
.vscode/settings.json | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index bce9908..d465499 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,8 +7,5 @@
// typescript auto-format settings
"typescript.tsdk": "node_modules/typescript/lib",
"editor.defaultFormatter": "esbenp.prettier-vscode",
- "editor.formatOnSave": true,
- "[typescript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
- }
+ "editor.formatOnSave": true
}
From 69734c8b0f19c6b71280c6bb1fe143d93c77c10a Mon Sep 17 00:00:00 2001
From: lvisei <yunji.me@outlook.com>
Date: Mon, 9 Dec 2024 17:30:18 +0800
Subject: [PATCH 5/5] Create strange-turtles-allow.md
---
.changeset/strange-turtles-allow.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 .changeset/strange-turtles-allow.md
diff --git a/.changeset/strange-turtles-allow.md b/.changeset/strange-turtles-allow.md
new file mode 100644
index 0000000..684716d
--- /dev/null
+++ b/.changeset/strange-turtles-allow.md
@@ -0,0 +1,5 @@
+---
+'@antv/gpt-vis': patch
+---
+
+feat: map support update