TRUNK
/
postnet-front
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add working point icon

Browse Source
dev
Platon Yasev 3 years ago
parent 54d26bdf85
commit 08f12d9ec7
9 changed files with 93 additions and 20 deletions
Show Stats Download Patch File Download Diff File

18
src/Map/Layers/FilteredWorkingPoints.jsx
Unescape View File

@ -1,5 +1,8 @@
import { Layer } from "react-map-gl";
import { workingPointLayer } from "./layers-config";
import {
workingPointBackgroundLayer,
workingPointSymbolLayer,
} from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { STATUSES } from "../../config";
import { useRegionFilterExpression } from "./useRegionFilterExpression";
@ -50,11 +53,22 @@ export const FilteredWorkingPoints = () => {
return (
<>
<Layer
{...workingPointLayer}
{...workingPointBackgroundLayer}
id={LAYER_IDS.filteredWorkingBackground}
source={"points"}
source-layer={"public.service_placementpoint"}
layout={{
visibility: isVisible[LAYER_IDS.filteredWorking] ? "visible" : "none",
}}
filter={filter}
/>
<Layer
{...workingPointSymbolLayer}
id={LAYER_IDS.filteredWorking}
source={"points"}
source-layer={"public.service_placementpoint"}
layout={{
...workingPointSymbolLayer.layout,
visibility: isVisible[LAYER_IDS.filteredWorking] ? "visible" : "none",
}}
filter={filter}

18
src/Map/Layers/WorkingPoints.jsx
Unescape View File

@ -1,5 +1,8 @@
import { Layer } from "react-map-gl";
import { workingPointLayer } from "./layers-config";
import {
workingPointBackgroundLayer,
workingPointSymbolLayer,
} from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { MODES, STATUSES } from "../../config";
import { useRegionFilterExpression } from "./useRegionFilterExpression";
@ -31,11 +34,22 @@ export const WorkingPoints = () => {
return (
<>
<Layer
{...workingPointLayer}
{...workingPointBackgroundLayer}
id={LAYER_IDS.workingBackground}
source={"points"}
source-layer={"public.service_placementpoint"}
layout={{
visibility: isVisible[LAYER_IDS.working] ? "visible" : "none",
}}
filter={getFilter()}
/>
<Layer
{...workingPointSymbolLayer}
id={LAYER_IDS.working}
source={"points"}
source-layer={"public.service_placementpoint"}
layout={{
...workingPointSymbolLayer.layout,
visibility: isVisible[LAYER_IDS.working] ? "visible" : "none",
}}
filter={getFilter()}

2
src/Map/Layers/constants.js
Unescape View File

@ -4,7 +4,9 @@ export const LAYER_IDS = {
"initial-unmatch": "initial-unmatch-points",
approve: "approve-points",
working: "working-points",
workingBackground: "working-points-bg",
filteredWorking: "filtered-working-points",
filteredWorkingBackground: "filtered-working-points-bg",
cancelled: "cancelled-points",
atd: "atd",
pvz: "pvz",

13
src/Map/Layers/layers-config.js
Unescape View File

@ -56,7 +56,18 @@ export const unmatchInitialPointLayer = getPointConfig(
UNMATCH_POINT_SIZE
);
export const approvePointLayer = getPointConfig(APPROVE_COLOR);
export const workingPointLayer = getPointConfig(WORKING_COLOR);
export const workingPointSymbolLayer = {
type: "symbol",
layout: {
"icon-image": "logo",
"icon-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 9, 0.3, 13, 0.5],
},
paint: {
"icon-color": "#E63941",
},
};
export const workingPointBackgroundLayer = { ...getPointConfig("#FFF", 10) };
export const cancelledPointLayer = getPointConfig(CANCELLED_COLOR);
export const pvzPointLayer = getPointConfig(PVZ_COLOR);
export const otherPostamatesLayer = getPointConfig(OTHER_POSTAMATES_COLOR);

24
src/Map/Legend.jsx
Unescape View File

@ -8,14 +8,20 @@ import {
PVZ_COLOR,
WORKING_COLOR,
} from "./Layers/layers-config";
import { Logo } from "../icons/Logo.jsx";
const LegendPointItem = ({ color, name }) => {
return (
<div className="flex gap-2 items-center">
<span
className="rounded-xl w-3 h-3 inline-block"
style={{ backgroundColor: color }}
/>
{color ? (
<span
className="rounded-xl w-3 h-3 inline-block"
style={{ backgroundColor: color }}
/>
) : (
<Logo width={12} height={12} fill="#E63941" />
)}
<span>{name}</span>
</div>
);
@ -70,10 +76,7 @@ export function Legend() {
name="Согласование-установка"
color={APPROVE_COLOR}
/>
<LegendPointItem
name="Работающие постаматы"
color={WORKING_COLOR}
/>
<LegendPointItem name="Работающие постаматы" />
<LegendPointItem
name="Отмененные локации"
color={CANCELLED_COLOR}
@ -82,10 +85,7 @@ export function Legend() {
)}
{mode === MODES.WORKING && (
<>
<LegendPointItem
name="Работающие постаматы"
color={WORKING_COLOR}
/>
<LegendPointItem name="Работающие постаматы" />
</>
)}
</div>

12
src/Map/MapComponent.jsx
Unescape View File

@ -20,6 +20,7 @@ import { twMerge } from "tailwind-merge";
import { useLayersVisibility } from "../stores/useLayersVisibility";
import { LAYER_IDS } from "./Layers/constants";
import { Header } from "./Header";
import { icons } from "../icons/icons-config";
export const MapComponent = () => {
const mapRef = useRef(null);
@ -136,6 +137,17 @@ export const MapComponent = () => {
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onLoad={() => {
icons.map((icon) => {
const img = new Image(
icon.size?.width || 24,
icon.size?.height || 24
);
img.onload = () =>
mapRef.current.addImage(icon.name, img, { sdf: true });
img.src = icon.url;
});
}}
id="map"
>
{popup && (

17
src/assets/logo.svg
Unescape View File

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<g>
<polygon fill="#3B555E"
points="19.6,24 21.4,24 22.5,23.9 23,23.8 23.5,23.4 23.8,22.9 24,22.3 24,20.4 24,1.9 23.9,1.4 23.6,0.8
23.3,0.4 22.9,0.1 22.3,0 14.2,0 8.9,0 11.2,4.6 19.5,4.5 19.6,4.5 "
/>
<polygon fill="#E63941"
points="13.6,6.4 17.7,6.4 16.2,9.4 14.1,14.2 12.3,18.4 11.7,18.4 9.8,14.5 6.8,8.8 4.5,4.5 4.7,23.9 1.7,24
1,23.8 0.5,23.2 0.2,22.7 0,22.1 0,1.8 0.1,1.3 0.4,0.8 0.8,0.4 1.1,0.2 1.4,0.1 2,0.1 7,0.1 11.9,10.6 "
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 697 B

6
src/icons/Logo.jsx
Unescape View File

@ -1,4 +1,4 @@
export const Logo = ({ width = 40, height = 40 }) => {
export const Logo = ({ width = 40, height = 40, fill }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -8,12 +8,12 @@ export const Logo = ({ width = 40, height = 40 }) => {
>
<g>
<polygon
style={{ fill: "#3B555E" }}
style={{ fill: fill ?? "#3B555E" }}
points="19.6,24 21.4,24 22.5,23.9 23,23.8 23.5,23.4 23.8,22.9 24,22.3 24,20.4 24,1.9 23.9,1.4 23.6,0.8
23.3,0.4 22.9,0.1 22.3,0 14.2,0 8.9,0 11.2,4.6 19.5,4.5 19.6,4.5 "
/>
<polygon
style={{ fill: "#E63941" }}
style={{ fill: fill ?? "#E63941" }}
points="13.6,6.4 17.7,6.4 16.2,9.4 14.1,14.2 12.3,18.4 11.7,18.4 9.8,14.5 6.8,8.8 4.5,4.5 4.7,23.9 1.7,24
1,23.8 0.5,23.2 0.2,22.7 0,22.1 0,1.8 0.1,1.3 0.4,0.8 0.8,0.4 1.1,0.2 1.4,0.1 2,0.1 7,0.1 11.9,10.6 "
/>

3
src/icons/icons-config.js
Unescape View File

@ -0,0 +1,3 @@
import logo from "../assets/logo.svg";
export const icons = [{ name: "logo", url: logo }];
Write Preview
Loading…
Cancel
Save