10 changed files with 374 additions and 173 deletions
-
2public/index.html
-
BINsrc/assets/images/equip/home/stop.png
-
122src/components/MapComponets/ParkViewCirMar/index.jsx
-
108src/components/MapComponets/ParkViewCirMar/index.scss
-
16src/components/MapComponets/ParkingViewMarkers/index.jsx
-
6src/components/MapComponets/index.jsx
-
9src/pages/DataAnalysisPrediction/ParkingOverview/Map.jsx
-
22src/pages/DataAnalysisPrediction/ParkingOverview/index.scss
-
246src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
-
16src/pages/FinancialMgm/SettleBill/GeneralBusiness/loadable.jsx
|
After Width: 42 | Height: 34 | Size: 2.0 KiB |
@ -0,0 +1,122 @@ |
|||||
|
import React, { useState, useEffect, useRef } from "react"; |
||||
|
import "./index.scss"; |
||||
|
import mgreen from "@/assets/images/equip/home/mark_green.png"; |
||||
|
import mgred from "@/assets/images/equip/home/mark_red.png"; |
||||
|
import mgyellow from "@/assets/images/equip/home/mark_yellow.png"; |
||||
|
//当前移入点 |
||||
|
|
||||
|
function Markers(props) { |
||||
|
const map = props.__map__; |
||||
|
const { |
||||
|
data = [], |
||||
|
clickCb, // 点击事件 |
||||
|
} = props; |
||||
|
let count = data.length; |
||||
|
var Mapmove = new AMap.Marker({ content: " ", map: map }); |
||||
|
const retext = (val) => { |
||||
|
var str = mgreen; |
||||
|
if (val == 1) { |
||||
|
str = mgred; |
||||
|
} else if (val == 2) { |
||||
|
str = mgyellow; |
||||
|
} |
||||
|
return `<div className="mark_ju"> |
||||
|
<img src='${str}' alt="" /> |
||||
|
</div>`; |
||||
|
}; |
||||
|
|
||||
|
const [massLayer, setMassLayer] = useState(null); // 聚合点 |
||||
|
const massLayerRef = useRef(massLayer); |
||||
|
massLayerRef.current = massLayer; |
||||
|
|
||||
|
// const [CurrenZoom, setCurrenZoom] = useState(sysConfig.map.zoom); |
||||
|
const _renderClusterMarker = (context) => { |
||||
|
var factor = Math.pow(context.count / count, 1 / 18); |
||||
|
var div = document.createElement("div"); |
||||
|
var Hue = 180 - factor * 180; |
||||
|
var bgColor = "hsla(" + Hue + ",100%,50%,0.7)"; |
||||
|
var fontColor = "hsla(" + Hue + ",100%,20%,1)"; |
||||
|
var borderColor = "hsla(" + Hue + ",100%,40%,1)"; |
||||
|
var shadowColor = "hsla(" + Hue + ",100%,50%,1)"; |
||||
|
div.style.backgroundColor = bgColor; |
||||
|
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); |
||||
|
div.style.width = div.style.height = size + "px"; |
||||
|
div.style.border = "solid 1px " + borderColor; |
||||
|
div.style.borderRadius = size / 2 + "px"; |
||||
|
div.style.boxShadow = "0 0 1px " + shadowColor; |
||||
|
div.innerHTML = context.count; |
||||
|
div.style.lineHeight = size + "px"; |
||||
|
div.style.color = fontColor; |
||||
|
div.style.fontSize = "14px"; |
||||
|
div.style.textAlign = "center"; |
||||
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
||||
|
context.marker.setContent(div); |
||||
|
}; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (data.length) { |
||||
|
let _mass = handleLocation(data); // 处理点位数据 |
||||
|
addMarker(_mass); // 添加点位 |
||||
|
} else { |
||||
|
if (massLayerRef.current) { |
||||
|
massLayerRef.current?.setMap(null); |
||||
|
} |
||||
|
} |
||||
|
}, [data]); |
||||
|
|
||||
|
const handleLocation = (arr = []) => { |
||||
|
if (!Array.isArray(arr)) { |
||||
|
console.log("传值必须为数组"); |
||||
|
return false; |
||||
|
} |
||||
|
let object = []; |
||||
|
for (let i = 0; i < arr.length; i++) { |
||||
|
let elem = arr[i]; |
||||
|
if (!parseFloat(elem.latitude) || !parseFloat(elem.longitude)) { |
||||
|
// 经纬度必须有 |
||||
|
continue; |
||||
|
} |
||||
|
let mark = new AMap.Marker({ |
||||
|
position: [parseFloat(elem.longitude), parseFloat(elem.latitude)], |
||||
|
content: retext(elem.type), |
||||
|
name: elem.text, |
||||
|
id: elem.roadId || elem.id, |
||||
|
option: elem, |
||||
|
offset: new AMap.Pixel(-15, -15), |
||||
|
}); |
||||
|
mark.on("click", function (e) { |
||||
|
clickCb(e.target.w.option); |
||||
|
}); |
||||
|
mark.on("mouseover", function (e) { |
||||
|
let data = e.target.w; |
||||
|
// clearTimeout(timer); |
||||
|
Mapmove.setPosition(e.target.getPosition()); |
||||
|
Mapmove.setLabel({ |
||||
|
content: `${data.name} (${data?.option?.userTotal}/${data?.option?.berthTotal})`, |
||||
|
}); |
||||
|
}); |
||||
|
mark.on("mouseout", function () { |
||||
|
Mapmove.setLabel(""); |
||||
|
}); |
||||
|
object.push(mark); |
||||
|
} |
||||
|
return object; |
||||
|
}; |
||||
|
|
||||
|
//聚合点 |
||||
|
const addMarker = (markerArr) => { |
||||
|
if (massLayerRef.current) { |
||||
|
massLayerRef.current?.setMap(null); |
||||
|
} |
||||
|
let cluster = new AMap.MarkerClusterer(map, markerArr, { |
||||
|
renderClusterMarker: _renderClusterMarker, |
||||
|
gridSize: 80, |
||||
|
minClusterSize: 3, |
||||
|
}); |
||||
|
setMassLayer(cluster); |
||||
|
}; |
||||
|
|
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
export default Markers; |
||||
@ -0,0 +1,108 @@ |
|||||
|
.markers-list-box { |
||||
|
width: 300px !important; |
||||
|
|
||||
|
.leaflet-popup-content-wrapper { |
||||
|
padding: 0; |
||||
|
border-radius: 0; |
||||
|
color: #ccddff; |
||||
|
background: #172c4d !important; |
||||
|
} |
||||
|
|
||||
|
.leaflet-popup-content { |
||||
|
margin: 0; |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.leaflet-popup-tip-container { |
||||
|
.leaflet-popup-tip { |
||||
|
background: #172c4d; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.leaflet-popup-close-button { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.marker-list-content { |
||||
|
.marker-list-header { |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
vertical-align: middle; |
||||
|
padding: 0 10px; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
letter-spacing: 1px; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.marker-list { |
||||
|
padding: 10px; |
||||
|
color: var(--color-text); |
||||
|
max-height: 200px; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
|
||||
|
&::-webkit-scrollbar-track-piece { |
||||
|
background-color: transparent; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background-clip: padding-box; |
||||
|
border-radius: 8px; |
||||
|
min-height: 28px; |
||||
|
} |
||||
|
|
||||
|
.marker-list-item { |
||||
|
width: 100%; |
||||
|
height: 24px; |
||||
|
line-height: 24px; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.construction-polygon { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
// .amap-info-window { |
||||
|
// width: 150px; |
||||
|
// background: #fff; |
||||
|
// border-radius: 3px; |
||||
|
// padding: 3px 7px; |
||||
|
// box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5); |
||||
|
// position: relative; |
||||
|
// } |
||||
|
|
||||
|
// .amap-info-sharp { |
||||
|
// position: absolute; |
||||
|
// top: 21px; |
||||
|
// bottom: 0; |
||||
|
// left: 50%; |
||||
|
// margin-left: -8px; |
||||
|
// border-left: 8px solid transparent; |
||||
|
// border-right: 8px solid transparent; |
||||
|
// border-top: 8px solid #fff; |
||||
|
// } |
||||
|
.amap-marker { |
||||
|
.amap-marker-label { |
||||
|
color: #172c4d; |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue