diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 67f7faa..1fcbfc8 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -1,4 +1,5 @@ import { Component, createEffect, createSignal, onMount } from 'solid-js'; +import { createStore, produce, unwrap } from 'solid-js/store'; import { useParams, useNavigate } from '@solidjs/router'; import OlMap from 'ol/Map'; import View from 'ol/View'; @@ -35,6 +36,7 @@ import KeyboardZoom from 'ol/interaction/KeyboardZoom'; import MouseWheelZoom from 'ol/interaction/MouseWheelZoom'; import DragZoom from 'ol/interaction/DragZoom'; import Select from 'ol/interaction/Select'; +import Layer from 'ol/layer/Layer'; const [getState, setState] = createSignal({ lon: 0, @@ -46,6 +48,23 @@ const [getState, setState] = createSignal({ export { getState }; +interface Branch { + vectorLayer?: VectorLayer; + features?: Feature[]; + hidden?: boolean; + updateHandler?: (feature: Feature) => void; +} + +interface Tree { + [key: string]: Branch; +} + +const [tree, setTree] = createStore({}); +export { tree }; +export const setBranch = (key: string, branch: Branch) => { + setTree({ ...tree, [key]: branch }); +}; + const Map: Component = () => { const [getMap, setMap] = createSignal(null); const params = useParams(); @@ -102,7 +121,7 @@ const Map: Component = () => { image: new Icon({ // size: [20, 20], imgSize: [24, 24], - declutterMode: 'declutter', + declutterMode: 'obstacle', // @ts-ignore src: ShowLocationIcon, }), @@ -126,8 +145,21 @@ const Map: Component = () => { } }); - const selectHandler = (event: any) => { - console.log({ caller: 'selectHandler', event }); + const clickHandler = (event: any) => { + const pixel = [event.originalEvent.x, event.originalEvent.y]; + const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 }); + console.log({ + caller: 'clickHandler', + event, + features, + tree: unwrap(tree), + }); + features.map((feature) => { + const id = feature.get('id'); + console.log({ caller: 'clickHandler / feature', event, feature, id }); + const branch = tree[id]; + if (branch?.updateHandler) branch.updateHandler(feature); + }); }; onMount(() => { @@ -159,8 +191,10 @@ const Map: Component = () => { }); tileLayer.set('provider', params.provider, true); - const selectInteraction = new Select({ multi: true }); - selectInteraction.on('select', selectHandler); + const vectorLayer = new VectorLayer({ + source: new VectorSource(), + zIndex: Infinity, + }); const olMap = new OlMap({ view: new View({ @@ -168,7 +202,7 @@ const Map: Component = () => { zoom: +getState().zoom, rotation: +getState().rotation, }), - layers: [tileLayer, new VectorLayer({ source: new VectorSource() })], + layers: [tileLayer, vectorLayer], target: target, controls: new Collection([ new Attribution({ collapsible: true }), @@ -185,12 +219,13 @@ const Map: Component = () => { new KeyboardZoom(), new MouseWheelZoom(), new DragZoom(), - selectInteraction, ]), }); olMap.on(['moveend'], changeListener); + olMap.on(['click'], clickHandler); setMap(olMap); + setBranch('/', { vectorLayer: vectorLayer }); }); return ( diff --git a/src/components/map/index.ts b/src/components/map/index.ts index 718cf08..54ef3de 100644 --- a/src/components/map/index.ts +++ b/src/components/map/index.ts @@ -1 +1 @@ -export { default, getState } from './Map'; +export { default, getState, tree, setBranch } from './Map'; diff --git a/src/components/trkseg/Trkseg.tsx b/src/components/trkseg/Trkseg.tsx index 19268d4..f9e7b35 100644 --- a/src/components/trkseg/Trkseg.tsx +++ b/src/components/trkseg/Trkseg.tsx @@ -6,6 +6,9 @@ import dispatch from '../../workers/dispatcher-main'; import getUri from '../../lib/ids'; import VectorSource from 'ol/source/Vector'; import GeoJSON from 'ol/format/GeoJSON'; +import { setBranch, tree } from '../map'; +import { unwrap } from 'solid-js/store'; +import { Feature } from 'ol'; interface Props { trksegId: string; @@ -27,7 +30,7 @@ export const Trkseg: Component = ({ vectorSource, trksegId }) => { createEffect(() => { console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() }); - if (trkseg()) { + if (trkseg() && !tree[trksegId]) { let geo: any = { type: 'FeatureCollection', features: [ @@ -67,9 +70,17 @@ export const Trkseg: Component = ({ vectorSource, trksegId }) => { const features = new GeoJSON().readFeatures(geo); console.log({ caller: 'Trkseg', features }); vectorSource.addFeatures(features); + setBranch(trksegId, { features, updateHandler }); } }); + const updateHandler = (feature: Feature) => { + console.log({ + caller: 'Trkseg / updateHandler / clicked', + feature, + }); + }; + return <>; };