23 changed files with 600 additions and 324 deletions
-
1package.json
-
184src/components/Map/Apimap/index.jsx
-
1src/components/MapComponets/Marker/index.jsx
-
4src/components/SelectLngLat/index.jsx
-
12src/pages/InRoadMgm/PersonMgm/Attendance/Fence/index.scss
-
141src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx
-
12src/pages/InRoadMgm/PersonMgm/Attendance/ScheduleMgm/index.scss
-
94src/pages/InRoadMgm/PersonMgm/Attendance/ScheduleMgm/loadable.jsx
-
2src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx
-
1src/pages/InRoadMgm/PersonMgm/MesNotification/loadable.jsx
-
12src/pages/InRoadMgm/PersonMgm/PersonInfo/index.scss
-
7src/pages/InRoadMgm/PersonMgm/PersonInfo/loadable.jsx
-
2src/pages/InRoadMgm/RoadMgm/AddRoad/loadable.jsx
-
13src/pages/InRoadMgm/RoadMgm/ConfigRoad/loadable.jsx
-
12src/pages/InRoadMgm/RoadMgm/ParkList/loadable.jsx
-
9src/pages/InRoadMgm/Stuff/CategroyConf/loadable.jsx
-
9src/pages/InRoadMgm/Stuff/ModelConf/loadable.jsx
-
7src/pages/InRoadMgm/Stuff/StuffMgm/index.scss
-
86src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx
-
28src/pages/InRoadMgm/Stuff/StuffStat/loadable.jsx
-
14src/pages/OperationCenter/GeoSignalIgnore/GeoSignalIgnoreAudit/index.scss
-
65src/pages/OperationCenter/GeoSignalIgnore/GeoSignalIgnoreAudit/loadable.jsx
-
2src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
@ -1,95 +1,95 @@ |
|||
import React, { useState, useEffect, useRef, useLayoutEffect } from "react";import L from "leaflet"; |
|||
import "leaflet/dist/leaflet.css"; |
|||
import "leaflet.chinatmsproviders"; |
|||
import ajax from "@/services"; |
|||
// 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); |
|||
// 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(() => { |
|||
initMap(); |
|||
return () => { |
|||
if (mapRef.current) { |
|||
mapRef.current.remove(); |
|||
} |
|||
}; |
|||
}, []); |
|||
useEffect(() => { |
|||
if (searchLnglatValue.length === 0) return; |
|||
mapRef.current.setView(searchLnglatValue, 13); |
|||
}, [searchLnglatValue]); |
|||
// 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(() => { |
|||
// initMap(); |
|||
// return () => { |
|||
// if (mapRef.current) { |
|||
// mapRef.current.remove(); |
|||
// } |
|||
// }; |
|||
// }, []); |
|||
// useEffect(() => { |
|||
// if (searchLnglatValue.length === 0) return; |
|||
// mapRef.current.setView(searchLnglatValue, 13); |
|||
// }, [searchLnglatValue]); |
|||
|
|||
return ( |
|||
<div |
|||
id="mapid" |
|||
className="map" |
|||
style={{ |
|||
height: "100%", |
|||
width: "100%", |
|||
}} |
|||
></div> |
|||
); |
|||
} |
|||
export default ModalMap; |
|||
// return ( |
|||
// <div |
|||
// id="mapid" |
|||
// className="map" |
|||
// style={{ |
|||
// height: "100%", |
|||
// width: "100%", |
|||
// }} |
|||
// ></div> |
|||
// ); |
|||
// } |
|||
// export default ModalMap; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue