- add leaflet
- start with map-view.component: basic webgis functionalities
This commit is contained in:
parent
b0aeb03d15
commit
1f930dbb1f
12 changed files with 141 additions and 4 deletions
|
|
@ -1,75 +0,0 @@
|
|||
// .card {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// -webkit-box-orient: vertical;
|
||||
// -webkit-box-direction: normal;
|
||||
// -ms-flex-direction: column;
|
||||
// flex-direction: column;
|
||||
// min-width: 0;
|
||||
// word-wrap: break-word;
|
||||
// background-color: #fff;
|
||||
// background-clip: border-box;
|
||||
// border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
// border-radius: 0.25rem;
|
||||
// }
|
||||
|
||||
.card p {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-top {
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.card-img,
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// .card-body {
|
||||
// -webkit-box-flex: 1;
|
||||
// -ms-flex: 1 1 auto;
|
||||
// flex: 1 1 auto;
|
||||
// padding: 1rem 1rem;
|
||||
// }
|
||||
// .p-0 {
|
||||
// padding: 0 !important;
|
||||
// }
|
||||
|
||||
.card-title-custom {
|
||||
// font-family: Verdana;
|
||||
background-color: #336699;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
padding: 4%;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-title-custom .h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-equal-height {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a.text-secondary {
|
||||
color: #494f54 !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.text-secondary:focus,
|
||||
a.text-secondary:hover {
|
||||
color: #494f54 !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Options, Vue } from "vue-class-component";
|
||||
// import { Prop } from "vue-property-decorator";
|
||||
|
||||
@Options({
|
||||
name: "HelpViewComponent",
|
||||
})
|
||||
export default class HelpViewComponent extends Vue {
|
||||
// results: Array<any> = [];
|
||||
}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="columns is-desktop help-items">
|
||||
<div class="column col-sm">
|
||||
<div class="card super-card card-equal-height">
|
||||
<img class="card-img-top" src="@/assets/site/img/card-header1.jpg" alt="card header" />
|
||||
|
||||
<div class="card-body p-0">
|
||||
<h5 class="card-title-custom">Tethys RDR</h5>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="card-text">
|
||||
Tethys RDR ist ein Datenverlag der Geologischen Bundesanstalt (GBA), der ausschließlich an der GBA generierte geowissenschaftliche Forschungsdat en
|
||||
publiziert. Die Datenpublikationen können sowohl in deutscher, als auch in englischer Sprache publiziert werden. Durch die Bereitstellung der
|
||||
Datenpublikation zusammen mit Metadaten nach standardisierten Schemata werden die Publikationen auffindbar und zitierbar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<a href="/contact" class="button is-primary custom-button">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
<strong>KONTAKT</strong>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-sm">
|
||||
<div class="card super-card card-equal-height">
|
||||
<img class="card-img-top" src="@/assets/site/img/card-header2.jpg" alt="card header" />
|
||||
<div class="card-body p-0">
|
||||
<h5 class="card-title-custom">Voraussetzungen</h5>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="card-text">
|
||||
GBA-Angehörigkeit oder in Kooperation mit der GBA gemeinsame Publikation der Daten. Im Besitz eines eigenen Zugangscodes zu sein bzw. um den Zugangscode
|
||||
anzufragen (Kontakt).
|
||||
</p>
|
||||
<p class="card-text">Die Datenpublikationsrichtlinien gelesen, verstanden und akzeptiert zu haben.</p>
|
||||
<p class="card-text">Die Datensätze vollständig und fachlich korrekt hochladen.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<a href="/contact" class="button is-primary custom-button">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
<strong>KONTAKT</strong>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-sm">
|
||||
<div class="card super-card card-equal-height">
|
||||
<img class="card-img-top" src="@/assets/site/img/card-header3.jpg" alt="card header" />
|
||||
<div class="card-body p-0">
|
||||
<h5 class="card-title-custom">DATEN UPLOAD</h5>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="card-text">
|
||||
Wird eine Datenpublikation erwünscht, so kann der Verfasser der Publikation sich direkt bei Tethys RDR einloggen und den Publikationsablauf starten.
|
||||
</p>
|
||||
<p class="card-text">
|
||||
Wurde noch kein <a href="" class="text-secondary">account</a> angelegt, steht das Tethys RDR-Team bereit, um die weiteren Schritte zu klären (Kontakt).
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<a href="/contact" class="button is-primary custom-button">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
<strong>KONTAKT</strong>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" scoped>
|
||||
import HelpViewComponent from "./help-view-component";
|
||||
export default HelpViewComponent;
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import "./help-view-component.scss";
|
||||
</style>
|
||||
53
src/views/map-view/map-view.component.ts
Normal file
53
src/views/map-view/map-view.component.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { Options, Vue } from "vue-class-component";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from "leaflet";
|
||||
|
||||
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';
|
||||
|
||||
@Options({
|
||||
name: "MapViewComponent",
|
||||
components: {},
|
||||
})
|
||||
export default class MapViewComponent extends Vue {
|
||||
/**
|
||||
* A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
|
||||
*/
|
||||
@Prop()
|
||||
public mapId!: string;
|
||||
|
||||
protected oldBaseLayer: Control.LayersObject = {};
|
||||
protected map!: Map;
|
||||
protected zoomControl!: Control.Zoom;
|
||||
|
||||
beforeMount() {
|
||||
if (this.mapId === undefined || this.mapId === null) {
|
||||
this.mapId = this.generateUUID();
|
||||
}
|
||||
}
|
||||
|
||||
protected initMap(): void {
|
||||
this.map = new Map(this.mapId);
|
||||
// this.mapService.setMap(this.mapId, this.map);
|
||||
// this.onMapInitializedEvent.emit(this.mapId);
|
||||
|
||||
// if (this.baseMaps && this.baseMaps.size > 0) {
|
||||
// this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
|
||||
// } else {
|
||||
// this.addBaseMap();
|
||||
// }
|
||||
// if (this.fitBounds) {
|
||||
// this.map.fitBounds(this.fitBounds);
|
||||
// }
|
||||
}
|
||||
|
||||
private generateUUID(): string {
|
||||
function s4() {
|
||||
return Math.floor((1 + Math.random()) * 0x10000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
}
|
||||
return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
|
||||
}
|
||||
}
|
||||
23
src/views/map-view/map-view.component.vue
Normal file
23
src/views/map-view/map-view.component.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<div class="column is-full text-center">
|
||||
<h1>TETHYS SERVICES</h1>
|
||||
<p class="lead">Map</p>
|
||||
<hr class="center-line" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import MapViewComponent from "./map-view.component";
|
||||
export default MapViewComponent;
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.section {
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue