6 changed files with 186 additions and 43 deletions
-
120src/components/Map/Apimap/index.jsx
-
20src/components/Map/Apimap/index.scss
-
4src/components/TableModule/index.jsx
-
10src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx
-
67src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
-
8src/pages/SystemMgm/AdminMgm/loadable.jsx
@ -1,33 +1,95 @@ |
|||||
import React, { useEffect } from 'react'; |
|
||||
// import AMapLoader from '@amap/amap-jsapi-loader'; |
|
||||
|
|
||||
const Apimap = () => { |
|
||||
|
import React, { useState, useEffect, useRef, useLayoutEffect } from "react";import L from "leaflet"; |
||||
|
import "leaflet/dist/leaflet.css"; |
||||
|
import "leaflet.chinatmsproviders"; |
||||
|
import ajax from "@/services"; |
||||
|
|
||||
|
function ModalMap(props) { |
||||
|
const { |
||||
|
setLnglat = () => {}, |
||||
|
getLntLat = () => {}, |
||||
|
searchLnglatValue = [], |
||||
|
} = props; |
||||
|
const mapConfig = { |
||||
|
center: sysConfig.map.center, |
||||
|
zoom: sysConfig.map.zoom, |
||||
|
zooms: sysConfig.map.zooms, |
||||
|
maxZoom: sysConfig.map.zooms[1], |
||||
|
minZoom: sysConfig.map.zooms[0], |
||||
|
mapTileHost: sysConfig.map.mapTileHost, |
||||
|
zoomOffset: sysConfig.map.zoomOffset, |
||||
|
mapTileType: sysConfig.map.mapTileType, |
||||
|
}; |
||||
|
const [map, setMap] = useState(null); |
||||
|
const mapRef = useRef(null); |
||||
|
const initMap = () => { |
||||
|
// console.log(mapConfig); |
||||
|
// const _map = L.map("mapid", { |
||||
|
// scrollWheelZoom: true, |
||||
|
// zoomSnap: 1, |
||||
|
// crs: L.CRS.EPSG3857, |
||||
|
// }).setView([mapConfig.center[0], mapConfig.center[1]], mapConfig.zoom); |
||||
|
// L.tileLayer("{mapTileHost}/v3/tile?z={z}&x={x}&y={y}", { |
||||
|
// maxZoom: mapConfig.zooms[1], |
||||
|
// minZoom: mapConfig.zooms[0], |
||||
|
// zoomOffset: 0, |
||||
|
// mapTileHost: mapConfig.mapTileHost, |
||||
|
// }).addTo(_map); |
||||
|
// _map.on("click", function (e) { |
||||
|
// clearMarkers(_map); |
||||
|
// L.marker(e.latlng).addTo(_map); |
||||
|
// setLnglat([e.latlng.lng.toFixed(4), e.latlng.lat.toFixed(4)]); |
||||
|
// getLntLat([e.latlng.lng.toFixed(4), e.latlng.lat.toFixed(4)]); |
||||
|
// }); |
||||
|
// _map.invalidateSize(); |
||||
|
// setMap(_map); |
||||
|
// mapRef.current = _map; |
||||
|
let _map = new AMap.Map("mapid", { |
||||
|
resizeEnable: true, |
||||
|
layers: [ |
||||
|
new AMap.TileLayer.Satellite(), |
||||
|
new AMap.TileLayer.RoadNet() |
||||
|
] |
||||
|
}); |
||||
|
_map.setCenter([mapConfig.center[1], mapConfig.center[0]], mapConfig.zoom); |
||||
|
|
||||
|
setMap(_map) |
||||
|
_map.on('click', function(e) { |
||||
|
console.log(e) |
||||
|
// onClick(info) |
||||
|
setLnglat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); |
||||
|
getLntLat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); |
||||
|
}) |
||||
|
mapRef.current = map |
||||
|
}; |
||||
|
function clearMarkers(map) { |
||||
|
map.eachLayer(function (layer) { |
||||
|
if (layer instanceof L.Marker) { |
||||
|
map.removeLayer(layer); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
useEffect(() => { |
useEffect(() => { |
||||
// AMapLoader.load({ |
|
||||
// "key": "71273e067acb371c4a32f4c4c444134d", // 申请好的Web端开发者Key,首次调用 load 时必填 |
|
||||
// "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 |
|
||||
// "plugins": [] //插件列表 |
|
||||
// }).then((AMap) => { |
|
||||
// let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的id |
|
||||
// zoom: 15, //初始化地图层级 |
|
||||
// center: [112.5266, 27.91507] //初始化地图中心点 |
|
||||
// }); |
|
||||
// // 标记 |
|
||||
// let marker = new AMap.Marker({ |
|
||||
// position: [112.5266, 27.91507] // 基点位置 |
|
||||
// }); |
|
||||
// // 地图添加标记 |
|
||||
// amap.add(marker); |
|
||||
// }).catch(e => { |
|
||||
// console.log(e); |
|
||||
// }) |
|
||||
|
|
||||
|
|
||||
|
initMap(); |
||||
|
return () => { |
||||
|
if (mapRef.current) { |
||||
|
mapRef.current.remove(); |
||||
|
} |
||||
|
}; |
||||
}, []); |
}, []); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (searchLnglatValue.length === 0) return; |
||||
|
mapRef.current.setView(searchLnglatValue, 13); |
||||
|
}, [searchLnglatValue]); |
||||
|
|
||||
return ( |
return ( |
||||
<div id="mapContainer" style={{ width: '100%', height: '400px' }}></div> |
|
||||
|
<div |
||||
|
id="mapid" |
||||
|
className="map" |
||||
|
style={{ |
||||
|
height: "100%", |
||||
|
width: "100%", |
||||
|
}} |
||||
|
></div> |
||||
); |
); |
||||
}; |
|
||||
|
|
||||
export default Apimap; |
|
||||
|
} |
||||
|
export default ModalMap; |
@ -0,0 +1,20 @@ |
|||||
|
.home_div,#map{ |
||||
|
padding: 0px; |
||||
|
margin: 0px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.map-title{ |
||||
|
position:absolute; |
||||
|
z-index: 1; |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
background-color: rgba(27, 25, 27, 0.884); |
||||
|
|
||||
|
} |
||||
|
h3{ |
||||
|
position:absolute; |
||||
|
left: 10px; |
||||
|
z-index: 2; |
||||
|
color: white; |
||||
|
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue