fix: update OpenSearch host configuration and improve code consistency across controllers and components
This commit is contained in:
parent
9c0221ce27
commit
6c75efbc28
7 changed files with 368 additions and 141 deletions
|
|
@ -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 = '© <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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue