Playing around with vector tiles

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) => {
+styles.MultiLineString = styles.LineString;
-  const type = feature.get('type') as keyof typeof styles;
+
+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;
 };
 

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));
+  console.log({ caller: 'Infos.tsx / clickHandler', features, event });
-  selectedFeatures = features;
+  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<Geometry>) => {
+  selectedFeatures.map((feature: Feature<Geometry>) => {
     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);
   }
 };

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({
+    const vectorTileLayer1 = new VectorTileLayer({
-      source: vectorTileSource,
+      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<Control>([
         new Attribution({ collapsible: true }),