From 9ade878debcbea57c2c90d920d4bbdea0e035d0c Mon Sep 17 00:00:00 2001 From: evlist Date: Fri, 20 Jan 2023 21:11:18 +0100 Subject: [PATCH] Don't use useGeographic anymore since it doesn't work with clusters. --- src/components/map/Map.tsx | 46 +++++++++++---------- src/components/rte/Rte.tsx | 18 +++++--- src/components/trkseg/Trkseg.tsx | 17 ++++---- src/components/wpt/Wpt.tsx | 3 +- src/db/lib.ts | 16 ++++--- src/lib/ClusterableVectorTileSourceProxy.ts | 20 ++++----- 6 files changed, 69 insertions(+), 51 deletions(-) diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index a30f00b..19547fb 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -10,12 +10,16 @@ import Attribution from 'ol/control/Attribution'; import Rotate from 'ol/control/Rotate'; import ScaleLine from 'ol/control/ScaleLine'; import Control from 'ol/control/Control'; -import { toLonLat, useGeographic as olUseGeographic } from 'ol/proj'; +import { + fromLonLat, + toLonLat, + useGeographic as olUseGeographic, +} from 'ol/proj'; import DragRotate from 'ol/interaction/DragRotate'; import 'ol/ol.css'; import './Map.css'; -import { Collection, VectorTile } from 'ol'; +import { Collection } from 'ol'; import { Point } from 'ol/geom'; import { Style, Icon, Circle, Fill } from 'ol/style'; import GetLocation, { getCurrentLocation } from '../get-location'; @@ -39,7 +43,7 @@ import Infos, { clickHandler } from '../infos'; import GpxDialog from '../gpx-dialog'; import GpxRecord from '../gpx-record'; import dispatch from '../../workers/dispatcher-main'; -import { debounce, floor } from 'lodash'; +import { debounce } from 'lodash'; import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen'; import Account from '../account'; @@ -48,10 +52,6 @@ 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'; -import { DepartureBoard } from '@suid/icons-material'; -import deTileVectorSource from '../../lib/de-tile-vector-source'; -import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource'; -import clusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy'; import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy'; const [getState, setState] = createSignal({ @@ -159,7 +159,7 @@ const Map: Component = () => { const view = map?.getView(); view?.animate({ - center: [getState().lon, getState().lat], + center: fromLonLat([getState().lon, getState().lat]), rotation: getState().rotation, zoom: getState().zoom, duration: 1000, @@ -178,7 +178,7 @@ const Map: Component = () => { .at(1) ?.getSource() as VectorSource; source!.clear(true); - const point = new Point([location.lon, location.lat]); + const point = new Point(fromLonLat([location.lon, location.lat])); const style = new Style({ image: new Icon({ // size: [20, 20], @@ -209,16 +209,17 @@ const Map: Component = () => { }); onMount(async () => { - olUseGeographic(); + // olUseGeographic(); const changeListener = (event: any) => { const map = getMap(); const view = map?.getView(); const center = view?.getCenter(); if (center) { + const centerLonLat = toLonLat(center); navigate( - `/map/${getState().provider}/${center[0]}/${ - center[1] + `/map/${getState().provider}/${centerLonLat[0]}/${ + centerLonLat[1] }/${view?.getZoom()}/${view?.getRotation()}` ); } @@ -229,6 +230,7 @@ const Map: Component = () => { ...params, }, map, + center, }); }; @@ -250,7 +252,7 @@ const Map: Component = () => { const olMap = new OlMap({ view: new View({ - center: [+getState().lon, +getState().lat], + center: fromLonLat([+getState().lon, +getState().lat]), zoom: +getState().zoom, rotation: +getState().rotation, }), @@ -297,8 +299,8 @@ const Map: Component = () => { const clusterSource = new Cluster({ source: clusterableVectorTileSource, - distance: 4000000, - //minDistance: 200, + distance: 50, + minDistance: 10, geometryFunction: (feature: Feature) => { // console.log({ // caller: 'Map / Cluster / geometryFunction', @@ -325,13 +327,13 @@ const Map: Component = () => { // }); return new Feature({ - geometry: new Point( - toLonLat( - olExtent.getCenter(point.getExtent()), - olMap.getView().getProjection() - ) - ), - // point, + // geometry: new Point( + // toLonLat( + // olExtent.getCenter(point.getExtent()), + // olMap.getView().getProjection() + // ) + // ), + geometry: point, features: features, type: 'cluster', }); diff --git a/src/components/rte/Rte.tsx b/src/components/rte/Rte.tsx index 204cb25..b56bbf7 100644 --- a/src/components/rte/Rte.tsx +++ b/src/components/rte/Rte.tsx @@ -7,6 +7,7 @@ import { createCachedSignal, destroyCachedSignal, } from '../../workers/cached-signals'; +import { fromLonLat } from 'ol/proj'; interface Props { rteId: string; @@ -43,7 +44,10 @@ export const Rte: Component = ({ vectorSource, rteId, context }) => { type: 'Feature', geometry: { type: 'Point', - coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat], + coordinates: fromLonLat([ + rte().rtept[0].$.lon, + rte().rtept[0].$.lat, + ]), }, properties: { type: 'rte-start', @@ -56,10 +60,9 @@ export const Rte: Component = ({ vectorSource, rteId, context }) => { type: 'Feature', geometry: { type: 'LineString', - coordinates: rte().rtept.map((rtept: any) => [ - rtept.$.lon, - rtept.$.lat, - ]), + coordinates: rte().rtept.map((rtept: any) => + fromLonLat([rtept.$.lon, rtept.$.lat]) + ), }, properties: { type: 'rte', @@ -72,7 +75,10 @@ export const Rte: Component = ({ vectorSource, rteId, context }) => { type: 'Feature', geometry: { type: 'Point', - coordinates: [rte().rtept.at(-1).$.lon, rte().rtept.at(-1).$.lat], + coordinates: fromLonLat([ + rte().rtept.at(-1).$.lon, + rte().rtept.at(-1).$.lat, + ]), }, properties: { type: 'rte-finish', diff --git a/src/components/trkseg/Trkseg.tsx b/src/components/trkseg/Trkseg.tsx index 7f6547d..591d28b 100644 --- a/src/components/trkseg/Trkseg.tsx +++ b/src/components/trkseg/Trkseg.tsx @@ -7,6 +7,7 @@ import { createCachedSignal, destroyCachedSignal, } from '../../workers/cached-signals'; +import { fromLonLat } from 'ol/proj'; interface Props { trksegId: string; @@ -56,7 +57,10 @@ export const Trkseg: Component = ({ type: 'Feature', geometry: { type: 'Point', - coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat], + coordinates: fromLonLat([ + trkseg().trkpt[0].$.lon, + trkseg().trkpt[0].$.lat, + ]), }, properties: { type: 'trkseg-start', @@ -69,10 +73,9 @@ export const Trkseg: Component = ({ type: 'Feature', geometry: { type: 'LineString', - coordinates: trkseg().trkpt.map((trkpt: any) => [ - trkpt.$.lon, - trkpt.$.lat, - ]), + coordinates: trkseg().trkpt.map((trkpt: any) => + fromLonLat([trkpt.$.lon, trkpt.$.lat]) + ), }, properties: { type: 'trkseg', @@ -85,10 +88,10 @@ export const Trkseg: Component = ({ type: 'Feature', geometry: { type: 'Point', - coordinates: [ + coordinates: fromLonLat([ trkseg().trkpt.at(-1).$.lon, trkseg().trkpt.at(-1).$.lat, - ], + ]), }, properties: { type: 'trkseg-finish', diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx index c21812f..d041da1 100644 --- a/src/components/wpt/Wpt.tsx +++ b/src/components/wpt/Wpt.tsx @@ -8,6 +8,7 @@ import { createCachedSignal, destroyCachedSignal, } from '../../workers/cached-signals'; +import { fromLonLat } from 'ol/proj'; interface Props { wptId: string; @@ -61,7 +62,7 @@ export const Wpt: Component = ({ type: 'Feature', geometry: { type: 'Point', - coordinates: [wpt()?.$.lon, wpt()?.$.lat], + coordinates: fromLonLat([wpt()?.$.lon, wpt()?.$.lat]), }, properties: { type: 'wpt', diff --git a/src/db/lib.ts b/src/db/lib.ts index d9f1bbd..d216167 100644 --- a/src/db/lib.ts +++ b/src/db/lib.ts @@ -14,29 +14,35 @@ export const put = async ( ) => { const targetDb = local ? localDb : db; let current; + let putDoc; try { current = await targetDb.get(_id); } catch { current = { _rev: undefined, doc: cloneDeep(defaultDoc) }; } try { - await targetDb.put({ + putDoc = { _id, _rev: current._rev, type, doc: update(current.doc), - }); + }; + await targetDb.put(putDoc); } catch (error: any) { if (error.name === 'conflict') { - console.log({ caller: 'db.put', _id, type, defaultDoc, error }); + console.log({ caller: 'db.put', _id, type, putDoc, defaultDoc, error }); await put(_id, type, update, defaultDoc, local); } else { - console.error({ caller: 'db.put', _id, type, defaultDoc, error }); + console.error({ caller: 'db.put', _id, type, putDoc, defaultDoc, error }); } } }; -export const getFamily = async (key: string, options: any = {}, local: boolean = false) => { +export const getFamily = async ( + key: string, + options: any = {}, + local: boolean = false +) => { const targetDb = local ? localDb : db; return await targetDb.allDocs({ startkey: key, diff --git a/src/lib/ClusterableVectorTileSourceProxy.ts b/src/lib/ClusterableVectorTileSourceProxy.ts index 52247a7..3904f86 100644 --- a/src/lib/ClusterableVectorTileSourceProxy.ts +++ b/src/lib/ClusterableVectorTileSourceProxy.ts @@ -9,7 +9,7 @@ interface Options { class ClusterableVectorTileSourceProxy { extent?: Extent; resolution?: number; - extentProjected?: Extent; +// extentProjected?: Extent; featuresSent: boolean = false; proxy?: typeof Proxy; @@ -19,13 +19,13 @@ class ClusterableVectorTileSourceProxy { this.resolution = resolution; if (this.extent === undefined || !equals(this.extent, extent)) { this.extent = extent; - const projection = target.getProjection(); - if (projection != null) { - this.extentProjected = fromLonLat( - extent.slice(0, 2), - projection - ).concat(fromLonLat(extent.slice(2), this.projection)); - } + // const projection = target.getProjection(); + // if (projection != null) { + // this.extentProjected = fromLonLat( + // extent.slice(0, 2), + // projection + // ).concat(fromLonLat(extent.slice(2), this.projection)); + // } } if (!this.featuresSent) { target.dispatchEvent('change'); @@ -46,8 +46,8 @@ class ClusterableVectorTileSourceProxy { getFeatures: (target: VectorTileSource) => { return () => { const result = - this.extentProjected !== undefined - ? target.getFeaturesInExtent(this.extentProjected) + this.extent !== undefined + ? target.getFeaturesInExtent(this.extent) : []; this.featuresSent = true; // console.log({