@w3geo/vue-place-search
Version:
Vue3 place search for Austria, using the [BEV Kataster](https://kataster.bev.gv.at/) API.
250 lines (249 loc) • 7.52 kB
JavaScript
import { Fragment as e, createBlock as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, mergeProps as o, onUnmounted as s, openBlock as c, ref as l, renderList as u, shallowRef as d, toDisplayString as f, unref as p, watch as m, withCtx as h } from "vue";
import g from "ol/Feature.js";
import _ from "ol/format/GeoJSON.js";
import v from "ol/layer/Vector.js";
import { getUserProjection as y } from "ol/proj.js";
import b from "ol/source/Vector.js";
import x from "ol/style/Stroke.js";
import S from "ol/style/Style.js";
import { quickScore as C } from "quick-score";
import { mdiInformationOutline as w, mdiMagnify as T, mdiTextSearchVariant as E } from "@mdi/js";
import { VAutocomplete as D } from "vuetify/lib/components/VAutocomplete/index.mjs";
import { VCard as O, VCardSubtitle as k, VCardText as A, VCardTitle as j } from "vuetify/lib/components/VCard/index.mjs";
import { VIcon as M } from "vuetify/lib/components/VIcon/index.mjs";
import { VListItem as N } from "vuetify/lib/components/VList/index.mjs";
import { VMenu as P } from "vuetify/lib/components/VMenu/index.mjs";
import { VTimeline as F, VTimelineItem as I } from "vuetify/lib/components/VTimeline/index.mjs";
//#region src/composables/usePlaceSearch.js
var L = d(null), R = new _(), z = new v({
source: new b({ features: [] }),
style: new S({ stroke: new x({
color: "rgba(229, 34, 34, 0.6)",
width: 4,
lineCap: "round",
lineDash: [.1, 10]
}) })
});
function B(e) {
return e && m(L, (t) => {
if (z.getSource().clear(), !t) {
z.getSource().clear(), z.setMap(null);
return;
}
let n = y() || e.getView().getProjection(), r = R.readGeometry(t.geometry, { featureProjection: n });
e.getView().fit(r.getExtent(), {
maxZoom: 19,
duration: 500,
padding: [
20,
20,
20,
20
]
});
let i = new g({ geometry: r });
z.getSource().addFeature(i), z.setMap(e);
}), s(() => {
z.getSource().clear(), z.setMap(null);
}), { result: L };
}
//#endregion
//#region src/constants.js
var V = {
1: "Bundesland",
2: "Bezirk",
3: "Gemeinde",
4: "Katastralgemeinde",
5: "Grundstück",
6: "Grenzpunkt",
7: "Nutzung",
8: "Einlagezahl",
11: "Straße + Hausnummer",
12: "Straße",
21: "Festpunkt",
101: "Koordinate WGS84",
102: "Koordinate MGI M28",
103: "Koordinate MGI M31",
104: "Koordinate MGI M34",
105: "Koordinate UTM 32N",
106: "Koordinate UTM 33N",
7101: "Stadt",
7102: "Markt",
7103: "Dorf",
7104: "Stadtteil",
7111: "Einzelhäuser",
7123: "Dorf, aufgelassen",
7124: "Stadtteil, aufgelassen",
7131: "Einzelhäuser, aufgelassen",
7201: "Gebiet > 10 km Länge ",
7202: "Gebiet 5-10 km Länge",
7203: "Gebiet 2-5 km Länge",
7204: "Gebiet < 2 km Länge",
7301: "Gebirge, Tal > 30 km Länge",
7302: "Gebirge, Tal < 30 km Länge",
7303: "Berg/Tal, bedeutend",
7304: "Berg/Tal, gering bedeutend",
7305: "Berg/Tal, lokal bedeutend",
7401: "Gletscher > 6 km Länge",
7402: "Gletscher 2-6 km Länge",
7403: "Gletscher < 2 km Länge",
7501: "Fluss > 20 m Breite",
7502: "Fluss 5-20 m Breite ",
7503: "Bach < 5 m Breite",
7504: "Bach zeitweise wasserführend",
7511: "See > 5 km²",
7512: "See 2-5 km²",
7513: "See < 2 km²",
7521: "Sonstiger Gewässername",
7611: "Sonstiger Name",
7701: "Riedname"
}, H = { class: "font-weight-normal" }, U = {
__name: "PlaceSearch",
emits: ["result"],
setup(s, { emit: g }) {
let _ = l(null), { result: v } = B(), y = g, b = d(null), x = l(!1), S = d([]), L = [
{
name: "Orte, Dörfer, Gemeinden",
example: "Salzburg, Bad Aussee, Praunfalk"
},
{
name: "Adressen, Straßen, Hausnummern",
example: "Johannes Filzer Straße 5 Salzburg"
},
{
name: "KG-Nr. + Grundstück-Nr./Einlagezahl",
example: "49203-4"
},
{
name: "Flurnamen, Riednamen, Einzelhäuser",
example: "Niederrain, Teichgarten, Ziegenreith"
},
{
name: "Sonstige geographische Gebiete",
example: "Wörthersee, Sulm, Pötschenpass"
}
], R = l(null), z = l(""), U = () => {
b.value = null, S.value = [], z.value = "";
}, W = (e, t) => {
let n = e.toLowerCase().indexOf(t.toLowerCase());
return n === -1 ? !0 : n;
}, G = (e, t) => t.score - e.score || e.properties.objectType - t.properties.objectType, K = async (e) => {
if (e.length >= 2) {
R.value && R.value.abort(), R.value = new AbortController();
let { signal: t } = R.value;
try {
let { data: n } = await (await fetch(`https://kataster.bev.gv.at/api/search/?layers=pg-adr-gn-rn-gst-kg-bl-ez&term=${encodeURIComponent(e)}`, { signal: t })).json(), r = n?.features || [];
r.forEach((t) => {
t.score = C(t.properties.name, e), t.type = V[t.properties.objectType] + (t.properties.objectType !== 3 && t.properties.pg ? ` (${t.properties.pg})` : t.properties.kg_nr ? ` (${t.properties.kg_nr})` : "");
}), r.sort(G), S.value = r, R.value = null, x.value = !1;
} catch {}
}
};
m(z, (e) => {
K(e);
}), m(b, (e) => {
v.value = e, y("result", e);
});
function q(e) {
b.value || (x.value = e, e || U());
}
return (s, l) => (c(), n(e, null, [a(D, {
ref_key: "autocompleteRef",
ref: _,
modelValue: b.value,
"onUpdate:modelValue": l[0] ||= (e) => b.value = e,
search: z.value,
"onUpdate:search": l[1] ||= (e) => z.value = e,
"auto-select-first": "",
class: "rounded",
clearable: "",
"custom-filter": W,
density: "compact",
"hide-details": "",
"hide-no-data": "",
"item-title": "properties.name",
items: S.value,
label: "Ort, Adresse, Flurname,...",
loading: !!R.value,
"min-width": "280",
"prepend-inner-icon": p(T),
"return-object": "",
"single-line": "",
variant: "outlined",
"onClick:clear": U,
onFocus: l[2] ||= (e) => q(!0)
}, {
item: h(({ props: e, item: n }) => [(c(), t(N, o(e, {
id: n.raw.id,
key: n.raw.id,
subtitle: n.raw.type,
title: n.raw.properties.name,
value: n.raw.id
}), null, 16, [
"id",
"subtitle",
"title",
"value"
]))]),
_: 1
}, 8, [
"modelValue",
"search",
"items",
"loading",
"prepend-inner-icon"
]), a(P, {
modelValue: x.value,
"onUpdate:modelValue": l[3] ||= (e) => x.value = e,
target: _.value
}, {
default: h(() => [a(O, null, {
default: h(() => [
a(j, null, {
default: h(() => [a(M, {
icon: p(w),
size: "small"
}, null, 8, ["icon"]), l[4] ||= i(" Ortssuche ")]),
_: 1
}),
a(k, null, {
default: h(() => l[5] ||= [
i(" Die Suche des "),
r("a", {
href: "https://kataster.bev.gv.at",
target: "_blank"
}, "Österreichischen Katasters", -1),
r("br", null, null, -1),
i(" Suche nach Orten, Adressen, und mehr ")
]),
_: 1
}),
a(A, null, {
default: h(() => [a(F, {
align: "start",
density: "compact",
"line-thickness": "0"
}, {
default: h(() => [(c(), n(e, null, u(L, (e, t) => a(I, {
key: t,
density: "compact",
"dot-color": "success",
icon: p(E)
}, {
default: h(() => [r("div", null, [r("div", H, [r("strong", null, f(e.name), 1)]), i(" " + f(e.example), 1)])]),
_: 2
}, 1032, ["icon"])), 64))]),
_: 1
})]),
_: 1
})
]),
_: 1
})]),
_: 1
}, 8, ["modelValue", "target"])], 64));
}
};
//#endregion
export { U as PlaceSearch, B as usePlaceSearch };
//# sourceMappingURL=vue-place-search.js.map