8 changed files with 494 additions and 368 deletions
-
234src/components/Map/Apimap/index.jsx
-
293src/components/MapComponets/Marker/index.jsx
-
12src/components/MapComponets/Marker/index.scss
-
3src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx
-
24src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/index.scss
-
128src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx
-
1src/pages/InRoadMgm/PersonMgm/AuditMgm/AuditConf/loadable.jsx
-
15src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx
@ -1,95 +1,145 @@ |
|||
// 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 = [], |
|||
AmapConfig = { fullscreen: false } |
|||
} = props; |
|||
const [hasInit, setHasInit] = useState(false); // 地图是否已经创建 |
|||
|
|||
// 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]); |
|||
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 = () => { |
|||
let _map = new AMap.Map("map", { |
|||
resizeEnable: true, |
|||
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式 |
|||
viewMode: '2D', //设置地图模式 |
|||
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)]); |
|||
}) |
|||
_map.on('complete', function () { |
|||
AMap.plugin(['AMap.Fullscreen'], function () { |
|||
map.addControl(new AMap.Fullscreen()); |
|||
}); |
|||
}); |
|||
mapRef.current = map |
|||
setHasInit(true); |
|||
}; |
|||
const renderChildren = (map) => { |
|||
return React.Children.map(props.children, (child) => { |
|||
if (child) { |
|||
const cType = child.type; |
|||
/* 针对下面两种组件不注入地图相关属性 |
|||
* 1. 明确声明不需要注入的 |
|||
* 2. DOM 元素 |
|||
*/ |
|||
if (cType.preventAmap || typeof cType === "string") { |
|||
return child; |
|||
} |
|||
return React.cloneElement(child, { |
|||
__map__: map, |
|||
}); |
|||
} |
|||
return child; |
|||
}); |
|||
}; |
|||
function clearMarkers (map) { |
|||
map.eachLayer(function (layer) { |
|||
if (layer instanceof L.Marker) { |
|||
map.removeLayer(layer); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
initMap(); |
|||
|
|||
// return ( |
|||
// <div |
|||
// id="mapid" |
|||
// className="map" |
|||
// style={{ |
|||
// height: "100%", |
|||
// width: "100%", |
|||
// }} |
|||
// ></div> |
|||
// ); |
|||
// } |
|||
// export default ModalMap; |
|||
|
|||
return () => { |
|||
if (mapRef.current) { |
|||
mapRef.current.remove(); |
|||
} |
|||
}; |
|||
}, []); |
|||
// 进入全屏 |
|||
// 获取地图容器元素 |
|||
var mapContainer = document.getElementById('map'); |
|||
function enterFullscreen () { |
|||
if (mapContainer.requestFullscreen) { |
|||
mapContainer.requestFullscreen(); |
|||
} else if (mapContainer.mozRequestFullScreen) { |
|||
mapContainer.mozRequestFullScreen(); |
|||
} else if (mapContainer.webkitRequestFullscreen) { |
|||
mapContainer.webkitRequestFullscreen(); |
|||
} else if (mapContainer.msRequestFullscreen) { |
|||
mapContainer.msRequestFullscreen(); |
|||
} |
|||
} |
|||
// 退出全屏 |
|||
function exitFullscreen () { |
|||
if (document.exitFullscreen) { |
|||
document.exitFullscreen(); |
|||
} else if (document.mozCancelFullScreen) { |
|||
document.mozCancelFullScreen(); |
|||
} else if (document.webkitExitFullscreen) { |
|||
document.webkitExitFullscreen(); |
|||
} else if (document.msExitFullscreen) { |
|||
document.msExitFullscreen(); |
|||
} |
|||
} |
|||
useEffect(() => { |
|||
// 获取地图容器元素 |
|||
if (mapContainer) { |
|||
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { |
|||
// 如果已经全屏，则退出全屏 |
|||
exitFullscreen(); |
|||
} else { |
|||
// 如果不在全屏状态，则进入全屏 |
|||
enterFullscreen(); |
|||
} |
|||
} |
|||
}, [AmapConfig.fullscreen]) |
|||
|
|||
useEffect(() => { |
|||
if (searchLnglatValue.length === 0) return; |
|||
mapRef.current.setView(searchLnglatValue, 13); |
|||
}, [searchLnglatValue]); |
|||
|
|||
return ( |
|||
<div |
|||
className="cc-map" |
|||
id={"map"} |
|||
> |
|||
<div> |
|||
<div id="panel"></div> |
|||
{hasInit ? renderChildren(map) : null} |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
export default ModalMap; |
|||
@ -1,3 +1,15 @@ |
|||
.leaflet-popup-content-wrapper { |
|||
border-radius: 0; |
|||
} |
|||
.custom-marker{ |
|||
width: 20px; |
|||
height: 20px; |
|||
border-radius: 50%; |
|||
background-color: greenyellow; |
|||
} |
|||
.custom-marker1{ |
|||
width: 20px; |
|||
height: 20px; |
|||
border-radius: 50%; |
|||
background-color: red; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue