From 184b3004d82806f1b31c94701e75585fb8f2721b Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Fri, 11 Oct 2024 15:01:40 +0800 Subject: feat: implement crs in GeoLink Now GeoLink has the following format: geo:,?q=,&xy=,crs= When calling addMarker or updateCamera, only use [lon,lat] format --- src/dumbyUtils.mjs | 35 +++++++++++++++++++++++------------ src/dumbymap.mjs | 42 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 59 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs index 170cb16..2e71ee6 100644 --- a/src/dumbyUtils.mjs +++ b/src/dumbyUtils.mjs @@ -1,6 +1,8 @@ import LeaderLine from 'leader-line' import { insideWindow, insideParent } from './utils' +export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/ + /** * focusNextMap. * @@ -100,11 +102,12 @@ const getMarkersFromMaps = link => { .filter(map => link.targets ? link.targets.includes(map.id) : true) .map(map => { const renderer = map.renderer - const markerTitle = `${link.targets ?? 'all'}@${link.xy}` + const markerTitle = `${link.targets ?? 'all'}@${link.dataset.xy}` + const lonLat = [Number(link.dataset.lon), Number(link.dataset.lat)] return map.querySelector(`.marker[title="${markerTitle}"]`) ?? renderer.addMarker({ - xy: link.xy, + xy: lonLat, title: markerTitle, type: link.type, }) @@ -138,21 +141,25 @@ const addLeaderLine = (link, target) => { */ export const createGeoLink = (link) => { const url = new URL(link.href) - const xyInParams = url.searchParams.get('xy')?.split(',')?.map(Number) - const xy = xyInParams ?? url?.href - ?.match(/^geo:([-]?[0-9.]+),([-]?[0-9.]+)/) + const params = new URLSearchParams(link.search) + const xyInParams = params.get('xy')?.split(',')?.map(Number) + const [lon, lat] = url.href + ?.match(coordPattern) ?.splice(1) ?.reverse() ?.map(Number) + const xy = xyInParams ?? [lon, lat] if (!xy || isNaN(xy[0]) || isNaN(xy[1])) return false // Geo information in link - link.url = url - link.xy = xy + link.dataset.xy = xy + link.dataset.lon = lon + link.dataset.lat = lat link.classList.add('with-leader-line', 'geolink') - link.targets = link.url.searchParams.get('id')?.split(',') ?? null - link.type = link.url.searchParams.get('type') ?? null + // TODO refactor as data attribute + link.targets = params.get('id')?.split(',') ?? null + link.type = params.get('type') ?? null link.lines = [] @@ -170,7 +177,11 @@ export const createGeoLink = (link) => { link.onclick = (event) => { event.preventDefault() removeLeaderLines(link) - getMarkersFromMaps(link).forEach(updateMapCameraByMarker(link.xy)) + getMarkersFromMaps(link) + .forEach(updateMapCameraByMarker([ + Number(link.dataset.lon), + Number(link.dataset.lat) + ])) } return true } @@ -229,9 +240,9 @@ const removeLeaderLines = link => { * @param {Number[]} xy * @return {Function} function */ -const updateMapCameraByMarker = xy => marker => { +const updateMapCameraByMarker = lonLat => marker => { const renderer = marker.closest('.mapclay')?.renderer - renderer.updateCamera({ center: xy }, true) + renderer.updateCamera({ center: lonLat }, true) } /** diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 593875e..6602f29 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -9,6 +9,8 @@ import { Layout, SideBySide, Overlay } from './Layout' import * as utils from './dumbyUtils' import * as menuItem from './MenuItem' import PlainModal from 'plain-modal' +import proj4 from 'proj4' +import { register, fromEPSGCode } from 'ol/proj/proj4' /** Selector of special HTML Elements */ const mapBlockSelector = 'pre:has(.language-map)' @@ -59,8 +61,8 @@ export const markdown2HTML = (container, mdContent) => { validate: coordinateRegex, normalize: function (match) { const [, , x, sep, y] = match.text.match(coordinateRegex) - match.url = `geo:${y},${x}?xy=${x},${y}` - match.text = `${x}${sep} ${y}` + match.url = `geo:${y},${x}` + match.text = `${x}${sep}${y}` match.index += match.text.indexOf(x) + 1 return match }, @@ -165,15 +167,43 @@ export const generateMaps = (container, { switchToNextLayout: throttle(utils.switchToNextLayout, 300), }, } - Object.entries(dumbymap.utils).forEach(([util, func]) => { - dumbymap.utils[util] = func.bind(dumbymap) + Object.entries(dumbymap.utils).forEach(([util, value]) => { + if (typeof value === 'function') { + dumbymap.utils[util] = value.bind(dumbymap) + } }) /** Create GeoLinks and DocLinks */ container.querySelectorAll(docLinkSelector) .forEach(utils.createDocLink) - container.querySelectorAll(geoLinkSelector) - .forEach(utils.createGeoLink) + + /** Set CRS and GeoLinks */ + register(proj4) + fromEPSGCode(crs).then(() => { + const transform = proj4(crs, 'EPSG:4326').forward + + Array.from(container.querySelectorAll(geoLinkSelector)) + .map(link => { + // set coordinate as lat/lon in WGS84 + const params = new URLSearchParams(link.search) + const [y, x] = link.href + .match(utils.coordPattern) + .splice(1) + .map(Number) + const [lon, lat] = transform([x, y]) + .map(value => value.toFixed(6)) + link.href = `geo:${lat},${lon}` + + // set query strings + params.set('xy', `${x},${y}`) + params.set('crs', crs) + params.set('q', `${lat},${lon}`) + link.search = params + + return link + }) + .forEach(utils.createGeoLink) + }) /** * mapFocusObserver. observe for map focus -- cgit v1.2.3-70-g09d2