2022-11-25 15:45:26 +00:00
|
|
|
import { Component, createEffect, createSignal, onMount } from 'solid-js';
|
2022-11-29 13:59:57 +00:00
|
|
|
import { createStore, produce, unwrap } from 'solid-js/store';
|
2022-11-25 21:12:44 +00:00
|
|
|
import { useParams, useNavigate } from '@solidjs/router';
|
2022-11-25 15:45:26 +00:00
|
|
|
import OlMap from 'ol/Map';
|
|
|
|
import View from 'ol/View';
|
|
|
|
import TileLayer from 'ol/layer/Tile';
|
|
|
|
import VectorLayer from 'ol/layer/Vector';
|
|
|
|
import VectorSource from 'ol/source/Vector';
|
|
|
|
import Feature from 'ol/Feature';
|
|
|
|
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 OSM from 'ol/source/OSM';
|
|
|
|
import { useGeographic as olUseGeographic } from 'ol/proj';
|
2022-11-28 20:36:12 +00:00
|
|
|
import DragRotate from 'ol/interaction/DragRotate';
|
2022-11-25 15:45:26 +00:00
|
|
|
|
|
|
|
import 'ol/ol.css';
|
|
|
|
import './Map.css';
|
2022-11-25 16:10:49 +00:00
|
|
|
import { Collection } from 'ol';
|
2022-11-25 21:12:44 +00:00
|
|
|
import { Point } from 'ol/geom';
|
2022-11-27 11:29:30 +00:00
|
|
|
import { Style, Icon } from 'ol/style';
|
2022-11-25 21:12:44 +00:00
|
|
|
import GetLocation, { getCurrentLocation } from '../get-location';
|
|
|
|
import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
|
2022-11-26 11:33:26 +00:00
|
|
|
import { Back, Forward } from '../back-forward';
|
2022-11-26 21:04:08 +00:00
|
|
|
import GpxImport from '../gpx-import';
|
2022-11-27 13:32:21 +00:00
|
|
|
import AllGpxes from '../all-gpxes';
|
2022-11-28 18:33:02 +00:00
|
|
|
import MapTileProvider, { mapTileProviders } from '../map-tile-provider';
|
2022-11-28 20:36:12 +00:00
|
|
|
import Interaction from 'ol/interaction/Interaction';
|
|
|
|
import DoubleClickZoom from 'ol/interaction/DoubleClickZoom';
|
|
|
|
import DragPan from 'ol/interaction/DragPan';
|
|
|
|
import PinchRotate from 'ol/interaction/PinchRotate';
|
|
|
|
import PinchZoom from 'ol/interaction/PinchZoom';
|
|
|
|
import KeyboardPan from 'ol/interaction/KeyboardPan';
|
|
|
|
import KeyboardZoom from 'ol/interaction/KeyboardZoom';
|
|
|
|
import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
|
|
|
|
import DragZoom from 'ol/interaction/DragZoom';
|
|
|
|
import Select from 'ol/interaction/Select';
|
2022-11-29 13:59:57 +00:00
|
|
|
import Layer from 'ol/layer/Layer';
|
2022-11-29 15:54:13 +00:00
|
|
|
import { selectedStyle } from './selectedStyle';
|
2022-11-25 20:09:59 +00:00
|
|
|
|
|
|
|
const [getState, setState] = createSignal({
|
|
|
|
lon: 0,
|
|
|
|
lat: 0,
|
|
|
|
rotation: 0,
|
|
|
|
zoom: 0,
|
2022-11-28 14:27:36 +00:00
|
|
|
provider: 'osm',
|
2022-11-25 20:09:59 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
export { getState };
|
2022-11-25 15:45:26 +00:00
|
|
|
|
2022-11-29 13:59:57 +00:00
|
|
|
interface Branch {
|
|
|
|
vectorLayer?: VectorLayer;
|
|
|
|
features?: Feature[];
|
|
|
|
hidden?: boolean;
|
|
|
|
updateHandler?: (feature: Feature) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Tree {
|
|
|
|
[key: string]: Branch;
|
|
|
|
}
|
|
|
|
|
|
|
|
const [tree, setTree] = createStore<Tree>({});
|
|
|
|
export { tree };
|
|
|
|
export const setBranch = (key: string, branch: Branch) => {
|
|
|
|
setTree({ ...tree, [key]: branch });
|
|
|
|
};
|
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
const Map: Component = () => {
|
|
|
|
const [getMap, setMap] = createSignal<OlMap | null>(null);
|
|
|
|
const params = useParams();
|
2022-11-25 20:09:59 +00:00
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
|
|
let target: HTMLDivElement;
|
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
createEffect(() => {
|
2022-11-28 14:27:36 +00:00
|
|
|
console.log({
|
2022-11-28 18:33:02 +00:00
|
|
|
caller: 'Map / setState',
|
|
|
|
params: {
|
|
|
|
...params,
|
|
|
|
},
|
2022-11-28 14:27:36 +00:00
|
|
|
});
|
2022-11-25 20:09:59 +00:00
|
|
|
setState({
|
2022-11-28 14:27:36 +00:00
|
|
|
provider: params.provider,
|
2022-11-25 20:09:59 +00:00
|
|
|
lon: +params.lon,
|
|
|
|
lat: +params.lat,
|
|
|
|
rotation: +params.rotation,
|
|
|
|
zoom: +params.zoom,
|
|
|
|
});
|
2022-11-25 15:45:26 +00:00
|
|
|
const map = getMap();
|
2022-11-28 18:33:02 +00:00
|
|
|
|
|
|
|
const layers = map?.getLayers();
|
|
|
|
const tileLayer = layers?.item(0) as TileLayer<any> | undefined;
|
|
|
|
if (tileLayer?.get('provider') !== params.provider) {
|
|
|
|
tileLayer?.set('provider', params.provider, true);
|
|
|
|
tileLayer?.setSource(mapTileProviders[params.provider].source);
|
|
|
|
}
|
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
const view = map?.getView();
|
2022-11-25 16:06:07 +00:00
|
|
|
view?.animate({
|
2022-11-25 20:09:59 +00:00
|
|
|
center: [getState().lon, getState().lat],
|
|
|
|
rotation: getState().rotation,
|
|
|
|
zoom: getState().zoom,
|
2022-11-25 16:06:07 +00:00
|
|
|
duration: 1000,
|
|
|
|
});
|
2022-11-25 15:45:26 +00:00
|
|
|
});
|
|
|
|
|
2022-11-25 21:12:44 +00:00
|
|
|
createEffect(() => {
|
|
|
|
const location = getCurrentLocation();
|
|
|
|
if (location) {
|
|
|
|
console.log({
|
|
|
|
caller: 'Map / updateLocation',
|
|
|
|
location,
|
|
|
|
});
|
|
|
|
const source = getMap()
|
|
|
|
?.getAllLayers()
|
|
|
|
.at(1)
|
|
|
|
?.getSource() as VectorSource;
|
|
|
|
source!.clear(true);
|
|
|
|
const point = new Point([location.lon, location.lat]);
|
|
|
|
const style = new Style({
|
|
|
|
image: new Icon({
|
|
|
|
// size: [20, 20],
|
|
|
|
imgSize: [24, 24],
|
2022-11-29 13:59:57 +00:00
|
|
|
declutterMode: 'obstacle',
|
2022-11-25 21:12:44 +00:00
|
|
|
// @ts-ignore
|
|
|
|
src: ShowLocationIcon,
|
|
|
|
}),
|
|
|
|
});
|
|
|
|
const feature = new Feature({
|
|
|
|
geometry: point,
|
|
|
|
// labelPoint: point,
|
|
|
|
// name: 'current location',
|
|
|
|
style: style,
|
|
|
|
});
|
|
|
|
feature.setStyle(style);
|
|
|
|
source.addFeature(feature);
|
|
|
|
// source.changed();
|
|
|
|
console.log({
|
|
|
|
caller: 'Map / updateLocation',
|
|
|
|
location,
|
|
|
|
source,
|
|
|
|
style,
|
|
|
|
feature,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2022-11-29 20:19:28 +00:00
|
|
|
let selectedFeatures: Feature[] = [];
|
|
|
|
|
2022-11-29 13:59:57 +00:00
|
|
|
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),
|
|
|
|
});
|
2022-11-29 20:19:28 +00:00
|
|
|
selectedFeatures.map((feature) => feature.set('isSelected', false));
|
|
|
|
selectedFeatures = features;
|
2022-11-29 13:59:57 +00:00
|
|
|
features.map((feature) => {
|
|
|
|
const id = feature.get('id');
|
2022-11-29 20:19:28 +00:00
|
|
|
feature.set('isSelected', true);
|
2022-11-29 13:59:57 +00:00
|
|
|
console.log({ caller: 'clickHandler / feature', event, feature, id });
|
|
|
|
const branch = tree[id];
|
|
|
|
if (branch?.updateHandler) branch.updateHandler(feature);
|
|
|
|
});
|
2022-11-28 20:36:12 +00:00
|
|
|
};
|
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
onMount(() => {
|
|
|
|
olUseGeographic();
|
|
|
|
|
|
|
|
const changeListener = (event: any) => {
|
|
|
|
const map = getMap();
|
|
|
|
const view = map?.getView();
|
|
|
|
const center = view?.getCenter();
|
|
|
|
if (center) {
|
|
|
|
navigate(
|
2022-11-28 14:27:36 +00:00
|
|
|
`/map/${getState().provider}/${center[0]}/${
|
2022-11-25 15:45:26 +00:00
|
|
|
center[1]
|
|
|
|
}/${view?.getZoom()}/${view?.getRotation()}`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
console.log({
|
|
|
|
caller: 'Map / changeListener',
|
|
|
|
event,
|
2022-11-28 18:33:02 +00:00
|
|
|
params: {
|
|
|
|
...params,
|
|
|
|
},
|
2022-11-25 15:45:26 +00:00
|
|
|
map,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2022-11-28 18:33:02 +00:00
|
|
|
const tileLayer = new TileLayer({
|
|
|
|
source: mapTileProviders[params.provider].source,
|
|
|
|
});
|
|
|
|
tileLayer.set('provider', params.provider, true);
|
|
|
|
|
2022-11-29 13:59:57 +00:00
|
|
|
const vectorLayer = new VectorLayer({
|
|
|
|
source: new VectorSource(),
|
|
|
|
zIndex: Infinity,
|
|
|
|
});
|
2022-11-28 20:36:12 +00:00
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
const olMap = new OlMap({
|
|
|
|
view: new View({
|
2022-11-25 20:09:59 +00:00
|
|
|
center: [+getState().lon, +getState().lat],
|
|
|
|
zoom: +getState().zoom,
|
|
|
|
rotation: +getState().rotation,
|
2022-11-25 15:45:26 +00:00
|
|
|
}),
|
2022-11-29 13:59:57 +00:00
|
|
|
layers: [tileLayer, vectorLayer],
|
2022-11-25 15:45:26 +00:00
|
|
|
target: target,
|
2022-11-25 20:09:59 +00:00
|
|
|
controls: new Collection<Control>([
|
|
|
|
new Attribution({ collapsible: true }),
|
|
|
|
new Rotate(),
|
|
|
|
new ScaleLine({ bar: true }),
|
|
|
|
]),
|
2022-11-28 20:36:12 +00:00
|
|
|
interactions: new Collection<Interaction>([
|
|
|
|
new DragRotate(),
|
|
|
|
new DoubleClickZoom(),
|
|
|
|
new DragPan(),
|
|
|
|
new PinchRotate(),
|
|
|
|
new PinchZoom(),
|
|
|
|
new KeyboardPan(),
|
|
|
|
new KeyboardZoom(),
|
|
|
|
new MouseWheelZoom(),
|
|
|
|
new DragZoom(),
|
|
|
|
]),
|
2022-11-25 15:45:26 +00:00
|
|
|
});
|
|
|
|
olMap.on(['moveend'], changeListener);
|
2022-11-29 13:59:57 +00:00
|
|
|
olMap.on(['click'], clickHandler);
|
2022-11-25 20:09:59 +00:00
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
setMap(olMap);
|
2022-11-29 13:59:57 +00:00
|
|
|
setBranch('/', { vectorLayer: vectorLayer });
|
2022-11-25 15:45:26 +00:00
|
|
|
});
|
|
|
|
|
2022-11-27 11:12:22 +00:00
|
|
|
return (
|
2022-11-27 11:29:30 +00:00
|
|
|
// @ts-ignore
|
2022-11-27 11:12:22 +00:00
|
|
|
<div class='ol-map' ref={target}>
|
|
|
|
<GetLocation />
|
|
|
|
<Forward />
|
|
|
|
<Back />
|
|
|
|
<GpxImport />
|
2022-11-28 18:33:02 +00:00
|
|
|
<MapTileProvider />
|
2022-11-27 14:50:08 +00:00
|
|
|
<AllGpxes map={getMap} />
|
2022-11-27 11:12:22 +00:00
|
|
|
</div>
|
|
|
|
);
|
2022-11-25 15:45:26 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Map;
|