@delta10/atlas-sdk 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Example.vue.d.ts +3 -0
- package/dist/_virtual/_plugin-vue_export-helper.js +9 -0
- package/dist/assets/icons/layers.svg.js +23 -0
- package/dist/assets/icons/map.svg.js +21 -0
- package/dist/assets/icons/minus.svg.js +20 -0
- package/dist/assets/icons/plus.svg.js +20 -0
- package/dist/components/Map.vue.d.ts +99 -0
- package/dist/components/Map.vue.js +7 -0
- package/dist/components/Map.vue2.js +522 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/panels/BaseLayers.vue.d.ts +23 -0
- package/dist/components/panels/BaseLayers.vue.js +7 -0
- package/dist/components/panels/BaseLayers.vue2.js +50 -0
- package/dist/components/panels/Layers.vue.d.ts +23 -0
- package/dist/components/panels/Layers.vue.js +7 -0
- package/dist/components/panels/Layers.vue2.js +35 -0
- package/dist/data/demo-data.d.ts +15 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +10 -0
- package/dist/main.d.ts +1 -0
- package/dist/{assets/index-OirD7Ry3.css → style.css} +1 -1
- package/dist/utils/projections.d.ts +5 -0
- package/dist/utils/projections.js +8 -0
- package/package.json +1 -1
- package/dist/assets/index-Bl_2ECGV.js +0 -12
- package/dist/index.html +0 -14
|
@@ -0,0 +1,522 @@
|
|
|
1
|
+
import { defineComponent as he, ref as c, computed as h, onMounted as ke, openBlock as a, createElementBlock as F, createVNode as d, unref as s, withCtx as b, createBlock as f, normalizeStyle as Se, createCommentVNode as p, Fragment as W, renderList as H, mergeProps as _e, createElementVNode as g, normalizeClass as J, Transition as Q } from "vue";
|
|
2
|
+
import { OlMap as Oe, OlProjectionRegister as Fe, OlView as Ie, OlFeature as Ce, OlOverlay as Me } from "vue3-openlayers/map";
|
|
3
|
+
import { OlTileLayer as X, OlVectorLayer as Te } from "vue3-openlayers/layers";
|
|
4
|
+
import { OlSourceTileWMS as ze, OlSourceWMTS as xe, OlSourceVector as Pe } from "vue3-openlayers/sources";
|
|
5
|
+
import { OlGeomPoint as Be, OlGeomPolygon as je } from "vue3-openlayers/geometries";
|
|
6
|
+
import { OlStyle as Ae } from "vue3-openlayers/styles";
|
|
7
|
+
import { OlInteractionSelect as Ne, OlInteractionModify as Ve, OlInteractionSnap as Ze } from "vue3-openlayers/interactions";
|
|
8
|
+
import { epsg28992 as A } from "../utils/projections.js";
|
|
9
|
+
import { optionsFromCapabilities as Re } from "ol/source/WMTS";
|
|
10
|
+
import Ge from "ol/format/WMTSCapabilities";
|
|
11
|
+
import { Style as $, Fill as D, Stroke as U, Circle as We, Text as $e } from "ol/style";
|
|
12
|
+
import { boundingExtent as De } from "ol/extent";
|
|
13
|
+
import { unByKey as Ue } from "ol/Observable";
|
|
14
|
+
import { Collection as Ke } from "ol";
|
|
15
|
+
import "ol/geom";
|
|
16
|
+
import Ye from "../assets/icons/map.svg.js";
|
|
17
|
+
import qe from "../assets/icons/layers.svg.js";
|
|
18
|
+
import He from "../assets/icons/plus.svg.js";
|
|
19
|
+
import Je from "../assets/icons/minus.svg.js";
|
|
20
|
+
import Qe from "./panels/BaseLayers.vue.js";
|
|
21
|
+
import Xe from "./panels/Layers.vue.js";
|
|
22
|
+
const Ee = { class: "map-container" }, et = { class: "bottom-left-panels" }, tt = {
|
|
23
|
+
key: 0,
|
|
24
|
+
class: "layers-control"
|
|
25
|
+
}, ot = ["aria-expanded"], nt = { class: "bottom-right-panels" }, it = {
|
|
26
|
+
key: 0,
|
|
27
|
+
class: "base-layers-control"
|
|
28
|
+
}, st = ["aria-expanded"], rt = { class: "zoom-panel" }, Ct = /* @__PURE__ */ he({
|
|
29
|
+
__name: "Map",
|
|
30
|
+
props: {
|
|
31
|
+
layers: { default: () => [] },
|
|
32
|
+
baseLayers: { default: () => [] },
|
|
33
|
+
toggleableLayers: { default: () => [] },
|
|
34
|
+
interactions: {},
|
|
35
|
+
zoom: { default: 10 },
|
|
36
|
+
center: { default: () => [12e4, 487e3] }
|
|
37
|
+
},
|
|
38
|
+
emits: ["featureSelected", "featureDeselected", "featureModified", "mapClicked", "modifyCancelled"],
|
|
39
|
+
setup(_, { expose: E, emit: ee }) {
|
|
40
|
+
const i = _, z = ee, x = c(), w = c(), N = c(), te = c({}), V = c({}), I = c(!1), C = c(!1), O = c(null), M = c(/* @__PURE__ */ new Set()), Z = c(!1), T = c(null), L = c(null), P = c(null), B = c(null), k = c(null), K = h(() => k.value), S = c(
|
|
41
|
+
new globalThis.Map()
|
|
42
|
+
), Y = (e, o, t, n) => {
|
|
43
|
+
if (!e) return;
|
|
44
|
+
if (e instanceof $ || typeof e == "function")
|
|
45
|
+
return e;
|
|
46
|
+
const r = {}, l = (m) => {
|
|
47
|
+
if (Array.isArray(m)) {
|
|
48
|
+
const [y, ...u] = m;
|
|
49
|
+
switch (y) {
|
|
50
|
+
case "get":
|
|
51
|
+
return o?.getProperties()?.[u[0]] ?? null;
|
|
52
|
+
case "case":
|
|
53
|
+
for (let v = 0; v < u.length - 1; v += 2)
|
|
54
|
+
if (l(u[v]))
|
|
55
|
+
return l(u[v + 1]);
|
|
56
|
+
return l(u[u.length - 1]);
|
|
57
|
+
case "==":
|
|
58
|
+
return l(u[0]) === l(u[1]);
|
|
59
|
+
case "coalesce":
|
|
60
|
+
for (const v of u) {
|
|
61
|
+
const G = l(v);
|
|
62
|
+
if (G != null) return G;
|
|
63
|
+
}
|
|
64
|
+
return null;
|
|
65
|
+
default:
|
|
66
|
+
return m;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return m;
|
|
70
|
+
};
|
|
71
|
+
if (e["fill-color"] && (r.fill = new D({ color: l(e["fill-color"]) })), (e["stroke-color"] || e["stroke-width"]) && (r.stroke = new U({
|
|
72
|
+
color: l(e["stroke-color"]) || "#3399CC",
|
|
73
|
+
width: l(e["stroke-width"]) || 1.25
|
|
74
|
+
})), e["circle-radius"] || e["circle-fill-color"] || e["circle-stroke-color"]) {
|
|
75
|
+
const m = l(e["circle-radius"]) || 5, y = l(e["circle-fill-color"]), u = l(e["circle-stroke-color"]) || "#3399CC", v = l(e["circle-stroke-width"]) || 1.25;
|
|
76
|
+
r.image = new We({
|
|
77
|
+
radius: m,
|
|
78
|
+
fill: y ? new D({ color: y }) : void 0,
|
|
79
|
+
stroke: new U({ color: u, width: v })
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
if (e["text-value"]) {
|
|
83
|
+
const m = l(e["text-value"]);
|
|
84
|
+
m && (r.text = new $e({
|
|
85
|
+
text: String(m),
|
|
86
|
+
fill: new D({ color: "#000" }),
|
|
87
|
+
stroke: new U({ color: "#fff", width: 2 })
|
|
88
|
+
}));
|
|
89
|
+
}
|
|
90
|
+
return new $(r);
|
|
91
|
+
}, oe = (e) => typeof e == "function" ? e : e instanceof $ ? (o, t, n) => [e] : (o, t, n) => {
|
|
92
|
+
const r = Y(e, o);
|
|
93
|
+
return r ? [r] : void 0;
|
|
94
|
+
}, ne = h(() => i.layers.map((e) => {
|
|
95
|
+
if (e.type === "wmts") {
|
|
96
|
+
const o = S.value.get(e.options.identifier);
|
|
97
|
+
return {
|
|
98
|
+
type: "wmts",
|
|
99
|
+
identifier: e.options.identifier,
|
|
100
|
+
options: o || null
|
|
101
|
+
};
|
|
102
|
+
} else return e.type === "wms" ? {
|
|
103
|
+
type: "wms",
|
|
104
|
+
identifier: e.options.identifier,
|
|
105
|
+
wmsUrl: e.options.url,
|
|
106
|
+
layerName: e.options.layer
|
|
107
|
+
} : {
|
|
108
|
+
type: "vector",
|
|
109
|
+
identifier: e.options.identifier,
|
|
110
|
+
options: e.options,
|
|
111
|
+
style: e.options.style,
|
|
112
|
+
styleFunction: e.options.styleFunction
|
|
113
|
+
};
|
|
114
|
+
})), j = h(() => {
|
|
115
|
+
if (!O.value || !i.baseLayers)
|
|
116
|
+
return null;
|
|
117
|
+
const e = i.baseLayers.find(
|
|
118
|
+
(o) => o.options.identifier === O.value
|
|
119
|
+
);
|
|
120
|
+
return !e || e.type === "wmts" && !S.value.get(e.options.identifier) ? null : e;
|
|
121
|
+
}), ie = h(() => j.value && S.value.get(j.value.options.identifier) || null), se = h(() => (i.toggleableLayers || []).filter(
|
|
122
|
+
(e) => M.value.has(e.options.identifier)
|
|
123
|
+
).map((e) => e.type === "wms" ? {
|
|
124
|
+
type: "wms",
|
|
125
|
+
identifier: e.options.identifier,
|
|
126
|
+
wmsUrl: e.options.url,
|
|
127
|
+
layerName: e.options.layer
|
|
128
|
+
} : e.type === "wmts" ? {
|
|
129
|
+
type: "wmts",
|
|
130
|
+
identifier: e.options.identifier,
|
|
131
|
+
wmtsOptions: S.value.get(e.options.identifier)
|
|
132
|
+
} : e.type === "vector" ? {
|
|
133
|
+
type: "vector",
|
|
134
|
+
identifier: e.options.identifier,
|
|
135
|
+
options: e.options,
|
|
136
|
+
style: e.options.style,
|
|
137
|
+
styleFunction: e.options.styleFunction
|
|
138
|
+
} : {
|
|
139
|
+
...e,
|
|
140
|
+
identifier: e.options.identifier
|
|
141
|
+
})), re = h(() => {
|
|
142
|
+
const e = [];
|
|
143
|
+
if (j.value) {
|
|
144
|
+
const n = j.value;
|
|
145
|
+
n.type === "wmts" ? e.push({
|
|
146
|
+
type: "wmts",
|
|
147
|
+
identifier: n.options.identifier,
|
|
148
|
+
wmtsOptions: ie.value,
|
|
149
|
+
zIndex: 0
|
|
150
|
+
}) : n.type === "wms" ? e.push({
|
|
151
|
+
type: "wms",
|
|
152
|
+
identifier: n.options.identifier,
|
|
153
|
+
wmsUrl: n.options.url,
|
|
154
|
+
layerName: n.options.layer,
|
|
155
|
+
zIndex: 0
|
|
156
|
+
}) : n.type === "vector" && e.push({
|
|
157
|
+
type: "vector",
|
|
158
|
+
identifier: n.options.identifier,
|
|
159
|
+
options: n.options,
|
|
160
|
+
style: n.options.style,
|
|
161
|
+
styleFunction: n.options.styleFunction,
|
|
162
|
+
zIndex: 0
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
const o = se.value.map((n, r) => ({
|
|
166
|
+
...n,
|
|
167
|
+
zIndex: r + 10
|
|
168
|
+
})), t = ne.value.map((n, r) => ({
|
|
169
|
+
...n,
|
|
170
|
+
zIndex: o.length + r + 20
|
|
171
|
+
}));
|
|
172
|
+
return [...e, ...o, ...t];
|
|
173
|
+
}), ae = () => {
|
|
174
|
+
I.value = !I.value;
|
|
175
|
+
}, le = () => {
|
|
176
|
+
C.value = !C.value;
|
|
177
|
+
}, ce = (e) => {
|
|
178
|
+
M.value.has(e) ? M.value.delete(e) : M.value.add(e);
|
|
179
|
+
}, ue = (e) => {
|
|
180
|
+
O.value = e;
|
|
181
|
+
}, fe = () => {
|
|
182
|
+
if (w.value?.view) {
|
|
183
|
+
const e = w.value.view, o = e.getZoom(), t = e.getMaxZoom();
|
|
184
|
+
typeof o == "number" && o < t && e.animate({ zoom: o + 1, duration: 250 });
|
|
185
|
+
}
|
|
186
|
+
}, de = () => {
|
|
187
|
+
if (w.value?.view) {
|
|
188
|
+
const e = w.value.view, o = e.getZoom(), t = e.getMinZoom();
|
|
189
|
+
typeof o == "number" && o > t && e.animate({ zoom: o - 1, duration: 250 });
|
|
190
|
+
}
|
|
191
|
+
}, R = async (e, o, t) => {
|
|
192
|
+
try {
|
|
193
|
+
const r = await (await fetch(e)).text(), l = new Ge().read(r), m = t ? [t, "image/jpeg", "image/png"] : ["image/png", "image/jpeg"];
|
|
194
|
+
let y = null;
|
|
195
|
+
for (const u of m)
|
|
196
|
+
try {
|
|
197
|
+
if (y = Re(l, {
|
|
198
|
+
layer: o,
|
|
199
|
+
matrixSet: "EPSG:28992",
|
|
200
|
+
projection: "EPSG:28992",
|
|
201
|
+
format: u,
|
|
202
|
+
crossOrigin: "anonymous",
|
|
203
|
+
style: "default"
|
|
204
|
+
}), y) break;
|
|
205
|
+
} catch (v) {
|
|
206
|
+
console.warn(`Format ${u} failed for layer ${o}:`, v);
|
|
207
|
+
}
|
|
208
|
+
return y && (y.style = "default"), y;
|
|
209
|
+
} catch (n) {
|
|
210
|
+
return console.error("Failed to fetch WMTS capabilities:", n), null;
|
|
211
|
+
}
|
|
212
|
+
}, pe = (e) => {
|
|
213
|
+
if (!e || e.length === 0 || !w.value?.view) return;
|
|
214
|
+
const o = [];
|
|
215
|
+
for (const t of e)
|
|
216
|
+
if (t.type === "Point")
|
|
217
|
+
o.push(t.coordinates);
|
|
218
|
+
else if (t.type === "Polygon") {
|
|
219
|
+
const n = t.coordinates;
|
|
220
|
+
for (const r of n)
|
|
221
|
+
for (const l of r)
|
|
222
|
+
o.push(l);
|
|
223
|
+
}
|
|
224
|
+
if (o.length > 0) {
|
|
225
|
+
const t = De(o);
|
|
226
|
+
w.value.view.fit(t, {
|
|
227
|
+
padding: [50, 50, 50, 50]
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
};
|
|
231
|
+
ke(async () => {
|
|
232
|
+
if (k.value = new Ke([]), !O.value && i.baseLayers && i.baseLayers.length > 0) {
|
|
233
|
+
const e = i.baseLayers[0];
|
|
234
|
+
e?.options.identifier && (O.value = e.options.identifier);
|
|
235
|
+
}
|
|
236
|
+
await new Promise((e) => setTimeout(e, 100)), x.value?.map && x.value.map.on("singleclick", (e) => {
|
|
237
|
+
z("mapClicked", {
|
|
238
|
+
coordinate: e.coordinate,
|
|
239
|
+
pixel: e.pixel
|
|
240
|
+
});
|
|
241
|
+
});
|
|
242
|
+
for (const e of i.layers.filter((o) => o.type === "wmts"))
|
|
243
|
+
if (e.options.url) {
|
|
244
|
+
const o = await R(
|
|
245
|
+
e.options.url,
|
|
246
|
+
e.options.identifier,
|
|
247
|
+
e.options.format
|
|
248
|
+
);
|
|
249
|
+
S.value.set(e.options.identifier, o);
|
|
250
|
+
}
|
|
251
|
+
if (i.baseLayers) {
|
|
252
|
+
for (const e of i.baseLayers.filter((o) => o.type === "wmts"))
|
|
253
|
+
if (e.options.url) {
|
|
254
|
+
const o = await R(
|
|
255
|
+
e.options.url,
|
|
256
|
+
e.options.identifier,
|
|
257
|
+
e.options.format
|
|
258
|
+
);
|
|
259
|
+
S.value.set(e.options.identifier, o);
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
if (i.toggleableLayers) {
|
|
263
|
+
for (const e of i.toggleableLayers.filter(
|
|
264
|
+
(o) => o.type === "wmts"
|
|
265
|
+
))
|
|
266
|
+
if (e.options.url) {
|
|
267
|
+
const o = await R(
|
|
268
|
+
e.options.url,
|
|
269
|
+
e.options.identifier,
|
|
270
|
+
e.options.format
|
|
271
|
+
);
|
|
272
|
+
S.value.set(e.options.identifier, o);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
});
|
|
276
|
+
const me = h(() => {
|
|
277
|
+
if (!i.interactions?.selectable?.layers || i.interactions.selectable.layers.length === 0)
|
|
278
|
+
return;
|
|
279
|
+
const e = i.interactions.selectable.layers;
|
|
280
|
+
return (o, t) => {
|
|
281
|
+
if (!t) return !1;
|
|
282
|
+
const n = t.get("name");
|
|
283
|
+
return e.includes(n);
|
|
284
|
+
};
|
|
285
|
+
}), ye = h(() => Y(i.interactions?.selectable?.style, void 0)), ve = (e) => {
|
|
286
|
+
k.value && (k.value.clear(), e.selected && e.selected.length > 0 && k.value.push(e.selected[0])), z("featureSelected", e);
|
|
287
|
+
}, ge = (e) => {
|
|
288
|
+
L.value = e;
|
|
289
|
+
const o = e.features.getArray()[0];
|
|
290
|
+
if (o) {
|
|
291
|
+
const t = o.getGeometry();
|
|
292
|
+
P.value = t.clone();
|
|
293
|
+
const n = t.getCoordinates();
|
|
294
|
+
T.value = n, Z.value = !0, B.value = t.on("change", () => {
|
|
295
|
+
const r = t.getCoordinates();
|
|
296
|
+
T.value = r;
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
}, be = (e) => {
|
|
300
|
+
L.value = e;
|
|
301
|
+
}, we = () => {
|
|
302
|
+
if (L.value) {
|
|
303
|
+
const e = L.value.features.getArray();
|
|
304
|
+
z("featureModified", { features: e }), k.value && k.value.clear(), N.value?.selectInteraction && N.value.selectInteraction.getFeatures().clear();
|
|
305
|
+
}
|
|
306
|
+
q();
|
|
307
|
+
}, Le = () => {
|
|
308
|
+
if (L.value && P.value) {
|
|
309
|
+
const e = L.value.features.getArray()[0];
|
|
310
|
+
e && e.setGeometry(P.value);
|
|
311
|
+
const o = L.value.features.getArray();
|
|
312
|
+
z("modifyCancelled", { features: o });
|
|
313
|
+
}
|
|
314
|
+
q();
|
|
315
|
+
}, q = () => {
|
|
316
|
+
Z.value = !1, T.value = null, L.value = null, P.value = null, B.value && (Ue(B.value), B.value = null);
|
|
317
|
+
};
|
|
318
|
+
return E({ map: x, view: w, fitToFeatures: pe }), (e, o) => (a(), F("div", Ee, [
|
|
319
|
+
d(s(Oe), {
|
|
320
|
+
ref_key: "mapRef",
|
|
321
|
+
ref: x,
|
|
322
|
+
style: { width: "100%", height: "100%" },
|
|
323
|
+
controls: []
|
|
324
|
+
}, {
|
|
325
|
+
default: b(() => [
|
|
326
|
+
d(s(Fe), {
|
|
327
|
+
projectionName: s(A).name,
|
|
328
|
+
projectionDef: s(A).def,
|
|
329
|
+
extent: s(A).extent
|
|
330
|
+
}, null, 8, ["projectionName", "projectionDef", "extent"]),
|
|
331
|
+
d(s(Ie), {
|
|
332
|
+
ref_key: "viewRef",
|
|
333
|
+
ref: w,
|
|
334
|
+
center: _.center,
|
|
335
|
+
zoom: _.zoom,
|
|
336
|
+
projection: s(A).name
|
|
337
|
+
}, null, 8, ["center", "zoom", "projection"]),
|
|
338
|
+
i.interactions?.selectable?.enabled ? (a(), f(s(Ne), {
|
|
339
|
+
key: 0,
|
|
340
|
+
ref_key: "selectInteractionRef",
|
|
341
|
+
ref: N,
|
|
342
|
+
multi: !1,
|
|
343
|
+
filter: me.value,
|
|
344
|
+
style: Se(ye.value),
|
|
345
|
+
onSelect: ve
|
|
346
|
+
}, null, 8, ["filter", "style"])) : p("", !0),
|
|
347
|
+
(a(!0), F(W, null, H(re.value, (t) => (a(), F(W, {
|
|
348
|
+
key: t.identifier
|
|
349
|
+
}, [
|
|
350
|
+
t.type === "wms" ? (a(), f(s(X), {
|
|
351
|
+
key: 0,
|
|
352
|
+
zIndex: t.zIndex
|
|
353
|
+
}, {
|
|
354
|
+
default: b(() => [
|
|
355
|
+
d(s(ze), {
|
|
356
|
+
url: t.wmsUrl,
|
|
357
|
+
layers: t.layerName || "",
|
|
358
|
+
params: { LAYERS: t.layerName || "", TILED: !0 },
|
|
359
|
+
serverType: "geoserver",
|
|
360
|
+
crossOrigin: "anonymous"
|
|
361
|
+
}, null, 8, ["url", "layers", "params"])
|
|
362
|
+
]),
|
|
363
|
+
_: 2
|
|
364
|
+
}, 1032, ["zIndex"])) : t.type === "wmts" && (t.wmtsOptions || t.options) ? (a(), f(s(X), {
|
|
365
|
+
key: 1,
|
|
366
|
+
zIndex: t.zIndex
|
|
367
|
+
}, {
|
|
368
|
+
default: b(() => [
|
|
369
|
+
d(s(xe), _e(
|
|
370
|
+
{ ref_for: !0 },
|
|
371
|
+
t.wmtsOptions || t.options,
|
|
372
|
+
{ styles: "default" }
|
|
373
|
+
), null, 16)
|
|
374
|
+
]),
|
|
375
|
+
_: 2
|
|
376
|
+
}, 1032, ["zIndex"])) : t.type === "vector" ? (a(), f(s(Te), {
|
|
377
|
+
key: 2,
|
|
378
|
+
zIndex: t.zIndex,
|
|
379
|
+
properties: { name: t.identifier },
|
|
380
|
+
ref_for: !0,
|
|
381
|
+
ref: (n) => {
|
|
382
|
+
n && (te.value[t.identifier] = n);
|
|
383
|
+
}
|
|
384
|
+
}, {
|
|
385
|
+
default: b(() => [
|
|
386
|
+
t.styleFunction || t.options?.styleFunction || t.style || t.options?.style ? (a(), f(s(Ae), {
|
|
387
|
+
key: 0,
|
|
388
|
+
overrideStyleFunction: t.styleFunction || t.options?.styleFunction || oe(t.style || t.options?.style)
|
|
389
|
+
}, null, 8, ["overrideStyleFunction"])) : p("", !0),
|
|
390
|
+
d(s(Pe), {
|
|
391
|
+
ref_for: !0,
|
|
392
|
+
ref: (n) => {
|
|
393
|
+
n && (V.value[t.identifier] = n);
|
|
394
|
+
}
|
|
395
|
+
}, {
|
|
396
|
+
default: b(() => [
|
|
397
|
+
(a(!0), F(W, null, H(t.options?.features, (n, r) => (a(), f(s(Ce), {
|
|
398
|
+
key: `${t.identifier}-${r}`,
|
|
399
|
+
properties: n.properties || {}
|
|
400
|
+
}, {
|
|
401
|
+
default: b(() => [
|
|
402
|
+
n.type === "Point" ? (a(), f(s(Be), {
|
|
403
|
+
key: 0,
|
|
404
|
+
coordinates: n.coordinates
|
|
405
|
+
}, null, 8, ["coordinates"])) : p("", !0),
|
|
406
|
+
n.type === "Polygon" ? (a(), f(s(je), {
|
|
407
|
+
key: 1,
|
|
408
|
+
coordinates: n.coordinates
|
|
409
|
+
}, null, 8, ["coordinates"])) : p("", !0)
|
|
410
|
+
]),
|
|
411
|
+
_: 2
|
|
412
|
+
}, 1032, ["properties"]))), 128)),
|
|
413
|
+
i.interactions?.modify?.enabled && i.interactions.modify.layer === t.identifier && K.value ? (a(), f(s(Ve), {
|
|
414
|
+
key: 0,
|
|
415
|
+
features: K.value,
|
|
416
|
+
onModifystart: ge,
|
|
417
|
+
onModifyend: be
|
|
418
|
+
}, null, 8, ["features"])) : p("", !0),
|
|
419
|
+
i.interactions?.snap?.enabled && i.interactions?.modify?.enabled && i.interactions?.modify?.layer === t.identifier && V.value[i.interactions.snap.targetLayer]?.source ? (a(), f(s(Ze), {
|
|
420
|
+
key: `snap-${t.identifier}-${i.interactions?.snap?.enabled}-${i.interactions?.modify?.enabled}`,
|
|
421
|
+
source: V.value[i.interactions.snap.targetLayer]?.source,
|
|
422
|
+
pixelTolerance: i.interactions?.snap?.pixelTolerance || 8
|
|
423
|
+
}, null, 8, ["source", "pixelTolerance"])) : p("", !0)
|
|
424
|
+
]),
|
|
425
|
+
_: 2
|
|
426
|
+
}, 1536)
|
|
427
|
+
]),
|
|
428
|
+
_: 2
|
|
429
|
+
}, 1032, ["zIndex", "properties"])) : p("", !0)
|
|
430
|
+
], 64))), 128)),
|
|
431
|
+
Z.value && T.value ? (a(), f(s(Me), {
|
|
432
|
+
key: 1,
|
|
433
|
+
position: T.value,
|
|
434
|
+
positioning: "bottom-left",
|
|
435
|
+
offset: [10, -10],
|
|
436
|
+
stopEvent: !0
|
|
437
|
+
}, {
|
|
438
|
+
default: b(() => [
|
|
439
|
+
g("div", { class: "modify-overlay" }, [
|
|
440
|
+
g("button", {
|
|
441
|
+
class: "modify-btn modify-btn-ok",
|
|
442
|
+
onClick: we
|
|
443
|
+
}, " Bevestig "),
|
|
444
|
+
g("button", {
|
|
445
|
+
class: "modify-btn modify-btn-cancel",
|
|
446
|
+
onClick: Le
|
|
447
|
+
}, " Annuleer ")
|
|
448
|
+
])
|
|
449
|
+
]),
|
|
450
|
+
_: 1
|
|
451
|
+
}, 8, ["position"])) : p("", !0)
|
|
452
|
+
]),
|
|
453
|
+
_: 1
|
|
454
|
+
}, 512),
|
|
455
|
+
g("div", et, [
|
|
456
|
+
_.toggleableLayers && _.toggleableLayers.length > 0 ? (a(), F("div", tt, [
|
|
457
|
+
g("button", {
|
|
458
|
+
class: J(["iconbutton", { isActive: C.value }]),
|
|
459
|
+
"aria-label": "Toon lagen",
|
|
460
|
+
"aria-expanded": C.value,
|
|
461
|
+
onClick: le
|
|
462
|
+
}, [
|
|
463
|
+
d(s(qe))
|
|
464
|
+
], 10, ot),
|
|
465
|
+
d(Q, { name: "fade" }, {
|
|
466
|
+
default: b(() => [
|
|
467
|
+
C.value ? (a(), f(Xe, {
|
|
468
|
+
key: 0,
|
|
469
|
+
toggleableLayers: _.toggleableLayers || [],
|
|
470
|
+
visibleToggleableLayers: M.value,
|
|
471
|
+
onToggleLayer: ce
|
|
472
|
+
}, null, 8, ["toggleableLayers", "visibleToggleableLayers"])) : p("", !0)
|
|
473
|
+
]),
|
|
474
|
+
_: 1
|
|
475
|
+
})
|
|
476
|
+
])) : p("", !0)
|
|
477
|
+
]),
|
|
478
|
+
g("div", nt, [
|
|
479
|
+
i.baseLayers && i.baseLayers.length > 0 ? (a(), F("div", it, [
|
|
480
|
+
g("button", {
|
|
481
|
+
class: J(["iconbutton", { isActive: I.value }]),
|
|
482
|
+
"aria-label": "Toon basislagen",
|
|
483
|
+
"aria-expanded": I.value,
|
|
484
|
+
onClick: ae
|
|
485
|
+
}, [
|
|
486
|
+
d(s(Ye))
|
|
487
|
+
], 10, st),
|
|
488
|
+
d(Q, { name: "fade" }, {
|
|
489
|
+
default: b(() => [
|
|
490
|
+
I.value ? (a(), f(Qe, {
|
|
491
|
+
key: 0,
|
|
492
|
+
baseLayers: i.baseLayers,
|
|
493
|
+
selectedBaseLayerId: O.value,
|
|
494
|
+
onSelectBaseLayer: ue
|
|
495
|
+
}, null, 8, ["baseLayers", "selectedBaseLayerId"])) : p("", !0)
|
|
496
|
+
]),
|
|
497
|
+
_: 1
|
|
498
|
+
})
|
|
499
|
+
])) : p("", !0),
|
|
500
|
+
g("div", rt, [
|
|
501
|
+
g("button", {
|
|
502
|
+
class: "iconbutton",
|
|
503
|
+
"aria-label": "Zoom in",
|
|
504
|
+
onClick: fe
|
|
505
|
+
}, [
|
|
506
|
+
d(s(He))
|
|
507
|
+
]),
|
|
508
|
+
g("button", {
|
|
509
|
+
class: "iconbutton",
|
|
510
|
+
"aria-label": "Zoom out",
|
|
511
|
+
onClick: de
|
|
512
|
+
}, [
|
|
513
|
+
d(s(Je))
|
|
514
|
+
])
|
|
515
|
+
])
|
|
516
|
+
])
|
|
517
|
+
]));
|
|
518
|
+
}
|
|
519
|
+
});
|
|
520
|
+
export {
|
|
521
|
+
Ct as default
|
|
522
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Map } from './Map.vue';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface LayerConfig {
|
|
2
|
+
type: "wmts" | "vector";
|
|
3
|
+
options: {
|
|
4
|
+
identifier: string;
|
|
5
|
+
title: string;
|
|
6
|
+
url?: string;
|
|
7
|
+
layer?: string;
|
|
8
|
+
matrixSet?: string;
|
|
9
|
+
format?: string;
|
|
10
|
+
projection?: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
type __VLS_Props = {
|
|
14
|
+
baseLayers: LayerConfig[];
|
|
15
|
+
selectedBaseLayerId: string | null;
|
|
16
|
+
};
|
|
17
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
18
|
+
selectBaseLayer: (layerId: string | null) => any;
|
|
19
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
20
|
+
onSelectBaseLayer?: ((layerId: string | null) => any) | undefined;
|
|
21
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { defineComponent as u, computed as f, openBlock as o, createElementBlock as r, createElementVNode as t, Fragment as m, renderList as y, toDisplayString as L } from "vue";
|
|
2
|
+
const _ = { class: "wrapper" }, B = ["id", "checked", "onClick"], k = ["for"], b = { class: "layer" }, h = ["checked"], I = /* @__PURE__ */ u({
|
|
3
|
+
__name: "BaseLayers",
|
|
4
|
+
props: {
|
|
5
|
+
baseLayers: {},
|
|
6
|
+
selectedBaseLayerId: {}
|
|
7
|
+
},
|
|
8
|
+
emits: ["selectBaseLayer"],
|
|
9
|
+
setup(a, { emit: c }) {
|
|
10
|
+
const i = a, l = c, p = f(() => i.selectedBaseLayerId === null), d = (n) => {
|
|
11
|
+
if (!n) {
|
|
12
|
+
l("selectBaseLayer", null);
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
i.selectedBaseLayerId !== n.options.identifier && l("selectBaseLayer", n.options.identifier);
|
|
16
|
+
};
|
|
17
|
+
return (n, s) => (o(), r("div", _, [
|
|
18
|
+
t("ul", null, [
|
|
19
|
+
(o(!0), r(m, null, y(a.baseLayers, (e) => (o(), r("li", {
|
|
20
|
+
key: e.options.identifier,
|
|
21
|
+
class: "layer"
|
|
22
|
+
}, [
|
|
23
|
+
t("input", {
|
|
24
|
+
id: e.options.identifier,
|
|
25
|
+
type: "radio",
|
|
26
|
+
name: "baseLayer",
|
|
27
|
+
checked: i.selectedBaseLayerId === e.options.identifier,
|
|
28
|
+
onClick: () => d(e)
|
|
29
|
+
}, null, 8, B),
|
|
30
|
+
t("label", {
|
|
31
|
+
for: e.options.identifier
|
|
32
|
+
}, L(e.options.title), 9, k)
|
|
33
|
+
]))), 128)),
|
|
34
|
+
t("li", b, [
|
|
35
|
+
t("input", {
|
|
36
|
+
id: "baseLayer_none",
|
|
37
|
+
type: "radio",
|
|
38
|
+
name: "baseLayer",
|
|
39
|
+
checked: p.value,
|
|
40
|
+
onClick: s[0] || (s[0] = () => d(null))
|
|
41
|
+
}, null, 8, h),
|
|
42
|
+
s[1] || (s[1] = t("label", { for: "baseLayer_none" }, "Geen", -1))
|
|
43
|
+
])
|
|
44
|
+
])
|
|
45
|
+
]));
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
export {
|
|
49
|
+
I as default
|
|
50
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface LayerConfig {
|
|
2
|
+
type: "wmts" | "vector" | "wms";
|
|
3
|
+
options: {
|
|
4
|
+
identifier: string;
|
|
5
|
+
title: string;
|
|
6
|
+
url?: string;
|
|
7
|
+
layer?: string;
|
|
8
|
+
matrixSet?: string;
|
|
9
|
+
format?: string;
|
|
10
|
+
projection?: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
type __VLS_Props = {
|
|
14
|
+
toggleableLayers: LayerConfig[];
|
|
15
|
+
visibleToggleableLayers: Set<string>;
|
|
16
|
+
};
|
|
17
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
18
|
+
toggleLayer: (layerId: string) => any;
|
|
19
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
20
|
+
onToggleLayer?: ((layerId: string) => any) | undefined;
|
|
21
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { defineComponent as c, openBlock as t, createElementBlock as o, Fragment as g, renderList as d, createElementVNode as s, toDisplayString as h, createCommentVNode as y } from "vue";
|
|
2
|
+
const m = { class: "wrapper" }, p = { key: 0 }, _ = { class: "layer-control" }, u = ["checked", "onChange"], b = { class: "layer-title" }, v = /* @__PURE__ */ c({
|
|
3
|
+
__name: "Layers",
|
|
4
|
+
props: {
|
|
5
|
+
toggleableLayers: {},
|
|
6
|
+
visibleToggleableLayers: {}
|
|
7
|
+
},
|
|
8
|
+
emits: ["toggleLayer"],
|
|
9
|
+
setup(n, { emit: a }) {
|
|
10
|
+
const i = a, r = (l) => {
|
|
11
|
+
i("toggleLayer", l);
|
|
12
|
+
};
|
|
13
|
+
return (l, L) => (t(), o("div", m, [
|
|
14
|
+
n.toggleableLayers.length > 0 ? (t(), o("ul", p, [
|
|
15
|
+
(t(!0), o(g, null, d(n.toggleableLayers, (e) => (t(), o("li", {
|
|
16
|
+
key: "toggle-" + e.options.identifier,
|
|
17
|
+
class: "layer"
|
|
18
|
+
}, [
|
|
19
|
+
s("label", _, [
|
|
20
|
+
s("input", {
|
|
21
|
+
type: "checkbox",
|
|
22
|
+
checked: n.visibleToggleableLayers.has(e.options.identifier),
|
|
23
|
+
onChange: (k) => r(e.options.identifier),
|
|
24
|
+
class: "layer-checkbox"
|
|
25
|
+
}, null, 40, u),
|
|
26
|
+
s("span", b, h(e.options.title), 1)
|
|
27
|
+
])
|
|
28
|
+
]))), 128))
|
|
29
|
+
])) : y("", !0)
|
|
30
|
+
]));
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
export {
|
|
34
|
+
v as default
|
|
35
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const pandenFeatures: {
|
|
2
|
+
type: "Polygon";
|
|
3
|
+
coordinates: number[][][];
|
|
4
|
+
properties: {
|
|
5
|
+
id: string;
|
|
6
|
+
};
|
|
7
|
+
}[];
|
|
8
|
+
export declare const meetboutenFeatures: {
|
|
9
|
+
type: "Point";
|
|
10
|
+
coordinates: number[];
|
|
11
|
+
properties: {
|
|
12
|
+
id: string;
|
|
13
|
+
geplaatst: boolean;
|
|
14
|
+
};
|
|
15
|
+
}[];
|