8 changed files with 494 additions and 368 deletions
-
238src/components/Map/Apimap/index.jsx
-
393src/components/MapComponets/Marker/index.jsx
-
12src/components/MapComponets/Marker/index.scss
-
41src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx
-
24src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/index.scss
-
138src/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); |
|
||||
|
|
||||
// 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; |
|
||||
|
function ModalMap (props) { |
||||
|
const { |
||||
|
setLnglat = () => { }, |
||||
|
getLntLat = () => { }, |
||||
|
searchLnglatValue = [], |
||||
|
AmapConfig = { fullscreen: false } |
||||
|
} = props; |
||||
|
const [hasInit, setHasInit] = useState(false); // 地图是否已经创建 |
||||
|
|
||||
|
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 () => { |
||||
|
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 { |
.leaflet-popup-content-wrapper { |
||||
border-radius: 0; |
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