forked from ddrilling/asb_cloud_front
Добавлены новые иконки на страницу карты
This commit is contained in:
goodmice
parent
b3954c1091
commit
dde32f737a
49
src/images/pages/deposit/ClusterMapIcon.tsx
Normal file
49
src/images/pages/deposit/ClusterMapIcon.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { memo, useMemo } from 'react'
|
||||||
|
|
||||||
|
import '@styles/components/icons/cluster-map-icon.less'
|
||||||
|
|
||||||
|
export type ClusterMapIconProps = {
|
||||||
|
width?: number | string
|
||||||
|
height?: number | string
|
||||||
|
count?: number
|
||||||
|
showBadge?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultWidth = 65
|
||||||
|
const defaultHeight = 73
|
||||||
|
const ratio = defaultWidth / defaultHeight
|
||||||
|
|
||||||
|
export const ClusterMapIcon = memo<ClusterMapIconProps>(({ width, height, count, showBadge }) => {
|
||||||
|
const { w, h } = useMemo(() => {
|
||||||
|
const hasW = typeof width !== 'undefined' && width !== null
|
||||||
|
const hasH = typeof height !== 'undefined' && height !== null
|
||||||
|
const out: Record<string, string | number> = { w: defaultWidth, h: defaultHeight }
|
||||||
|
if (hasW) out.w = width
|
||||||
|
else if (typeof height === 'number') out.w = height / ratio
|
||||||
|
if (hasH) out.h = height
|
||||||
|
else if (typeof width === 'number') out.h = width * ratio
|
||||||
|
return out
|
||||||
|
}, [width, height])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg className={'dd-cluster-map-icon'} overflow={'visible'} width={w} height={h} viewBox={'0 0 65 73'} xmlns={'http://www.w3.org/2000/svg'} fill={'white'}>
|
||||||
|
<path d={'M6 51.0897V21.9103L32.5 6.2024L59 21.9103V51.0897L32.5 66.7976L6 51.0897Z'} />
|
||||||
|
<g fill-rule={'evenodd'} clip-rule={'evenodd'}>
|
||||||
|
<path d={'M6 21.9103V51.0897L32.5 66.7976L59 51.0897V21.9103L32.5 6.2024L6 21.9103ZM59.6088 50.7288L59.6073 50.7297L59.6088 50.7288ZM5.39116 22.2712L5.39262 22.2703L5.39116 22.2712ZM0 51.7966V21.2034C0 19.5226 0.88635 17.9666 2.33174 17.1098L30.0756 0.664577C31.5705 -0.221525 33.4295 -0.221526 34.9244 0.664576L62.6683 17.1098C64.1137 17.9666 65 19.5227 65 21.2034V51.7966C65 53.4774 64.1137 55.0334 62.6683 55.8902L34.9244 72.3354C33.4295 73.2215 31.5705 73.2215 30.0756 72.3354L2.33174 55.8902C0.88635 55.0334 0 53.4774 0 51.7966Z'} />
|
||||||
|
<g fill={'#306AFD'}>
|
||||||
|
<path d={'M12 26.8557V46.1444C12 47.2041 12.5591 48.1852 13.4708 48.7254L30.9708 59.094C31.9137 59.6527 33.0863 59.6527 34.0292 59.094L51.5292 48.7254C52.4409 48.1852 53 47.2041 53 46.1444V26.8557C53 25.7959 52.4409 24.8148 51.5292 24.2747L34.0292 13.9061C33.0863 13.3474 31.9137 13.3474 30.9708 13.9061L13.4708 24.2747C12.5591 24.8148 12 25.7959 12 26.8557Z'} />
|
||||||
|
<path d={'M18 28.5652V44.4348L32.5 53.026L47 44.4348V28.5652L32.5 19.9741L18 28.5652ZM34.0292 19.0681C34.0286 19.0684 34.028 19.0688 34.0274 19.0691L34.0292 19.0681ZM12 46.1444V26.8557C12 25.7959 12.5591 24.8148 13.4708 24.2747L30.9708 13.9061C31.9137 13.3474 33.0863 13.3474 34.0292 13.9061L51.5292 24.2747C52.4409 24.8148 53 25.7959 53 26.8557V46.1444C53 47.2041 52.4409 48.1852 51.5292 48.7254L34.0292 59.094C33.0863 59.6527 31.9137 59.6527 30.9708 59.094L13.4708 48.7254C12.5591 48.1852 12 47.2041 12 46.1444Z'} />
|
||||||
|
<path d={'M6 21.9103V51.0897L32.5 66.7976L59 51.0897V21.9103L32.5 6.2024L6 21.9103ZM59.6088 50.7288L59.6073 50.7297L59.6088 50.7288ZM5.39116 22.2712L5.39262 22.2703L5.39116 22.2712ZM0 51.7966V21.2034C0 19.5226 0.88635 17.9666 2.33174 17.1098L30.0756 0.664577C31.5705 -0.221525 33.4295 -0.221526 34.9244 0.664576L62.6683 17.1098C64.1137 17.9666 65 19.5227 65 21.2034V51.7966C65 53.4774 64.1137 55.0334 62.6683 55.8902L34.9244 72.3354C33.4295 73.2215 31.5705 73.2215 30.0756 72.3354L2.33174 55.8902C0.88635 55.0334 0 53.4774 0 51.7966Z'} />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
{typeof count === 'number' && (
|
||||||
|
<text className={'dd-cluster-map-icon-count'} textAnchor={'middle'} dominantBaseline={'middle'} style={{ fontSize: 22 }} x={'50%'} y={'50%'}>{count}</text>
|
||||||
|
)}
|
||||||
|
{showBadge && (
|
||||||
|
<circle className={'dd-cluster-map-icon-badge'} cx={59} cy={20} r={10.5} fill={'#FF2323'} stroke={'white'} stroke-width={'3'} />
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default ClusterMapIcon
|
||||||
3
src/images/pages/deposit/MapPointer.svg
Normal file
3
src/images/pages/deposit/MapPointer.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.00016 0.833252C3.70375 0.833252 0.208496 4.3285 0.208496 8.62492C0.208496 10.4748 0.872621 12.27 2.08445 13.6886C2.22287 13.8458 5.4885 17.5565 6.57933 18.5964C6.97762 18.9764 7.48866 19.1666 8.00016 19.1666C8.51166 19.1666 9.0227 18.9764 9.42145 18.5964C10.6897 17.3869 13.7866 13.8366 13.9223 13.6808C15.1277 12.27 15.7918 10.4748 15.7918 8.62492C15.7918 4.3285 12.2966 0.833252 8.00016 0.833252ZM8.00016 10.9166C6.7347 10.9166 5.7085 9.89038 5.7085 8.62492C5.7085 7.35946 6.7347 6.33325 8.00016 6.33325C9.26562 6.33325 10.2918 7.35946 10.2918 8.62492C10.2918 9.89038 9.26562 10.9166 8.00016 10.9166Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 729 B |
10
src/images/pages/deposit/WellMapIcon.svg
Normal file
10
src/images/pages/deposit/WellMapIcon.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="44" height="49" viewBox="0 0 44 49" fill="white" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M39.9385 12.0881V21.7588L30.1374 33.5092L22 43.4487L13.8626 33.5092L4.06154 21.7588V12.0881L12.3728 4.06154H31.6272L39.9385 12.0881Z"/>
|
||||||
|
<g fill-rule="evenodd" clip-rule="evenodd">
|
||||||
|
<path d="M13.8626 33.5092L22 43.4487L30.1374 33.5092L39.9385 21.7588V12.0881L31.6272 4.06154H12.3728L4.06154 12.0881V21.7588L13.8626 33.5092ZM33.2683 36.0965L24.4356 46.8852C23.1516 48.4536 20.8484 48.4536 19.5644 46.8852L10.7317 36.0965L0.803482 24.1936C0.285669 23.5728 0 22.7739 0 21.9467V11.8619C0 10.9077 0.379815 9.99739 1.04667 9.35338L9.80913 0.890989C10.4026 0.317847 11.1777 0 11.982 0H32.018C32.8223 0 33.5974 0.317846 34.1909 0.890988L42.9533 9.35337C43.6202 9.99739 44 10.9077 44 11.8619V21.9467C44 22.7739 43.7143 23.5728 43.1965 24.1936L33.2683 36.0965Z"/>
|
||||||
|
<g fill="#306AFD">
|
||||||
|
<path d="M8.12354 14.532V20.5563C8.12354 21.0505 8.30373 21.5277 8.63035 21.8985L14.8928 29.0088L20.4642 35.4536C21.2741 36.3905 22.7268 36.3905 23.5368 35.4536L29.1081 29.0088L35.3706 21.8985C35.6972 21.5277 35.8774 21.0505 35.8774 20.5563V14.532C35.8774 13.962 35.6378 13.4182 35.2172 13.0335L29.6901 7.97841C29.3157 7.63604 28.8268 7.44617 28.3195 7.44617H15.6814C15.1741 7.44617 14.6852 7.63604 14.3108 7.97841L8.78374 13.0335C8.36311 13.4182 8.12354 13.962 8.12354 14.532Z"/>
|
||||||
|
<path d="M13.8626 33.5092L22 43.4487L30.1374 33.5092L39.9385 21.7588V12.0881L31.6272 4.06154H12.3728L4.06154 12.0881V21.7588L13.8626 33.5092ZM33.2683 36.0965L24.4356 46.8852C23.1516 48.4536 20.8484 48.4536 19.5644 46.8852L10.7317 36.0965L0.803482 24.1936C0.285669 23.5728 0 22.7739 0 21.9467V11.8619C0 10.9077 0.379815 9.99739 1.04667 9.35338L9.80913 0.890989C10.4026 0.317847 11.1777 0 11.982 0H32.018C32.8223 0 33.5974 0.317846 34.1909 0.890988L42.9533 9.35337C43.6202 9.99739 44 10.9077 44 11.8619V21.9467C44 22.7739 43.7143 23.5728 43.1965 24.1936L33.2683 36.0965Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
6
src/styles/components/icons/cluster-map-icon.less
Normal file
6
src/styles/components/icons/cluster-map-icon.less
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.dd-cluster-map-icon {
|
||||||
|
& .dd-cluster-map-icon-count {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user