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