fix: update OpenSearch host configuration and improve code consistency across controllers and components

This commit is contained in:
Kaimbacher 2026-06-24 11:38:24 +02:00
commit 6c75efbc28
7 changed files with 368 additions and 141 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref, Ref, computed } from 'vue';
import { onMounted, onUnmounted, ref, computed } from 'vue';
import SectionMain from '@/Components/SectionMain.vue';
import L, {
Map as LeafletMap,
@ -11,63 +11,63 @@ import L, {
type LatLngBounds,
type LatLngBoundsExpression,
type MapOptions,
type Renderer,
type RendererOptions,
type LeafletEvent,
TileLayer,
} from 'leaflet';
import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
// import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
import axios from 'axios';
import DrawControlComponent from '@/Components/Map/draw.component.vue';
import ZoomControlComponent from '@/Components/Map/zoom.component.vue';
import { MapService } from '@/Stores/map.service';
import { OpensearchDocument } from '@/Dataset';
import { usePage } from '@inertiajs/vue3';
/**
* Leaflet's internal renderer machinery is not part of the public @types/leaflet
* surface, so we describe the bits we touch here. This keeps the mixin body typed
* instead of falling back to `any`.
*/
interface RendererCapableMap extends LeafletMap {
options: MapOptions & { renderer?: Renderer; preferCanvas?: boolean };
_renderer?: Renderer;
_paneRenderers: Record<string, Renderer | undefined>;
_getPaneRenderer(name?: string): Renderer | false;
_createRenderer(options?: RendererOptions): Renderer;
}
// interface RendererCapableMap extends LeafletMap {
// options: MapOptions & { renderer?: Renderer; preferCanvas?: boolean };
// _renderer?: Renderer;
// _paneRenderers: Record<string, Renderer | undefined>;
// _getPaneRenderer(name?: string): Renderer | false;
// _createRenderer(options?: RendererOptions): Renderer;
// }
LeafletMap.include({
getRenderer(this: RendererCapableMap, layer: Layer): Renderer {
const layerOptions = layer.options as { renderer?: Renderer; pane?: string };
let renderer: Renderer | false | undefined =
layerOptions.renderer || this._getPaneRenderer(layerOptions.pane) || this.options.renderer || this._renderer;
// LeafletMap.include({
// getRenderer(this: RendererCapableMap, layer: Layer): Renderer {
// const layerOptions = layer.options as { renderer?: Renderer; pane?: string };
// let renderer: Renderer | false | undefined =
// layerOptions.renderer || this._getPaneRenderer(layerOptions.pane) || this.options.renderer || this._renderer;
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
// if (!renderer) {
// renderer = this._renderer = this._createRenderer();
// }
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
// if (!this.hasLayer(renderer)) {
// this.addLayer(renderer);
// }
// return renderer;
// },
_getPaneRenderer(this: RendererCapableMap, name?: string): Renderer | false {
if (name === 'overlayPane' || name === undefined) {
return false;
}
// _getPaneRenderer(this: RendererCapableMap, name?: string): Renderer | false {
// if (name === 'overlayPane' || name === undefined) {
// return false;
// }
let renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({ pane: name });
this._paneRenderers[name] = renderer;
}
return renderer;
},
// let renderer = this._paneRenderers[name];
// if (renderer === undefined) {
// renderer = this._createRenderer({ pane: name });
// this._paneRenderers[name] = renderer;
// }
// return renderer;
// },
_createRenderer(this: RendererCapableMap, options?: RendererOptions): Renderer {
return (this.options.preferCanvas && L.canvas(options)) || L.svg(options);
},
});
// _createRenderer(this: RendererCapableMap, options?: RendererOptions): Renderer {
// return (this.options.preferCanvas && L.canvas(options)) || L.svg(options);
// },
// });
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@ -86,10 +86,10 @@ const props = defineProps({
},
// OpenSearch host is provided by the server (prop / shared data), never imported
// from server-only modules into client code.
opensearchHost: {
type: String,
default: 'localhost',
},
// opensearchHost: {
// type: String,
// default: 'http://localhost:9200',
// },
mapOptions: {
type: Object,
default: () => ({
@ -101,7 +101,8 @@ const props = defineProps({
},
});
const OPENSEARCH_HOST = computed(() => `${window.location.protocol}//${props.opensearchHost}:9200`);
// const OPENSEARCH_HOST = computed(() => `${props.opensearchHost}`);
const opensearchHost = computed(() => usePage().props.opensearch_host)
const items = computed<OpensearchDocument[]>({
get() {
@ -170,7 +171,7 @@ const initMap = async (): Promise<void> => {
const attributionControl = new Control.Attribution().addTo(map);
attributionControl.setPrefix(false);
const osmGray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
const osmGray = new TileLayer.WMS('https://ows.terrestris.de/osm-gray/service', {
format: 'image/png',
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
layers: 'OSM-WMS',
@ -199,7 +200,7 @@ const handleDrawEventCreated = async (event: DrawCreatedEvent): Promise<void> =>
// drop the request body on GET, which would send an empty query.
const response = await axios<OpenSearchSearchResponse>({
method: 'POST',
url: OPENSEARCH_HOST.value + '/tethys-records/_search',
url: opensearchHost.value + '/tethys-records/_search',
headers: { 'Content-Type': 'application/json' },
data: {
size: 1000,