下面代码中，注释的部分是我之间创建地图的方法，可以正常创建地图，未注释的部分是按照上面封装的方法，前者地图正常加载，封装后地图不正常创建了，咋回事，没报错，但是地图容器canvas没有创建，代码如下：
import Map from "
../
../
../
components/sdk/extendArcgis/index";
import { useEffect, useRef } from "react";
import DynamicArcGISMap from "
../
../
../
components/mapManager/ArcGISMap";
export const MapView
= () => {
// const mapDiv
= useRef<HTMLDivElement>
(null
);
// useEffect
(() => {
// // 确保容器元素存在
// if
(!mapDiv
.current
) {
// return;
// }
// const map
= new Map
.CreateMap
({
// container: mapDiv
.current,
// center: [116
.397428, 39
.90923],
// zoom: 10,
// scale: 577791,
// }
);
// console
.log
(map
);
// return
() => {
// // 销毁地图和视图，防止内存泄漏
// map
.appConfig
.activeView
.destroy
();
// map
.appConfig
.map
.destroy
();
// console
.log
("Map resources cleaned up
."
);
// };
// }, []
);
// return
(
// <>
// <div ref
={mapDiv} style
={{ height: "100%", width: "100%" }}></div>
// </>
//
);
return
(
<div>
<DynamicArcGISMap
mapId
="main-map"
options
={{ center: [116
.397428, 39
.90923], scale: 577791 }}
/>
</div>
);
};
然后下面封装的代码我也都展示出来如下：
//
components/DynamicArcGISMap
.tsx
import { useRef, useEffect } from "react";
import { mapManager } from "
./mapManager";
import type { DynamicArcGISMapProps } from "
./ArcGISMapProps";
const DynamicArcGISMap: React
.FC<DynamicArcGISMapProps>
= ({
mapId,
style
= { width: "100%", height: "100%" },
options,
onCreated,
onDestroy,
}
) => {
const containerRef
= useRef<HTMLDivElement>
(null
);
useEffect
(() => {
const container
= containerRef
.current;
if
(!container
) return;
options
.container
= containerRef
.current;
// 创建地图（唯一 id）
console
.log
("options", options
);
const { map
Object }
= mapManager
.createMap
(mapId, options
);
console
.log
("map
Object", map
Object);
onCreated?
.(map
Object);
// 清理时销毁地图
return
() => {
mapManager
.destroyMap
(mapId
);
onDestroy?
.();
};
}, [mapId]
); // 注意：依赖 mapId，切换 id 会重建地图
return
(
<>
<div ref
={containerRef} style
={style} />
</>
);
};
export default DynamicArcGISMap;
// services/MapManager
.ts
import MapInit from "
../sdk/extendArcgis/index";
interface MapInstance {
map
Object: any;
}
interface mapOptions {
[
key: string]: any;
}
class MapManager {
private instances
= new Map<string, MapInstance>
();
// 创建新地图
createMap
(mapId: string, options: mapOptions
) {
if
(this
.instances
.has
(mapId
)) {
console
.warn
(`Map with id "${mapId}" already exists
. Destroy it first
.`
);
return this
.instances
.get
(mapId
)!;
}
console
.log
(mapId, options
);
const map
Object = new MapInit
.CreateMap
(options
);
const instance
= { map
Object };
this
.instances
.set
(options
.id, instance
);
return instance;
}
// 获取已有地图
getMap
(id: string
) {
return this
.instances
.get
(id
) || null;
}
// 销毁地图
destroyMap
(id: string
) {
const instance
= this
.instances
.get
(id
);
if
(instance
) {
instance
.map
Object.appConfig
.activeView
.destroy
();
instance
.map
Object.appConfig
.map
.destroy
();
this
.instances
.delete
(id
);
}
}
// 获取所有地图 ID
getIds
() {
return Array
.from
(this
.instances
.keys());
}
// 清空所有（慎用）
destroyAll
() {
this
.instances
.forEach((inst
) => inst
.map
Object.appConfig
.activeView
.destroy
());
this
.instances
.clear
();
}
}
// 单例导出
export const mapManager
= new MapManager
();
export type { MapInstance };
本文介绍了一种使用Node.js遍历指定目录下所有子目录的方法，并收集这些子目录中特定配置文件的路径。
扫一扫
1399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
