barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull requests Activity

- add webgis: overview of all oai datasets via mocking service

Browse source
This commit is contained in:
Arno Kaimbacher 2022-01-27 17:17:40 +01:00
parent 5fe134a650
commit 745c3e1349
8 changed files with 2142 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/map/map.component.ts
View file

@ -1,11 +1,14 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Map, MapOptions, tileLayer } from "leaflet";
import { Prop, Emit } from "vue-property-decorator";
import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer } from "leaflet";
import { LayerOptions } from "./map-options";
import DatasetService from "../../services/dataset.service";
import { Subscription } from "rxjs";
import { OaiDataset } from "@/models/oai";
const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://basemap.at" target="_blank">Basemap.at</a>, <a href="http://www.geologie.ac.at" target="_blank">Geologie.ac.at</a>';
@Options({
// selector: "app-map",
@ -32,9 +35,18 @@ export default class MapComponent extends Vue {
@Prop()
public mapOptions!: MapOptions;
/**
* Informs when initialization is done with map id.
*/
// @Emit("search-change")
// public onMapInitializedEvent: EventEmitter<string> = new EventEmitter();
// protected oldBaseLayer: Control.LayersObject = {};
protected map!: Map;
// protected zoomControl!: Control.Zoom;
private subscriptions: Array<Subscription> = [];
private error = "";
private tethys!: Array<OaiDataset>;
public beforeMount(): void {
if (this.mapId === undefined || this.mapId === null) {
@ -42,15 +54,73 @@ export default class MapComponent extends Vue {
}
}
public mounted(): void {
this.initMap();
}
beforeUnmount(): void {
//unsunscribe to ensure no memory leaks
// this.subscription.unsubscribe();
for (const sub of this.subscriptions) {
sub.unsubscribe();
}
}
protected initMap(): void {
this.map = new Map(this.mapId, this.mapOptions);
// this.mapService.setMap(this.mapId, this.map);
// this.onMapInitializedEvent.emit(this.mapId);
this.addBaseMap();
const newSubs = DatasetService.getOAI().subscribe(
(res: Array<OaiDataset>) => {
this.tethys = res;
this.map.createPane("bottom");
// this.map.getPane('bottom').style.zIndex = "550";
this.map.createPane("top");
// this.map.getPane('top').style.zIndex = "650";
for (let index = 0; index < this.tethys.length; index++) {
this.addPolygon(index);
}
},
(error: string) => this.errorHandler(error),
);
this.subscriptions.push(newSubs);
}
private errorHandler(err: string): void {
this.error = err;
// this.loading = false;
}
private addPolygon(i: number) {
const southWest = new LatLng(this.tethys[i].south, this.tethys[i].west),
northEast = new LatLng(this.tethys[i].north, this.tethys[i].east);
const bounds = new LatLngBounds(southWest, northEast);
const bW = this.tethys[i].east - this.tethys[i].west;
new Rectangle(bounds, {
color: /GEOFAST/g.test(this.tethys[i].title) ? "red" : "green",
fill: bW > 0.3 ? false : true,
weight: bW > 0.3 || bW < 0.03 ? 3 : 1,
pane: bW > 0.2 ? "bottom" : "top",
}).addTo(this.map).bindPopup(`<p>DOI: <a target="_blank" href="https://doi.org/${this.tethys[i].doi}">${this.tethys[i].doi}</a>
<br><strong>${this.tethys[i].title}</strong><br>
publ.: ${this.tethys[i].creator}<br>
und ${this.tethys[i].contributor}
</p>`);
}
private addBaseMap(layerOptions?: LayerOptions): void {
if (this.map) {
const map = this.map.setView([47.7, 13.5], 7);
const southWest = new LatLng(46.5, 9.9),
northEast = new LatLng(48.9, 16.9),
bounds = new LatLngBounds(southWest, northEast);
// zoom the map to that bounding box
map.fitBounds(bounds);
// let tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 18,
// minZoom: 3,
@ -60,10 +130,20 @@ export default class MapComponent extends Vue {
const layerOptions = {
label: DEFAULT_BASE_LAYER_NAME,
visible: true,
layer: tileLayer.wms("https://ows.terrestris.de/osm-gray/service", {
format: "image/png",
// layer: tileLayer.wms("https://ows.terrestris.de/osm-gray/service", {
// format: "image/png",
// attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
// layers: "OSM-WMS",
// }),
// tileLayer.provider("BasemapAT.grau")
layer: tileLayer("https://maps{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png", {
subdomains: ["", "1", "2", "3", "4"],
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
layers: "OSM-WMS",
bounds: [
[46.35877, 8.782379],
[49.037872, 17.189532],
],
detectRetina: false,
}),
// layer: new TileLayer(DEFAULT_BASE_LAYER_URL, {
// attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
@ -81,9 +161,4 @@ export default class MapComponent extends Vue {
}
return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
}
mounted(): void {
// alert("Hello World!");
this.initMap();
}
}