@w3geo/vue-place-search
Version:
Vue3 place search for Austria, using the [BEV Kataster](https://kataster.bev.gv.at/) API.
266 lines (265 loc) • 8.89 kB
JavaScript
import { shallowRef as G, watch as T, onUnmounted as N, ref as k, createElementBlock as x, openBlock as y, Fragment as L, createVNode as a, unref as V, withCtx as l, createBlock as _, mergeProps as K, createTextVNode as S, createElementVNode as c, renderList as E, toDisplayString as B } from "vue";
import U from "ol/Feature.js";
import O from "ol/format/GeoJSON.js";
import A from "ol/layer/Vector.js";
import { getUserProjection as D } from "ol/proj.js";
import R from "ol/source/Vector.js";
import $ from "ol/style/Stroke.js";
import H from "ol/style/Style.js";
import { quickScore as J } from "quick-score";
import { mdiMagnify as W, mdiInformationOutline as Z, mdiTextSearchVariant as q } from "@mdi/js";
import { VAutocomplete as Q } from "vuetify/lib/components/VAutocomplete/index.mjs";
import { VCard as X, VCardTitle as Y, VCardSubtitle as ee, VCardText as te } from "vuetify/lib/components/VCard/index.mjs";
import { VIcon as re } from "vuetify/lib/components/VIcon/index.mjs";
import { VListItem as ne } from "vuetify/lib/components/VList/index.mjs";
import { VMenu as oe } from "vuetify/lib/components/VMenu/index.mjs";
import { VTimeline as ae, VTimelineItem as le } from "vuetify/lib/components/VTimeline/index.mjs";
const M = G(null), se = new O(), s = new A({
source: new R({
features: []
}),
style: new H({
stroke: new $({
color: "rgba(229, 34, 34, 0.6)",
width: 4,
lineCap: "round",
lineDash: [0.1, 10]
})
})
});
function ie(u) {
return u && T(M, (d) => {
if (s.getSource().clear(), !d) {
s.getSource().clear(), s.setMap(null);
return;
}
const p = D() || u.getView().getProjection(), g = se.readGeometry(d.geometry, {
featureProjection: p
});
u.getView().fit(g.getExtent(), {
maxZoom: 19,
duration: 500,
padding: [20, 20, 20, 20]
});
const b = new U({
geometry: g
});
s.getSource().addFeature(b), s.setMap(u);
}), N(() => {
s.getSource().clear(), s.setMap(null);
}), { result: M };
}
const ue = {
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"
}, me = { class: "font-weight-normal" }, Le = {
__name: "PlaceSearch",
emits: ["result"],
setup(u, { emit: d }) {
const p = k(null), { result: g } = ie(), b = d, m = G(null), f = k(!1), v = G([]), j = [
{
name: "Orte, Dörfer, Gemeinden",
example: "Salzburg, Bad Aussee, Praunfalk"
},
{
name: "Adressen, Straßen, Hausnummern",
example: "Johannes Filzer Straße 5 Salzburg"
},
{
name: "KG-Nummer + Grundstücksnummer",
example: "49203-4"
},
{
name: "Flurnamen, Riednamen, Einzelhäuser",
example: "Niederrain, Teichgarten, Ziegenreith"
},
{
name: "Sonstige geographische Gebiete",
example: "Wörthersee, Sulm, Pötschenpass"
}
], i = k(null), h = k(""), z = () => {
m.value = null, v.value = [], h.value = "";
}, C = (t, e) => {
const r = t.toLowerCase().indexOf(e.toLowerCase());
return r === -1 ? !0 : r;
}, F = (t, e) => e.score - t.score || t.properties.objectType - e.properties.objectType, P = async (t) => {
if (t.length >= 2) {
i.value && i.value.abort(), i.value = new AbortController();
const { signal: e } = i.value;
try {
const r = await fetch(
`https://kataster.bev.gv.at/api/search/?layers=pg-adr-gn-rn-gst-kg-bl&term=${encodeURIComponent(t)}`,
{ signal: e }
), { data: n } = await r.json(), w = (n == null ? void 0 : n.features) || [];
w.forEach((o) => {
o.score = J(o.properties.name, t), o.type = ue[o.properties.objectType] + (o.properties.objectType !== 3 && o.properties.pg ? ` (${o.properties.pg})` : o.properties.kg_nr ? ` (${o.properties.kg_nr})` : "");
}), w.sort(F), v.value = w, i.value = null, f.value = !1;
} catch {
}
}
};
T(h, (t) => {
P(t);
}), T(m, (t) => {
g.value = t, b("result", t);
});
function I(t) {
m.value || (f.value = t);
}
return (t, e) => (y(), x(L, null, [
a(Q, {
ref_key: "autocompleteRef",
ref: p,
modelValue: m.value,
"onUpdate:modelValue": e[0] || (e[0] = (r) => m.value = r),
search: h.value,
"onUpdate:search": e[1] || (e[1] = (r) => h.value = r),
"auto-select-first": "",
class: "rounded",
clearable: "",
"custom-filter": C,
density: "compact",
"hide-details": "",
"hide-no-data": "",
"item-title": "properties.name",
items: v.value,
label: "Ort, Adresse, Flurname,...",
loading: !!i.value,
"min-width": "280",
"prepend-inner-icon": V(W),
"return-object": "",
"single-line": "",
variant: "outlined",
"onClick:clear": z,
onFocus: e[2] || (e[2] = (r) => I(!0))
}, {
item: l(({ props: r, item: n }) => [
(y(), _(ne, K(r, {
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(oe, {
modelValue: f.value,
"onUpdate:modelValue": e[3] || (e[3] = (r) => f.value = r),
target: p.value
}, {
default: l(() => [
a(X, null, {
default: l(() => [
a(Y, null, {
default: l(() => [
a(re, {
icon: V(Z),
size: "small"
}, null, 8, ["icon"]),
e[4] || (e[4] = S(" Ortssuche "))
]),
_: 1
}),
a(ee, null, {
default: l(() => e[5] || (e[5] = [
S(" Die Suche des "),
c("a", {
href: "https://kataster.bev.gv.at",
target: "_blank"
}, "Österreichischen Katasters", -1),
c("br", null, null, -1),
S(" Suche nach Orten, Adressen, und mehr ")
])),
_: 1
}),
a(te, null, {
default: l(() => [
a(ae, {
align: "start",
density: "compact",
"line-thickness": "0"
}, {
default: l(() => [
(y(), x(L, null, E(j, (r, n) => a(le, {
key: n,
density: "compact",
"dot-color": "success",
icon: V(q)
}, {
default: l(() => [
c("div", null, [
c("div", me, [
c("strong", null, B(r.name), 1)
]),
S(" " + B(r.example), 1)
])
]),
_: 2
}, 1032, ["icon"])), 64))
]),
_: 1
})
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "target"])
], 64));
}
};
export {
Le as PlaceSearch,
ie as usePlaceSearch
};
//# sourceMappingURL=vue-place-search.js.map