diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index fba7fde..b53d41d 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -18,6 +18,7 @@ import memoize from 'memoizee'; import { getMap, getState } from '../map'; import { Point } from 'ol/geom'; import { Coordinate } from 'ol/coordinate'; +import { createDefaultStyle } from 'ol/style/Style'; interface StyleParameters { type: string; @@ -158,7 +159,7 @@ const normalizer = (params: any) => { const memoizeOptions = { length: 1, normalizer, - max: 1024, + max: 1024000, }; const zoom = () => Math.floor(getState().zoom); @@ -282,18 +283,48 @@ const styles = { }); }, memoizeOptions), }, + LineString: { + getParameters: (feature: Feature) => { + return { + isSelected: feature.get('isSelected') ?? false, + name: feature.get('name'), + }; + }, + getStyle: memoize((params: any) => { + console.log({ caller: 'getStyle', params }); + const { isSelected, name } = params; + return new Style({ + stroke: isSelected ? routeStrokeSel : routeStroke, + text: new Text({ + text: name, + font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"', + placement: 'line', + padding: [2, 2, 2, 2], + fill: new Fill({ + color: 'black', + }), + }), + }); + }, memoizeOptions), + }, + MultiLineString: {}, }; -export const style = (feature: Feature) => { - const type = feature.get('type') as keyof typeof styles; +styles.MultiLineString = styles.LineString; + +export const style = (feature: Feature, resolution: number) => { + const type = ( + feature.get('type') !== undefined ? feature.get('type') : feature.type_ + ) as keyof typeof styles; const styleForType = styles[type]; if (!styleForType) { - return null; +// console.log({ caller: 'style / default', type, feature, resolution }); + return createDefaultStyle(feature, resolution)[0]; } const params = styles[type].getParameters(feature); const getStyle = styles[type].getStyle; const style = getStyle(params); - console.log({ caller: 'style', type, params, style }); +// console.log({ caller: 'style', type, params, style }); return style; }; diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx index 8caed75..1260a79 100644 --- a/src/components/infos/Infos.tsx +++ b/src/components/infos/Infos.tsx @@ -32,8 +32,13 @@ export const clickHandler = (event: any) => { hierarchy = {}; const pixel = [event.originalEvent.x, event.originalEvent.y]; const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 }); - selectedFeatures.map((feature) => feature.set('isSelected', false)); - selectedFeatures = features; + console.log({ caller: 'Infos.tsx / clickHandler', features, event }); + selectedFeatures.map((feature) => { + if (feature.set) { + feature.set('isSelected', false); + } + }); + selectedFeatures = features.filter((feature: any) => feature.get('context')); selectedFeatures.sort((f1: Feature, f2: Feature) => { const ctx1 = f1.get('context'); const ctx2 = f2.get('context'); @@ -89,7 +94,7 @@ export const clickHandler = (event: any) => { features, hierarchy, }); - features.map((feature: Feature) => { + selectedFeatures.map((feature: Feature) => { const id = feature.get('id'); feature.set('isSelected', true); // const geometry = feature.getGeometry(); @@ -103,7 +108,7 @@ export const clickHandler = (event: any) => { // length, }); }); - if (features.length > 0) { + if (selectedFeatures.length > 0) { setOpen(true); } }; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 2b69fd3..9375cc5 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -45,6 +45,7 @@ import OsmFetch from '../osm-fetch'; import VectorTileLayer from 'ol/layer/VectorTile'; import VectorTileSource from 'ol/source/VectorTile.js'; import MVT from 'ol/format/MVT.js'; +import style from '../gpx/styles'; const [getState, setState] = createSignal({ lon: 0, @@ -234,13 +235,24 @@ const Map: Component = () => { zIndex: Infinity, }); - const vectorTileSource = new VectorTileSource({ + const vectorTileSource1 = new VectorTileSource({ format: new MVT(), - url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Atransportation@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf', + url: 'http://localhost:8081/services/aragon/tiles/{z}/{x}/{y}.pbf', + maxZoom: 14, }); - const vectorTileLayer = new VectorTileLayer({ - source: vectorTileSource, + const vectorTileLayer1 = new VectorTileLayer({ + source: vectorTileSource1, + style: style, + }); + + const vectorTileSource2 = new VectorTileSource({ + format: new MVT(), + url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/dyomedea%3Ahiking_routes@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf', + }); + + const vectorTileLayer2 = new VectorTileLayer({ + source: vectorTileSource2, }); const olMap = new OlMap({ @@ -249,7 +261,7 @@ const Map: Component = () => { zoom: +getState().zoom, rotation: +getState().rotation, }), - layers: [tileLayer, vectorTileLayer, vectorLayer], + layers: [tileLayer, vectorTileLayer1, vectorLayer], target: target, controls: new Collection([ new Attribution({ collapsible: true }),