52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
import { mapArrs } from "@/store/map";
|
||
import MapUtlTow from "./mapUtilTow";
|
||
|
||
export default function MapContainerTow() {
|
||
let [amap, setmaps] = useState<any>(null);
|
||
useEffect(() => {
|
||
loadMaps();
|
||
return () => {
|
||
amap?.destroy();
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
const loadMaps = async () => {
|
||
const Amap = await AMapLoader.load({
|
||
key: "d58999d072ed7e5897d3900a769cfda0", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: ["AMap.Scale", "AMap.MoveAnimation", "AMap.Weather"],
|
||
});
|
||
|
||
amap = new Amap.Map("containerTow", {
|
||
viewMode: "2D", // 是否为3D地图模式
|
||
zoom: 17, // 初始化地图级别
|
||
center: [103.87940594787575, 30.502048008027348], // 初始化地图中心点位置
|
||
mapStyle: "amap://styles/darkblue",
|
||
resizeEnable: true,
|
||
});
|
||
const polygon = new Amap.Polygon({
|
||
map: amap,
|
||
path: mapArrs,
|
||
strokeColor: "red", //线颜色
|
||
strokeOpacity: 0.8, //线透明度
|
||
strokeWeight: 2, //线宽
|
||
fillColor: "#85b0ec", //填充色
|
||
fillOpacity: 0, //填充透明度
|
||
});
|
||
amap.add(polygon);
|
||
amap.setFitView();
|
||
MapUtlTow.loadMap = Amap;
|
||
MapUtlTow.amap = amap;
|
||
setmaps(amap);
|
||
};
|
||
|
||
|
||
|
||
return (
|
||
<div id="containerTow" style={{ height: "100vh", width: "100%" }}></div>
|
||
);
|
||
}
|