修改地图打点样式
parent
738fe32ee4
commit
68340db129
|
|
@ -14,7 +14,6 @@ function renderMarker({ rzWarning, rzState }, { width }) {
|
|||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/anzhidian2.png" alt="" className="panel-icon" />
|
||||
<div style="width:1px;height:50px;background:red;margin-left:9px"></div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { zindexmarker } from '../zindex';
|
||||
import { getHeightPx } from '../utils';
|
||||
|
||||
const {
|
||||
css,
|
||||
physics,
|
||||
} = window.popmotionXL;
|
||||
|
||||
|
||||
function renderMarker({ status }, { width, zoom }) {
|
||||
let color1, color2;
|
||||
|
||||
color1 = '#0f0';
|
||||
color2 = '#17abe3';
|
||||
if(status===0){
|
||||
return `
|
||||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw2.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}else if( status ===2 ){
|
||||
return `
|
||||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}else{
|
||||
return `
|
||||
<div style="position:relative">
|
||||
<svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
|
||||
</svg>
|
||||
<img width="${width+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png" alt="" className="panel-icon" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function HdswMarker({ data, dispatch, setting, zoom }) {
|
||||
const [ show, setShow ] = useState(true)
|
||||
const [ status, setStatus ] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 20;
|
||||
|
||||
const placeholder = document.getElementById(`marker_hdsw_${data.id}`);
|
||||
if (!placeholder) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let svgMarker = ''
|
||||
const hdswDataItem = setting?.filter(o=>o.stcd===data.stcd)//当前Marker对应的data
|
||||
if( Array.isArray(setting) && Array.isArray(hdswDataItem) && hdswDataItem.length === 0){
|
||||
//不显示
|
||||
placeholder.innerHTML = '';
|
||||
setShow(false)
|
||||
return
|
||||
}else{
|
||||
setShow(true)
|
||||
//显示
|
||||
if(setting===null){
|
||||
svgMarker = renderMarker(data, { width: width });
|
||||
setStatus(data?.status||0)
|
||||
}else{
|
||||
svgMarker = renderMarker(hdswDataItem[0], { width: width });
|
||||
setStatus(hdswDataItem[0]?.status||0)
|
||||
}
|
||||
}
|
||||
placeholder.innerHTML = svgMarker;
|
||||
|
||||
return () => {
|
||||
placeholder.innerHTML = '';
|
||||
}
|
||||
}, [setting]);
|
||||
|
||||
const showPop = () => {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
id: data.id,
|
||||
type: 'hdsw',
|
||||
data,
|
||||
lgtd: data.lgtd,
|
||||
lttd: data.lttd,
|
||||
elev: data.elev,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className='markerBoxDp'
|
||||
style={{
|
||||
zIndex: zindexmarker.hdsw
|
||||
}}
|
||||
>
|
||||
<div
|
||||
id={`marker_hdsw_${data.id}`}
|
||||
style={{
|
||||
transformOrigin: 'bottom center',
|
||||
transform: 'translate(-50%,0) scale(1.5)',
|
||||
lineHeight: 1,
|
||||
cursor:'pointer',
|
||||
zIndex: zindexmarker.hdsw
|
||||
}}
|
||||
onClick={showPop}
|
||||
>
|
||||
</div>
|
||||
{
|
||||
zoom > 14 && (
|
||||
<div
|
||||
className='markerLabel'
|
||||
style={{
|
||||
display: show?'block':'none',
|
||||
transform: 'translate(20px,-7px)',
|
||||
}}
|
||||
>
|
||||
{data?.stnm}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div
|
||||
className='markerLine'
|
||||
style={{
|
||||
display: show?'block':'none',
|
||||
transform: 'translate(-50%,0)',
|
||||
background: `linear-gradient(to top, rgb(${status===0?'170, 168, 168':'1,2,3'}, 1), rgba(${status===0?'170, 168, 168':'1,2,3'}, 0.2))`,//#77c3f5
|
||||
height: `${getHeightPx(zoom)}px`
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HdswMarker);
|
||||
|
|
@ -42,7 +42,7 @@ function WYMarker({ data, dispatch, setting, zoom }) {
|
|||
const [ show, setShow ] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const width = 16;
|
||||
const width = 12;
|
||||
|
||||
const placeholder = document.getElementById(`marker_weiyi_${data.id}`);
|
||||
if (!placeholder) {
|
||||
|
|
|
|||
|
|
@ -37,4 +37,29 @@
|
|||
-0.8px 0.8px 0.3px white,
|
||||
-0.8px 0 0.3px white;
|
||||
}
|
||||
|
||||
.markerBoxDp{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
|
||||
.markerLine{
|
||||
width: 2px;
|
||||
// height: 100px;
|
||||
transition: height 0.1s ease
|
||||
}
|
||||
.markerLabel{
|
||||
position: absolute;
|
||||
white-space:nowrap;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 2px 8px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
background: #142947;
|
||||
border: 1px solid #295cad;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -38,3 +38,19 @@ export function getElev(val: string) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//配置不同Marker的elev
|
||||
export function getHeightPx(zoom: number) {
|
||||
const maxH = 170
|
||||
const minH = 0
|
||||
|
||||
|
||||
if(zoom>20){
|
||||
return maxH
|
||||
}else if(zoom<=20 && zoom>14){
|
||||
return (zoom - 14) / (20 - 14) * (maxH - minH) + minH
|
||||
}else{
|
||||
return minH
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue