From 376c22b9412b07fd4073cdb967ec4df1ed709720 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Mon, 9 Dec 2024 17:34:54 +0800 Subject: [PATCH] feat: map support update (#51) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: marker,polyline 支持更新 * docs: 修改一些描述信息和配置 * chore: setting * Update settings.json * Create strange-turtles-allow.md --------- Co-authored-by: 象数 Co-authored-by: lvisei --- .changeset/strange-turtles-allow.md | 5 ++++ src/Map/Component/MapView.tsx | 20 +++++++++++++++ src/Map/Component/Marker.tsx | 33 ++++++++++++++++++++++++ src/Map/Component/Polyline.tsx | 30 ++++++++++++++++++++++ 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, 117 insertions(+), 32 deletions(-) create mode 100644 .changeset/strange-turtles-allow.md 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/.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 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..8505f02 --- /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([]); + 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..e42130a --- /dev/null +++ b/src/Map/Component/Polyline.tsx @@ -0,0 +1,30 @@ +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([]); + const removeLayers = () => { + layers.forEach((item) => { + scene.removeLayer(item); + }); + }; + useEffect(() => { + if (!props.polyline) return; + const lineLayers = setPolyline(props.polyline || []); + removeLayers(); + 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, 'data'>; const Map: FC = (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 = (props) => { {...mapConfig} onSceneLoaded={onSceneLoaded} > + {/* 设置地图状态 */} + + {/* 初始化图片，并加载 Marker */} + + {/* 初始化线，并加载 Polyline */} + + {children} ); 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); - } };