@delta10/atlas-sdk 0.1.12 → 0.2.0
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/README.md +113 -36
- package/dist/assets/index-BxWjC_eB.js +12 -0
- package/dist/assets/index-DTZ2AlyB.css +1 -0
- package/dist/index.html +14 -0
- package/package.json +1 -1
- package/dist/Example.vue.d.ts +0 -3
- package/dist/_virtual/_plugin-vue_export-helper.js +0 -9
- package/dist/assets/icons/layers.svg.js +0 -23
- package/dist/assets/icons/map.svg.js +0 -21
- package/dist/assets/icons/minus.svg.js +0 -20
- package/dist/assets/icons/plus.svg.js +0 -20
- package/dist/components/Map.vue.d.ts +0 -99
- package/dist/components/Map.vue.js +0 -7
- package/dist/components/Map.vue2.js +0 -522
- package/dist/components/index.d.ts +0 -1
- package/dist/components/panels/BaseLayers.vue.d.ts +0 -23
- package/dist/components/panels/BaseLayers.vue.js +0 -7
- package/dist/components/panels/BaseLayers.vue2.js +0 -50
- package/dist/components/panels/Layers.vue.d.ts +0 -23
- package/dist/components/panels/Layers.vue.js +0 -7
- package/dist/components/panels/Layers.vue2.js +0 -35
- package/dist/data/demo-data.d.ts +0 -15
- package/dist/index.d.ts +0 -8
- package/dist/index.js +0 -10
- package/dist/main.d.ts +0 -1
- package/dist/style.css +0 -1
- package/dist/utils/projections.d.ts +0 -5
- package/dist/utils/projections.js +0 -8
|
@@ -1,522 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Map } from './Map.vue';
|
|
@@ -1,23 +0,0 @@
|
|
|
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;
|
|
@@ -1,50 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
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;
|
|
@@ -1,35 +0,0 @@
|
|
|
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
|
-
};
|
package/dist/data/demo-data.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
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
|
-
}[];
|