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

- add leaflet

Browse Source 
- start with map-view.component: basic webgis functionalities
This commit is contained in:
Arno Kaimbacher 2022-01-25 17:22:44 +01:00
parent b0aeb03d15
commit 1f930dbb1f
12 changed files with 141 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
package-lock.json generated
View File

@ -13,6 +13,7 @@
"axios": "^0.24.0",
"class-transformer": "^0.5.1",
"core-js": "^3.6.5",
"leaflet": "^1.7.1",
"moment": "^2.29.1",
"qs": "^6.10.1",
"rxjs": "^6.6.0",
@ -23,6 +24,7 @@
"vue-router": "^4.0.12"
},
"devDependencies": {
"@types/leaflet": "^1.7.9",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
@ -1972,6 +1974,12 @@
"@types/range-parser": "*"
}
},
"node_modules/@types/geojson": {
"version": "7946.0.8",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
"dev": true
},
"node_modules/@types/glob": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@ -1997,6 +2005,15 @@
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
"dev": true
},
"node_modules/@types/leaflet": {
"version": "1.7.9",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
"integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/mime": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@ -10042,6 +10059,11 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true
},
"node_modules/leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"node_modules/levn": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@ -18629,6 +18651,12 @@
"@types/range-parser": "*"
}
},
"@types/geojson": {
"version": "7946.0.8",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
"dev": true
},
"@types/glob": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@ -18654,6 +18682,15 @@
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
"dev": true
},
"@types/leaflet": {
"version": "1.7.9",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
"integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
"dev": true,
"requires": {
"@types/geojson": "*"
}
},
"@types/mime": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@ -24986,6 +25023,11 @@
"launch-editor": "^2.3.0"
}
},
"leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"levn": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",

2
package.json
View File

@ -14,6 +14,7 @@
"axios": "^0.24.0",
"class-transformer": "^0.5.1",
"core-js": "^3.6.5",
"leaflet": "^1.7.1",
"moment": "^2.29.1",
"qs": "^6.10.1",
"rxjs": "^6.6.0",
@ -24,6 +25,7 @@
"vue-router": "^4.0.12"
},
"devDependencies": {
"@types/leaflet": "^1.7.9",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",

3
src/App.vue
View File

@ -37,6 +37,9 @@
<!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
<router-link class="navbar-link is-arrowless" to="/help">HELP</router-link>
</li>
<!-- <li class="navbar-item">
<router-link class="navbar-link is-arrowless" to="/map">Map</router-link>
</li> -->
<!-- <li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">HELP</a>
</li> -->

4
src/app.ts
View File

@ -3,7 +3,8 @@ import { Watch } from "vue-property-decorator";
// import { RouteLocation } from "vue-router";
import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
import HomeViewComponent from "./views/home-view/home-view-component.vue";
import HelpViewComponent from "./views/map-view/help-view-component.vue";
import HelpViewComponent from "./views/help-view/help-view-component.vue";
import MapViewComponent from "./views/map-view/map-view.component";
import SearchViewComponent from "./views/search-view/search-view-component.vue";
import DatasetDetailComponent from "./views/dataset-detail.component/dataset-detail.component.vue";
import ServiceViewComponent from "./views/services-view/service-view-component.vue";
@ -34,6 +35,7 @@ import { VUE_APP_PORTAL } from "./constants";
// FacetCategory,
// ActiveFacetCategory,
HelpViewComponent,
MapViewComponent,
SearchViewComponent,
DatasetDetailComponent,
ServiceViewComponent,

2
src/app2.ts
View File

@ -3,7 +3,7 @@ import { Watch } from "vue-property-decorator";
// import { RouteLocation } from "vue-router";
import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
import HomeViewComponent from "./views/home-view/home-view-component.vue";
import HelpViewComponent from "./views/map-view/help-view-component.vue";
import HelpViewComponent from "./views/help-view/help-view-component.vue";
import SearchViewComponent from "./views/search-view/search-view-component.vue";
import DatasetDetailComponent from "./views/dataset-detail.component/dataset-detail.component.vue";
import ServiceViewComponent from "./views/services-view/service-view-component.vue";

6
src/notes.txt
View File

@ -69,3 +69,9 @@ npm install --save moment@latest
npm install --save vue-matomo
declare module 'vue-matomo'; inside shims-vue.d.ts
======================== leaflet ==========================
npm install --save leaflet@latest
npm install --save-dev @types/leaflet
http://geolba.net/tethys/

8
src/router/index.ts
View File

@ -1,6 +1,7 @@
import { createWebHistory, createRouter } from "vue-router";
import HomeViewComponent from "@/views/home-view/home-view-component.vue";
import HelpViewComponent from "@/views/map-view/help-view-component.vue";
import HelpViewComponent from "@/views/help-view/help-view-component.vue";
import MapViewComponent from "@/views/map-view/map-view.component.vue";
import SearchViewComponent from "@/views/search-view/search-view-component";
import ServiceViewComponent from "@/views/services-view/service-view-component.vue";
import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
@ -21,6 +22,11 @@ const routes = [
name: "Help",
component: HelpViewComponent,
},
{
path: "/map",
name: "Map",
component: MapViewComponent,
},
{
path: "/search/:display?/:type?",
name: "Search",

0
src/views/map-view/help-view-component.scss → src/views/help-view/help-view-component.scss
View File

0
src/views/map-view/help-view-component.ts → src/views/help-view/help-view-component.ts
View File

0
src/views/map-view/help-view-component.vue → src/views/help-view/help-view-component.vue
View File

53
src/views/map-view/map-view.component.ts Normal file
View 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 = '&copy; <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
View 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>