- add webgis: overview of all oai datasets via mocking service
This commit is contained in:
parent
5fe134a650
commit
745c3e1349
8 changed files with 2142 additions and 55 deletions
|
|
@ -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 = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
|
||||
const DEFAULT_BASE_LAYER_ATTRIBUTION = '© <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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div v-bind:id="mapId" class="map-container mapDesktop"></div>
|
||||
<div v-bind:id="mapId" class="map-container mapDesktop">
|
||||
<div class="loading">
|
||||
<span class="spinner-border text-danger" role="status"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -8,12 +12,37 @@ export default MapComponent;
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~bulma/sass/utilities/initial-variables.sass";
|
||||
.mapDesktop {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: 0px;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
// @media screen and (min-width: 769px) {
|
||||
@media screen and (min-width: $tablet), print {
|
||||
.mapDesktop {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1000;
|
||||
color: red;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue