geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

- npm updates, remove rxjs

Browse source 
- add draw.component.vue
- only load needed leaflet classes into map.component.vue an Submitter/Create.vue
- rename js/store.Map.ts to js/Stores/map.service.ts
-
This commit is contained in:
Kaimbacher 2023-04-06 18:56:41 +02:00
parent cd66f318b6
commit a744ae7e5b
19 changed files with 683 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

37
resources/js/Components/Map/map.component.vue
View file

@ -3,6 +3,7 @@
<!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
<div :id="mapId" class="map-container mapDesktop rounded">
<ZoomControlComponent :mapId="mapId"></ZoomControlComponent>
<DrawControlComponent :mapId="mapId"></DrawControlComponent>
</div>
</div>
</template>
@ -11,10 +12,21 @@
import { EventEmitter } from './EventEmitter';
import { Component, Vue, Prop } from 'vue-facing-decorator';
// import type { Coverage } from '@/Dataset';
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
import { LayerOptions, LayerMap } from './MapOptions';
import { MapService } from '@/Stores/map';
// import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
import { Map } from 'leaflet/src/map/index';
import { Control } from 'leaflet/src/control/Control';
import { LatLngBoundsExpression, toLatLngBounds } from 'leaflet/src/geo/LatLngBounds';
import { toLatLng } from 'leaflet/src/geo/LatLng';
import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
import { Attribution } from 'leaflet/src/control/Control.Attribution';
// import { Attribution } from 'leaflet';
// import { FeatureGroup } from 'leaflet/src/layer/FeatureGroup';
import { MapOptions } from './MapOptions';
import { LayerOptions, LayerMap } from './LayerOptions';
import { MapService } from '@/Stores/map.service';
import ZoomControlComponent from './zoom.component.vue';
import DrawControlComponent from './draw.component.vue';
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
// const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
@ -24,6 +36,7 @@ const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://o
name: 'MapComponent',
components: {
ZoomControlComponent,
DrawControlComponent
},
})
export default class MapComponent extends Vue {
@ -64,7 +77,7 @@ export default class MapComponent extends Vue {
public onMapInitializedEvent: EventEmitter<string> = new EventEmitter<string>();
protected map!: Map;
protected drawnItems!: FeatureGroup<any>;
// protected drawnItems!: FeatureGroup<any>;
// @Prop({ type: Object })
// geolocation: Coverage;
@ -91,14 +104,17 @@ export default class MapComponent extends Vue {
// if (this.fitBounds) {
// this.map.fitBounds(this.fitBounds);
// }
const southWest = latLng(46.5, 9.9);
const northEast = latLng(48.9, 16.9);
const bounds = latLngBounds(southWest, northEast);
const southWest = toLatLng(46.5, 9.9);
const northEast = toLatLng(48.9, 16.9);
const bounds = toLatLngBounds(southWest, northEast);
map.fitBounds(bounds);
const attributionControl = new Attribution().addTo(this.map);
attributionControl.setPrefix(false);
// Initialise the FeatureGroup to store editable layers
let drawnItems = (this.drawnItems = new FeatureGroup());
map.addLayer(drawnItems);
// let drawnItems = (this.drawnItems = new FeatureGroup());
// map.addLayer(drawnItems);
}
private addBaseMap(layerOptions?: LayerOptions): void {
@ -108,7 +124,7 @@ export default class MapComponent extends Vue {
// subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
// attribution: 'Datenquelle: <a href="http://www.basemap.at/">basemap.at</a>',
// });
let osmGgray = tileLayer.wms('https://ows.terrestris.de/osm-gray/service', {
let osmGgray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
format: 'image/png',
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
layers: 'OSM-WMS',
@ -118,7 +134,6 @@ export default class MapComponent extends Vue {
visible: true,
layer: osmGgray,
};
this.map.attributionControl.setPrefix(false);
layerOptions.layer.addTo(this.map);
}
}