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
-
197src/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
-
33src/pages/InRoadMgm/PersonMgm/PersonInfo/loadable.jsx
-
2src/pages/InRoadMgm/RoadMgm/AddRoad/loadable.jsx
-
113src/pages/InRoadMgm/RoadMgm/ConfigRoad/loadable.jsx
-
30src/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
-
34src/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