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

Get points layer from new source

Browse Source
dev
Platon Yasev 3 years ago
parent 3ef3fff739
commit 137037a17e
5 changed files with 62 additions and 114 deletions
Show Stats Download Patch File Download Diff File

5
src/Map/MapComponent.jsx
Unescape View File

@ -5,7 +5,6 @@ import { Sidebar } from "../modules/Sidebar/Sidebar";
import { Layers } from "./Layers";
import { MapPopup } from "./Popup";
import { Basemap } from "./Basemap";
import { Legend } from "../modules/Sidebar/Legend";
import { SignOut } from "../SignOut";
import debounce from "lodash.debounce";
@ -87,7 +86,7 @@ export const MapComponent = () => {
}}
dragRotate={false}
ref={mapRef}
interactiveLayerIds={["point3", "point4", "point5"]}
interactiveLayerIds={["points"]}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
@ -109,7 +108,7 @@ export const MapComponent = () => {
<Sidebar />
<Legend />
{/*<Legend />*/}
<SignOut />
</Map>
</div>

109
src/Map/Points.jsx
Unescape View File

@ -1,11 +1,9 @@
import { Layer, Source } from "react-map-gl";
import { pointLayer } from "./layers-config";
import { useLayersVisibility } from "../stores/useLayersVisibility";
import { useActiveTypes } from "../stores/useActiveTypes";
import { useGridSize } from "../stores/useGridSize";
import { useMemo } from "react";
import { useRateExpression } from "./useRateExpression";
import { useModel } from "../stores/useModel";
import { BASE_URL } from "../api";
const usePointSizeScale = () => {
const rate = useRateExpression();
@ -37,35 +35,35 @@ const usePointSizeScale = () => {
};
export const Points = ({ rate: rateRange }) => {
const { gridSize } = useGridSize();
// const { gridSize } = useGridSize();
const { isVisible } = useLayersVisibility();
const { activeTypes } = useActiveTypes();
const rate = useRateExpression();
const sizeScale = usePointSizeScale();
const filter = useMemo(() => {
let result = [
"all",
[">=", rate, rateRange[0]],
["<=", rate, rateRange[1]],
];
if (activeTypes.length) {
result = [
"all",
["in", ["get", "category"], ["literal", activeTypes]],
[">=", rate, rateRange[0]],
["<=", rate, rateRange[1]],
];
}
return result;
}, [rate, rateRange, activeTypes]);
// const { activeTypes } = useActiveTypes();
//
// const rate = useRateExpression();
// const sizeScale = usePointSizeScale();
//
// const filter = useMemo(() => {
// let result = [
// "all",
// [">=", rate, rateRange[0]],
// ["<=", rate, rateRange[1]],
// ];
//
// if (activeTypes.length) {
// result = [
// "all",
// ["in", ["get", "category"], ["literal", activeTypes]],
// [">=", rate, rateRange[0]],
// ["<=", rate, rateRange[1]],
// ];
// }
//
// return result;
// }, [rate, rateRange, activeTypes]);
const paintConfig = {
...pointLayer.paint,
"circle-radius": sizeScale,
// "circle-radius": sizeScale,
};
return (
@ -74,62 +72,19 @@ export const Points = ({ rate: rateRange }) => {
id="point3"
type="vector"
tiles={[
"https://postamates.spatiality.website/martin/public.point3/{z}/{x}/{y}.pbf",
]}
>
<Layer
{...pointLayer}
id={"point3"}
source={"point3"}
source-layer={"public.point3"}
layout={{
...pointLayer.layout,
visibility:
isVisible.points && gridSize === "net_3" ? "visible" : "none",
}}
filter={filter}
paint={paintConfig}
/>
</Source>
<Source
id="point4"
type="vector"
tiles={[
"https://postamates.spatiality.website/martin/public.point4/{z}/{x}/{y}.pbf",
]}
>
<Layer
{...pointLayer}
id={"point4"}
source={"point4"}
source-layer={"public.point4"}
layout={{
...pointLayer.layout,
visibility:
isVisible.points && gridSize === "net_4" ? "visible" : "none",
}}
filter={filter}
paint={paintConfig}
/>
</Source>
<Source
id="point5"
type="vector"
tiles={[
"https://postamates.spatiality.website/martin/public.point5/{z}/{x}/{y}.pbf",
`${BASE_URL}/martin/public.service_placementpoint/{z}/{x}/{y}.pbf`,
]}
>
<Layer
{...pointLayer}
id={"point5"}
source={"point5"}
source-layer={"public.point5"}
id={"points"}
source={"points"}
source-layer={"public.service_placementpoint"}
layout={{
...pointLayer.layout,
visibility:
isVisible.points && gridSize === "net_5" ? "visible" : "none",
visibility: isVisible.points ? "visible" : "none",
}}
filter={filter}
// filter={filter}
paint={paintConfig}
/>
</Source>

23
src/Map/Popup.jsx
Unescape View File

@ -59,6 +59,7 @@ const gridConfig = [
];
export const MapPopup = ({ feature, lat, lng, onClose }) => {
console.log(feature);
const isPoint = feature.geometry.type === "Point";
const config = isPoint ? pointConfig : gridConfig;
const layout = isPoint
@ -75,25 +76,13 @@ export const MapPopup = ({ feature, lat, lng, onClose }) => {
closeOnClick={false}
>
<div>
{config.map((item) => {
const value = item.field ? feature.properties[item.field] : rate;
{Object.entries(feature.properties).map(([key, value]) => {
return (
<Row className={twMerge("p-1")} key={item.field ?? "rate"}>
{item.field === "name" ? (
<Col span={24} className={"font-semibold text-center"}>
{value}
</Col>
) : (
<>
<Col span={layout.keyCol} className={"font-semibold"}>
{item.name}
</Col>
<Col span={layout.valueCol}>
{item.formatter ? item.formatter(value) : value}
<Row className={twMerge("p-1")} key={key}>
<Col className={"font-semibold"} span={15}>
{key}
</Col>
</>
)}
<Col span={9}>{value}</Col>
</Row>
);
})}

31
src/Map/layers-config.js
Unescape View File

@ -16,21 +16,22 @@ export const pointLayer = {
type: "circle",
layout: {},
paint: {
"circle-color": [
"match",
["get", "category"],
"kiosk",
pointColors.kiosk,
"mfc",
pointColors.mfc,
"library",
pointColors.library,
"dk",
pointColors.dk,
"sport",
pointColors.sport,
"black",
],
// "circle-color": [
// "match",
// ["get", "category"],
// "kiosk",
// pointColors.kiosk,
// "mfc",
// pointColors.mfc,
// "library",
// pointColors.library,
// "dk",
// pointColors.dk,
// "sport",
// pointColors.sport,
// "black",
// ],
"circle-color": "#a51eda",
"circle-radius": 4,
"circle-stroke-width": 0.4,
"circle-stroke-color": "#fff",

6
src/modules/Sidebar/Sidebar.jsx
Unescape View File

@ -94,7 +94,7 @@ export const Sidebar = () => {
};
return (
<div className="absolute top-[20px] left-[20px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-40px)] overflow-y-auto z-10">
<div className="absolute top-[20px] left-[20px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100%-40px)] overflow-y-auto z-10">
<div className="space-y-5">
<LayersVisibility />
<RegionSelect />
@ -107,9 +107,13 @@ export const Sidebar = () => {
className={"mt-2"}
onClick={handleExport}
loading={isExporting}
disabled={true}
>
Экспорт данных
</Button>
<Button type="primary" block className={"mt-2"} disabled={true}>
Взять в работу
</Button>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save