|
|
|
|
| import "ol/ol.css";
|
| import { Feature, Map as OlMap, View } from "ol";
|
| import { GeoJSON } from "ol/format";
|
| import { Point } from "ol/geom";
|
| import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
|
| import { fromLonLat } from "ol/proj";
|
| import { OSM, Vector as VectorSource } from "ol/source";
|
| import { Circle, Fill, Stroke, Style } from "ol/style";
|
| import { Plugin } from "../Plugin.ts";
|
|
|
| |
| |
|
|
| export default class MapView extends Plugin {
|
| private readonly map: HTMLElement;
|
|
|
| public constructor(map: HTMLElement) {
|
| super("mapView");
|
|
|
| this.map = map;
|
| }
|
|
|
| protected async run(): Promise<void> {
|
| const { leafletTarget: target, mapLon = "0", mapLat = "0", mapGeojson } = this.map.dataset;
|
|
|
| const lon = Number.parseFloat(mapLon);
|
| const lat = Number.parseFloat(mapLat);
|
| const view = new View({ maxZoom: 16, enableRotation: false });
|
| const map = new OlMap({
|
| target: target,
|
| layers: [new TileLayer({ source: new OSM({ maxZoom: 16 }) })],
|
| view: view
|
| });
|
|
|
| try {
|
| const markerSource = new VectorSource({
|
| features: [
|
| new Feature({
|
| geometry: new Point(fromLonLat([lon, lat]))
|
| })
|
| ]
|
| });
|
|
|
| const markerLayer = new VectorLayer({
|
| source: markerSource,
|
| style: new Style({
|
| image: new Circle({
|
| radius: 6,
|
| fill: new Fill({ color: "#3050ff" })
|
| })
|
| })
|
| });
|
|
|
| map.addLayer(markerLayer);
|
| } catch (error) {
|
| console.error("Failed to create marker layer:", error);
|
| }
|
|
|
| if (mapGeojson) {
|
| try {
|
| const geoSource = new VectorSource({
|
| features: new GeoJSON().readFeatures(JSON.parse(mapGeojson), {
|
| dataProjection: "EPSG:4326",
|
| featureProjection: "EPSG:3857"
|
| })
|
| });
|
|
|
| const geoLayer = new VectorLayer({
|
| source: geoSource,
|
| style: new Style({
|
| stroke: new Stroke({ color: "#3050ff", width: 2 }),
|
| fill: new Fill({ color: "#3050ff33" })
|
| })
|
| });
|
|
|
| map.addLayer(geoLayer);
|
|
|
| const geoSourceExtent = geoSource.getExtent();
|
| if (geoSourceExtent) {
|
| view.fit(geoSourceExtent, { padding: [20, 20, 20, 20] });
|
| }
|
| } catch (error) {
|
| console.error("Failed to create GeoJSON layer:", error);
|
| }
|
| }
|
| }
|
|
|
| protected async post(): Promise<void> {
|
|
|
| }
|
| }
|
|
|
