add map
This commit is contained in:
parent
8a7b183c7c
commit
63fbef3ca7
|
|
@ -8,6 +8,7 @@
|
|||
"name": "ball_admin",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@babel/core": "^7.16.0",
|
||||
"@craco/craco": "^6.4.5",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
|
|
@ -58,6 +59,7 @@
|
|||
"postcss-preset-env": "^7.0.1",
|
||||
"prompts": "^2.4.2",
|
||||
"react": "^18.2.0",
|
||||
"react-amap": "^1.2.8",
|
||||
"react-app-polyfill": "^3.0.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
@ -85,6 +87,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
|
||||
"integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
|
||||
},
|
||||
"node_modules/@amap/amap-jsapi-loader": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
|
||||
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
|
||||
|
|
@ -18831,6 +18838,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-amap": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/react-amap/-/react-amap-1.2.8.tgz",
|
||||
"integrity": "sha512-uHPEUXti+CcwFyCeqGGqR0ACnXJA9D8S/lQYal9AG3XEOrwkaOFbWUavrvXxjcfAclROIWg8uKxzlRpMQnkHFg=="
|
||||
},
|
||||
"node_modules/react-app-polyfill": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
||||
|
|
@ -31830,6 +31842,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
|
||||
"integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
|
||||
},
|
||||
"@amap/amap-jsapi-loader": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
|
||||
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
|
||||
},
|
||||
"@ampproject/remapping": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
|
||||
|
|
@ -45627,6 +45644,11 @@
|
|||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-amap": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/react-amap/-/react-amap-1.2.8.tgz",
|
||||
"integrity": "sha512-uHPEUXti+CcwFyCeqGGqR0ACnXJA9D8S/lQYal9AG3XEOrwkaOFbWUavrvXxjcfAclROIWg8uKxzlRpMQnkHFg=="
|
||||
},
|
||||
"react-app-polyfill": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@babel/core": "^7.16.0",
|
||||
"@craco/craco": "^6.4.5",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
"postcss-preset-env": "^7.0.1",
|
||||
"prompts": "^2.4.2",
|
||||
"react": "^18.2.0",
|
||||
"react-amap": "^1.2.8",
|
||||
"react-app-polyfill": "^3.0.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
export default function MapContainer() {
|
||||
let [amap, setmaps] = useState<any>(null);
|
||||
useEffect(() => {
|
||||
loadMaps();
|
||||
return () => {
|
||||
amap?.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadMaps = async () => {
|
||||
const Amap = await AMapLoader.load({
|
||||
key: "d58999d072ed7e5897d3900a769cfda0", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.Scale"],
|
||||
});
|
||||
amap = new Amap.Map("container", {
|
||||
viewMode: "2D", // 是否为3D地图模式
|
||||
zoom: 11, // 初始化地图级别
|
||||
center: [103.55, 30.34], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
setmaps(amap);
|
||||
addMaket(Amap);
|
||||
};
|
||||
const addMaket = (m) => {
|
||||
const marker = new m.Marker({
|
||||
position: new m.LngLat(103.55, 30.34),
|
||||
title: "黄水",
|
||||
});
|
||||
//将创建的点标记添加到已有的地图实例：
|
||||
amap.add(marker);
|
||||
};
|
||||
|
||||
return <div id="container" style={{ height: "100vh" }}></div>;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.container{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -2,17 +2,61 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: blue;
|
||||
position: relative;
|
||||
.centerbox {
|
||||
.map_container_t{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
line-height: 200px;
|
||||
height: 80px;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(270deg, rgba(7, 99, 78, 0) 0%, rgba(7, 99, 78, 0.0826) 32%, rgba(41, 173, 150, 0.16) 63%, rgba(91, 255, 234, 0.35) 100%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.map_container_l{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 80px;
|
||||
bottom: 10px;
|
||||
width: 15%;
|
||||
bottom: 80px;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
background: rgba(37, 52, 70, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.map_container_r{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 80px;
|
||||
bottom: 80px;
|
||||
width: 15%;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
background: rgba(37, 52, 70, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.map_container_b{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background: rgba(37, 52, 70, 0.4);
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
.bottom_content{
|
||||
display: inline-block;
|
||||
padding-top: 15px;
|
||||
>span{
|
||||
background: linear-gradient(180deg, rgba(0, 193, 153, 0.1) 0%, rgba(0, 239, 151, 0.8) 100%);
|
||||
padding: 5px 10px ;
|
||||
color: #fff;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
import { observer } from "mobx-react";
|
||||
import "./home.less"
|
||||
import "./home.less";
|
||||
import MapContainer from "@/components/map/MapComponent";
|
||||
const Home = observer(() => {
|
||||
return (
|
||||
<div className="contents_center">
|
||||
|
||||
<div className="map_container_t"></div>
|
||||
<div className="map_container_l"></div>
|
||||
<MapContainer />
|
||||
<div className="map_container_r"></div>
|
||||
<div className="map_container_b">
|
||||
<div className="bottom_content">
|
||||
<span>民兵调度</span>
|
||||
<span>装备调度</span>
|
||||
<span>应急连线</span>
|
||||
<span>应急预案</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
|
|
|
|||
Loading…
Reference in New Issue