2022-11-25 15:45:26 +00:00
|
|
|
import { Component, createEffect, createSignal, onMount } from 'solid-js';
|
|
|
|
import {
|
|
|
|
useParams,
|
|
|
|
useNavigate,
|
|
|
|
useRouteData,
|
|
|
|
useBeforeLeave,
|
|
|
|
} from '@solidjs/router';
|
|
|
|
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';
|
|
|
|
|
|
|
|
import 'ol/ol.css';
|
|
|
|
import './Map.css';
|
2022-11-25 16:10:49 +00:00
|
|
|
import { Collection } from 'ol';
|
2022-11-25 20:09:59 +00:00
|
|
|
import GetLocation from '../get-location';
|
|
|
|
|
|
|
|
const [getState, setState] = createSignal({
|
|
|
|
lon: 0,
|
|
|
|
lat: 0,
|
|
|
|
rotation: 0,
|
|
|
|
zoom: 0,
|
|
|
|
});
|
|
|
|
|
|
|
|
export { getState };
|
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;
|
|
|
|
console.log({ caller: 'Map', center: params.center });
|
|
|
|
|
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
createEffect(() => {
|
2022-11-25 20:09:59 +00:00
|
|
|
setState({
|
|
|
|
lon: +params.lon,
|
|
|
|
lat: +params.lat,
|
|
|
|
rotation: +params.rotation,
|
|
|
|
zoom: +params.zoom,
|
|
|
|
});
|
2022-11-25 15:45:26 +00:00
|
|
|
const map = getMap();
|
|
|
|
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
|
|
|
});
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
olUseGeographic();
|
|
|
|
|
|
|
|
const changeListener = (event: any) => {
|
|
|
|
const map = getMap();
|
|
|
|
const view = map?.getView();
|
|
|
|
const center = view?.getCenter();
|
|
|
|
if (center) {
|
|
|
|
navigate(
|
|
|
|
`/map/${center[0]}/${
|
|
|
|
center[1]
|
|
|
|
}/${view?.getZoom()}/${view?.getRotation()}`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
console.log({
|
|
|
|
caller: 'Map / changeListener',
|
|
|
|
event,
|
|
|
|
params,
|
|
|
|
map,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
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
|
|
|
}),
|
|
|
|
layers: [
|
|
|
|
new TileLayer({
|
|
|
|
source: new OSM(),
|
|
|
|
}),
|
|
|
|
//new VectorLayer({ source: newSource }),
|
|
|
|
],
|
|
|
|
target: target,
|
2022-11-25 20:09:59 +00:00
|
|
|
controls: new Collection<Control>([
|
|
|
|
new Attribution({ collapsible: true }),
|
|
|
|
new Rotate(),
|
|
|
|
new ScaleLine({ bar: true }),
|
|
|
|
// @ts-ignore
|
|
|
|
new Control({
|
|
|
|
// @ts-ignore
|
|
|
|
element: (
|
|
|
|
<div>
|
|
|
|
<GetLocation />
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
}),
|
|
|
|
]),
|
2022-11-25 15:45:26 +00:00
|
|
|
});
|
|
|
|
olMap.on(['moveend'], changeListener);
|
2022-11-25 20:09:59 +00:00
|
|
|
|
2022-11-25 15:45:26 +00:00
|
|
|
setMap(olMap);
|
|
|
|
});
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
return <div class='ol-map' ref={target} />;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Map;
|