Dirty display of vector tiles feature properties in Infos.tsx

This commit is contained in:
Eric van der Vlist 2023-01-16 16:16:22 +01:00
parent fa60f5229c
commit cb8e564270
3 changed files with 74 additions and 23 deletions

View File

@ -102,7 +102,7 @@ const textFillSel = new Fill({
});
const trksegStroke = new Stroke({
color: 'blue',
color: [11, 16, 71, 0.8],
width: 3,
});
@ -112,7 +112,7 @@ const trksegStrokeSel = new Stroke({
});
const rteStroke = new Stroke({
color: 'green',
color: [18, 71, 11, 0.8],
width: 3,
});
@ -288,16 +288,16 @@ const styles = {
}),
nwn: new Stroke({
color: [174, 33, 219, 0.8],
width: 4,
width: 5,
}),
rwn: new Stroke({
color: [174, 33, 219, 0.8],
width: 4,
width: 5,
lineDash: [10, 10],
}),
lwn: new Stroke({
color: [174, 33, 219, 0.8],
width: 2,
width: 3,
lineDash: [10, 10],
}),
},
@ -332,12 +332,13 @@ const styles = {
isSelected: feature.get('isSelected') ?? false,
name: feature.get('name'),
klass: feature.get('class'),
isHidden: zoom() < 14,
isTextHidden: zoom() < 19,
isHidden: zoom() < 16,
};
},
getStyle: memoize((params: any) => {
console.log({ caller: 'getStyle', params });
const { isSelected, name, klass, isHidden } = params;
const { isSelected, name, klass, isHidden, isTextHidden } = params;
if (isHidden) {
return null;
}
@ -352,11 +353,12 @@ const styles = {
opacity: 1,
// anchor: [0, 0],
}),
text: name
text:
name && !isTextHidden
? new Text({
text: name,
font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
offsetY: +20,
offsetY: +40,
padding: [0, 0, 0, 0],
fill: new Fill({
color: 'black',

View File

@ -21,6 +21,7 @@ const Item = styled(Paper)(({ theme }) => ({
const [open, setOpen] = createSignal(false);
let selectedFeatures: Feature[] = [];
let vectorLayerFeatures: Feature[] = [];
let hierarchy: any = {};
const level2Key = (feature: Feature) =>
@ -39,6 +40,10 @@ export const clickHandler = (event: any) => {
}
});
selectedFeatures = features.filter((feature: any) => feature.get('context'));
vectorLayerFeatures = features.filter(
(feature: any) => !feature.get('context')
);
selectedFeatures.sort((f1: Feature, f2: Feature) => {
const ctx1 = f1.get('context');
const ctx2 = f2.get('context');
@ -93,6 +98,7 @@ export const clickHandler = (event: any) => {
event,
features,
hierarchy,
vectorLayerFeatures,
});
selectedFeatures.map((feature: Feature<Geometry>) => {
const id = feature.get('id');
@ -108,7 +114,7 @@ export const clickHandler = (event: any) => {
// length,
});
});
if (selectedFeatures.length > 0) {
if (selectedFeatures.length > 0 || vectorLayerFeatures.length > 0) {
setOpen(true);
}
};
@ -118,7 +124,7 @@ const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
}) => {
return (
<Tree
title={featuresHierarchy.type || 'root'}
title={featuresHierarchy.type || 'voyages'}
content={undefined}
subTree={Object.keys(featuresHierarchy)
.filter((key: string) => key.startsWith('gpx/'))
@ -143,7 +149,50 @@ const Infos: Component<{}> = (props) => {
alignItems='center'
sx={{ width: 'calc(100% - 5px)' }}
>
<Tree
title='everything'
content={undefined}
subTree={
<>
<Tree
title='osm'
content={undefined}
subTree={
<>
<For each={vectorLayerFeatures}>
{(feature) => (
<Tree
title={`${feature.get('class')} ${
feature.get('name') || ''
}`}
content={
<>
<>
{console.log({
caller: 'Infos / vector layer feature',
properties: feature.getProperties(),
})}
</>
<For each={Object.keys(feature.getProperties())}>
{(key: string) => (
<div>{`${key}: ${
feature.getProperties()[key]
}`}</div>
)}
</For>
</>
}
subTree={undefined}
/>
)}
</For>
</>
}
/>
<FeaturesTree featuresHierarchy={hierarchy} />
</>
}
/>
</Stack>
</Dialog>
);

View File

@ -237,7 +237,7 @@ const Map: Component = () => {
const vectorTileSource1 = new VectorTileSource({
format: new MVT(),
url: 'http://localhost:8081/services/aragon/tiles/{z}/{x}/{y}.pbf',
url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
maxZoom: 14,
});