gisviewer-vue3-arcgis 1.0.122 → 1.0.123
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/es/src/gis-map/style/index.css +1 -1
- package/es/src/gis-map/utils/custom-layer/custom-wmts-layer.d.ts +6 -0
- package/es/src/gis-map/utils/custom-layer/custom-wmts-layer.mjs +21 -0
- package/es/src/gis-map/utils/map-initializer.mjs +41 -32
- package/es/src/gis-map/utils/open-drive-renderer/index.d.ts +1 -0
- package/es/src/gis-map/utils/open-drive-renderer/index.mjs +125 -113
- package/lib/src/gis-map/style/index.css +1 -1
- package/lib/src/gis-map/utils/custom-layer/custom-wmts-layer.d.ts +6 -0
- package/lib/src/gis-map/utils/custom-layer/custom-wmts-layer.js +1 -0
- package/lib/src/gis-map/utils/map-initializer.js +1 -1
- package/lib/src/gis-map/utils/open-drive-renderer/index.d.ts +1 -0
- package/lib/src/gis-map/utils/open-drive-renderer/index.js +4 -2
- package/package.json +2 -1
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { subclass as a } from "@arcgis/core/core/accessorSupport/decorators";
|
|
2
|
+
import c from "@arcgis/core/layers/BaseTileLayer.js";
|
|
3
|
+
var i = Object.defineProperty, m = Object.getOwnPropertyDescriptor, f = (e, l, t, s) => {
|
|
4
|
+
for (var r = s > 1 ? void 0 : s ? m(l, t) : l, p = e.length - 1, o; p >= 0; p--)
|
|
5
|
+
(o = e[p]) && (r = (s ? o(l, t, r) : o(r)) || r);
|
|
6
|
+
return s && r && i(l, t, r), r;
|
|
7
|
+
};
|
|
8
|
+
let u = class extends c {
|
|
9
|
+
constructor(e) {
|
|
10
|
+
super(e), this.urlTemplate = "", this.urlTemplate = e.urlTemplate;
|
|
11
|
+
}
|
|
12
|
+
getTileUrl(e, l, t) {
|
|
13
|
+
return this.urlTemplate.replace("{level}", String(e)).replace("{col}", String(t)).replace("{row}", String(l));
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
u = f([
|
|
17
|
+
a("CustomWMTS")
|
|
18
|
+
], u);
|
|
19
|
+
export {
|
|
20
|
+
u as default
|
|
21
|
+
};
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import b from "@arcgis/core/Basemap";
|
|
2
|
-
import
|
|
2
|
+
import g from "@arcgis/core/config";
|
|
3
3
|
import * as M from "@arcgis/core/core/reactiveUtils";
|
|
4
|
-
import { Polygon as
|
|
4
|
+
import { Polygon as P, Polyline as W, Point as T } from "@arcgis/core/geometry";
|
|
5
5
|
import * as f from "@arcgis/core/geometry/support/webMercatorUtils";
|
|
6
|
-
import
|
|
6
|
+
import z from "@arcgis/core/layers/GeoJSONLayer";
|
|
7
7
|
import x from "@arcgis/core/layers/TileLayer";
|
|
8
8
|
import L from "@arcgis/core/layers/WebTileLayer";
|
|
9
9
|
import S from "@arcgis/core/Map";
|
|
10
10
|
import R from "@arcgis/core/views/MapView";
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import * as
|
|
14
|
-
import
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
import C from "@arcgis/core/views/SceneView";
|
|
12
|
+
import H from "@turf/destination";
|
|
13
|
+
import * as I from "@turf/helpers";
|
|
14
|
+
import O from "../stores/index.mjs";
|
|
15
|
+
import G from "./custom-layer/custom-wmts-layer.mjs";
|
|
16
|
+
function k(l, e) {
|
|
17
|
+
return l && (l.startsWith("http://") || l.startsWith("https://") ? l : e + l);
|
|
17
18
|
}
|
|
18
|
-
class
|
|
19
|
+
class F {
|
|
19
20
|
constructor() {
|
|
20
21
|
this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null;
|
|
21
22
|
}
|
|
@@ -25,16 +26,16 @@ class Q {
|
|
|
25
26
|
* @returns view
|
|
26
27
|
*/
|
|
27
28
|
async initialize(e) {
|
|
28
|
-
const i =
|
|
29
|
+
const i = O.useAppDataStore, t = JSON.parse(JSON.stringify(i.mapConfig));
|
|
29
30
|
this.mapConfig = t;
|
|
30
31
|
const { container: a, markerClickCallback: r, mapClickCallback: d } = e;
|
|
31
|
-
|
|
32
|
+
g.assetsPath = `${t.assetsRoot}/ArcgisAssets`, g.fontsUrl = `${t.assetsRoot}/fonts`, g.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
|
|
32
33
|
const n = new S();
|
|
33
34
|
if ((t == null ? void 0 : t.mapOptions.mode.toLowerCase()) === "2d" ? this.view = new R({
|
|
34
35
|
map: n,
|
|
35
36
|
container: a,
|
|
36
37
|
...t.mapOptions
|
|
37
|
-
}) : this.view = new
|
|
38
|
+
}) : this.view = new C({
|
|
38
39
|
map: n,
|
|
39
40
|
container: a,
|
|
40
41
|
environment: {
|
|
@@ -93,11 +94,11 @@ class Q {
|
|
|
93
94
|
);
|
|
94
95
|
});
|
|
95
96
|
}), t != null && t.baseLayers ? t.baseLayers.forEach((s) => {
|
|
96
|
-
const
|
|
97
|
+
const h = k(s.url, t.assetsRoot);
|
|
97
98
|
switch (s.type.toLowerCase()) {
|
|
98
99
|
case "webTile".toLowerCase(): {
|
|
99
100
|
const c = new L({
|
|
100
|
-
urlTemplate:
|
|
101
|
+
urlTemplate: h,
|
|
101
102
|
...s.options
|
|
102
103
|
});
|
|
103
104
|
n.add(c);
|
|
@@ -105,7 +106,15 @@ class Q {
|
|
|
105
106
|
}
|
|
106
107
|
case "tile": {
|
|
107
108
|
const c = new x({
|
|
108
|
-
url:
|
|
109
|
+
url: h,
|
|
110
|
+
...s.options
|
|
111
|
+
});
|
|
112
|
+
n.add(c);
|
|
113
|
+
break;
|
|
114
|
+
}
|
|
115
|
+
case "customWMTS".toLowerCase(): {
|
|
116
|
+
const c = new G({
|
|
117
|
+
urlTemplate: h,
|
|
109
118
|
...s.options
|
|
110
119
|
});
|
|
111
120
|
n.add(c);
|
|
@@ -124,12 +133,12 @@ class Q {
|
|
|
124
133
|
}
|
|
125
134
|
}), t != null && t.hdLayers) {
|
|
126
135
|
const s = t.hdLayers.map(
|
|
127
|
-
(
|
|
136
|
+
(h) => (
|
|
128
137
|
// 图层文件为GeoJson格式, renderer和symbol使用autocast配置
|
|
129
|
-
new
|
|
130
|
-
url: k(
|
|
131
|
-
...
|
|
132
|
-
title:
|
|
138
|
+
new z({
|
|
139
|
+
url: k(h.url, t.assetsRoot),
|
|
140
|
+
...h.options,
|
|
141
|
+
title: h.options.id
|
|
133
142
|
})
|
|
134
143
|
)
|
|
135
144
|
);
|
|
@@ -137,23 +146,23 @@ class Q {
|
|
|
137
146
|
}
|
|
138
147
|
this.view.ui.remove("attribution"), this.view.ui.add("compass", "top-left"), await this.view.when();
|
|
139
148
|
const p = this.mapConfig.camera;
|
|
140
|
-
let
|
|
149
|
+
let u;
|
|
141
150
|
if (this.view.type === "2d") {
|
|
142
151
|
let s = this.view.center;
|
|
143
152
|
this.view.spatialReference.isWebMercator && (s = f.webMercatorToGeographic(
|
|
144
153
|
s
|
|
145
|
-
)),
|
|
154
|
+
)), u = { center: [s.x, s.y], zoom: this.view.zoom };
|
|
146
155
|
} else {
|
|
147
156
|
let s = this.view.camera.position;
|
|
148
157
|
this.view.spatialReference.isWebMercator && (s = f.webMercatorToGeographic(
|
|
149
158
|
s
|
|
150
|
-
)),
|
|
159
|
+
)), u = {
|
|
151
160
|
position: s,
|
|
152
161
|
heading: this.view.camera.heading,
|
|
153
162
|
tilt: this.view.camera.tilt
|
|
154
163
|
};
|
|
155
164
|
}
|
|
156
|
-
return p ? p.home =
|
|
165
|
+
return p ? p.home = u : this.mapConfig.camera = { home: u }, this.view;
|
|
157
166
|
}
|
|
158
167
|
setLayerVisibility(e) {
|
|
159
168
|
const { id: i, visible: t } = e, a = this.view.map.findLayerById(i);
|
|
@@ -171,13 +180,13 @@ class Q {
|
|
|
171
180
|
if (e.center || e.target) {
|
|
172
181
|
switch ((i = e.target) == null ? void 0 : i.type) {
|
|
173
182
|
case "point":
|
|
174
|
-
e.target = new
|
|
183
|
+
e.target = new T(e.target);
|
|
175
184
|
break;
|
|
176
185
|
case "polyline":
|
|
177
|
-
e.target = new
|
|
186
|
+
e.target = new W(e.target);
|
|
178
187
|
break;
|
|
179
188
|
case "polygon":
|
|
180
|
-
e.target = new
|
|
189
|
+
e.target = new P(e.target);
|
|
181
190
|
break;
|
|
182
191
|
}
|
|
183
192
|
await this.view.goTo(e, { duration: (e.duration || 0) * 1e3 });
|
|
@@ -205,8 +214,8 @@ class Q {
|
|
|
205
214
|
{ duration: (e.duration || 2) * 1e3 }
|
|
206
215
|
);
|
|
207
216
|
else {
|
|
208
|
-
const a = Math.tan(i * Math.PI / 180) * e.height, r =
|
|
209
|
-
|
|
217
|
+
const a = Math.tan(i * Math.PI / 180) * e.height, r = H(
|
|
218
|
+
I.point(e.center),
|
|
210
219
|
a,
|
|
211
220
|
t + 180,
|
|
212
221
|
{
|
|
@@ -252,7 +261,7 @@ class Q {
|
|
|
252
261
|
}
|
|
253
262
|
transformPoints(e) {
|
|
254
263
|
return e.map((i) => {
|
|
255
|
-
const t = new
|
|
264
|
+
const t = new T({
|
|
256
265
|
x: i[0],
|
|
257
266
|
y: i[1]
|
|
258
267
|
}), a = this.view.toScreen(t);
|
|
@@ -280,5 +289,5 @@ class Q {
|
|
|
280
289
|
}
|
|
281
290
|
}
|
|
282
291
|
export {
|
|
283
|
-
|
|
292
|
+
F as default
|
|
284
293
|
};
|
|
@@ -18,6 +18,7 @@ export default class OpenDriveRenderer {
|
|
|
18
18
|
private projectName;
|
|
19
19
|
private openDriveServer;
|
|
20
20
|
private openDriveClickCallback;
|
|
21
|
+
private makeMd5FromFile;
|
|
21
22
|
showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
|
|
22
23
|
/**
|
|
23
24
|
* 从服务器载入OpenDrive文件解析结果并显示
|
|
@@ -3,14 +3,19 @@ import * as D from "@arcgis/core/core/promiseUtils";
|
|
|
3
3
|
import { Polygon as N } from "@arcgis/core/geometry";
|
|
4
4
|
import * as k from "@arcgis/core/geometry/geometryEngineAsync";
|
|
5
5
|
import C from "@arcgis/core/layers/FeatureLayer";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import f from "@arcgis/core/layers/GraphicsLayer";
|
|
7
|
+
import g from "axios";
|
|
8
|
+
import F from "md5";
|
|
8
9
|
import G from "pako";
|
|
9
10
|
import j from "../common-utils.mjs";
|
|
10
|
-
import
|
|
11
|
+
import A from "./wasm-loader.mjs";
|
|
11
12
|
class S {
|
|
12
13
|
constructor(t) {
|
|
13
|
-
this.wasmLoader =
|
|
14
|
+
this.wasmLoader = A.getInstance(), this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.currentJunctionId = "", this.view = t, this.view.popup.visibleElements = {
|
|
15
|
+
closeButton: !1,
|
|
16
|
+
collapseButton: !1,
|
|
17
|
+
actionBar: !1
|
|
18
|
+
}, this.laneLayer = new C({
|
|
14
19
|
id: "OpenDriveLane",
|
|
15
20
|
fields: [
|
|
16
21
|
{
|
|
@@ -268,7 +273,7 @@ class S {
|
|
|
268
273
|
}
|
|
269
274
|
}
|
|
270
275
|
]
|
|
271
|
-
}), this.junctionLayer = new
|
|
276
|
+
}), this.junctionLayer = new f({ id: "OpenDriveJunction" }), this.sectionLayer = new f({ id: "OpenDriveSection" }), this.highlightLayer = new f({ id: "OpenDriveHighlight" }), this.flashLayer = new f({ id: "OpenDriveFlash" }), this.view.map.addMany([
|
|
272
277
|
this.laneLayer,
|
|
273
278
|
this.junctionLayer,
|
|
274
279
|
this.sectionLayer,
|
|
@@ -280,21 +285,31 @@ class S {
|
|
|
280
285
|
static getInstance(t) {
|
|
281
286
|
return this.instance || (this.instance = new S(t)), this.instance;
|
|
282
287
|
}
|
|
288
|
+
async makeMd5FromFile(t) {
|
|
289
|
+
const i = await (await fetch(t)).text();
|
|
290
|
+
return F(i);
|
|
291
|
+
}
|
|
283
292
|
async showOpenDriveFromFile(t) {
|
|
284
293
|
var h, d;
|
|
285
|
-
this.openDriveClickCallback = t.selectedCallback, this.projectName =
|
|
286
|
-
const
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
294
|
+
this.openDriveClickCallback = t.selectedCallback, this.projectName = await this.makeMd5FromFile(t.file), this.openDriveServer = t.server, await this.makeMd5FromFile(t.file);
|
|
295
|
+
const a = `http://${this.openDriveServer}/api/openDrive/uploadXodr`;
|
|
296
|
+
let i;
|
|
297
|
+
try {
|
|
298
|
+
i = await g.post(
|
|
299
|
+
a,
|
|
300
|
+
{},
|
|
301
|
+
{
|
|
302
|
+
params: {
|
|
303
|
+
url: t.file,
|
|
304
|
+
projectName: this.projectName
|
|
305
|
+
}
|
|
293
306
|
}
|
|
294
|
-
|
|
295
|
-
)
|
|
307
|
+
);
|
|
308
|
+
} catch (u) {
|
|
309
|
+
return { status: -1, message: u.message };
|
|
310
|
+
}
|
|
296
311
|
if (i.status !== 200)
|
|
297
|
-
|
|
312
|
+
return { status: -1, message: i.statusText };
|
|
298
313
|
console.time("渲染用时");
|
|
299
314
|
const s = i.data.result.geoSetting;
|
|
300
315
|
j.setGeoData(
|
|
@@ -304,16 +319,16 @@ class S {
|
|
|
304
319
|
);
|
|
305
320
|
let e = i.data.result.json;
|
|
306
321
|
e.startsWith(window.location.protocol) || (e = `${window.location.protocol}//${t.server}${e}`);
|
|
307
|
-
const r = await (await fetch(e)).arrayBuffer(), n = G.inflate(r, { to: "string" }),
|
|
322
|
+
const r = await (await fetch(e)).arrayBuffer(), n = G.inflate(r, { to: "string" }), o = JSON.parse(n);
|
|
308
323
|
await this.showAllLanes(
|
|
309
|
-
|
|
324
|
+
o,
|
|
310
325
|
((h = t.options) == null ? void 0 : h.showJunctionLane) || !1,
|
|
311
326
|
((d = t.options) == null ? void 0 : d.showRoadName) || !0
|
|
312
327
|
);
|
|
313
328
|
const l = i.data.result.junctions;
|
|
314
329
|
if (this.showJunction(l), t.options && t.options.centerMap !== !1) {
|
|
315
|
-
const
|
|
316
|
-
await this.view.goTo(
|
|
330
|
+
const u = j.transformPointProjection([0, 0]);
|
|
331
|
+
await this.view.goTo(u);
|
|
317
332
|
}
|
|
318
333
|
return this.mouseMoveHandler || this.monitorMouseMove(), this.mouseClickHandler || this.monitorMouseClick(), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
|
|
319
334
|
}
|
|
@@ -322,10 +337,10 @@ class S {
|
|
|
322
337
|
* @param server
|
|
323
338
|
* @param projectName
|
|
324
339
|
*/
|
|
325
|
-
async showOpenDriveFromServer(t,
|
|
326
|
-
const i = `http://${t}/api/openDrive/analyzeXodr`, s = await
|
|
340
|
+
async showOpenDriveFromServer(t, a) {
|
|
341
|
+
const i = `http://${t}/api/openDrive/analyzeXodr`, s = await g.get(i, {
|
|
327
342
|
headers: {
|
|
328
|
-
projectName:
|
|
343
|
+
projectName: a
|
|
329
344
|
},
|
|
330
345
|
params: {
|
|
331
346
|
analyze: !1,
|
|
@@ -336,10 +351,10 @@ class S {
|
|
|
336
351
|
throw new Error(`OpenDriveRenderer: ${s.statusText}`);
|
|
337
352
|
let e = s.data.result.json;
|
|
338
353
|
e.startsWith(window.location.protocol) || (e = `${window.location.protocol}//${t}${e}`);
|
|
339
|
-
const r = await (await fetch(e)).arrayBuffer(), n = G.inflate(r, { to: "string" }),
|
|
340
|
-
return await this.showAllLanes(
|
|
354
|
+
const r = await (await fetch(e)).arrayBuffer(), n = G.inflate(r, { to: "string" }), o = JSON.parse(n);
|
|
355
|
+
return await this.showAllLanes(o, !1, !1), { status: 0, message: "ok" };
|
|
341
356
|
}
|
|
342
|
-
async showAllLanes(t,
|
|
357
|
+
async showAllLanes(t, a, i) {
|
|
343
358
|
const s = await this.laneLayer.queryFeatures();
|
|
344
359
|
return s.features.length > 0 && this.laneLayer.applyEdits({
|
|
345
360
|
deleteFeatures: s.features
|
|
@@ -347,13 +362,13 @@ class S {
|
|
|
347
362
|
let c = 0;
|
|
348
363
|
this.allLaneGraphics = [], this.allRefLineGraphics = [];
|
|
349
364
|
const r = [];
|
|
350
|
-
for (const
|
|
351
|
-
if (!
|
|
365
|
+
for (const o of t) {
|
|
366
|
+
if (!a && o.junction !== "-1")
|
|
352
367
|
continue;
|
|
353
|
-
const { id: l, refLine: h } =
|
|
354
|
-
let d =
|
|
368
|
+
const { id: l, refLine: h } = o;
|
|
369
|
+
let d = o.name;
|
|
355
370
|
d.includes("(") && (d = d.slice(0, d.indexOf("("))), d = d.replace(/(.)/g, "$1 ");
|
|
356
|
-
const
|
|
371
|
+
const u = new p({
|
|
357
372
|
geometry: {
|
|
358
373
|
type: "polyline",
|
|
359
374
|
paths: [h]
|
|
@@ -364,39 +379,39 @@ class S {
|
|
|
364
379
|
roadName: d
|
|
365
380
|
}
|
|
366
381
|
});
|
|
367
|
-
this.allRefLineGraphics.push(
|
|
368
|
-
for (const v of
|
|
382
|
+
this.allRefLineGraphics.push(u);
|
|
383
|
+
for (const v of o.laneSections) {
|
|
369
384
|
const b = Number(v.id);
|
|
370
|
-
for (const
|
|
371
|
-
const
|
|
372
|
-
if (
|
|
385
|
+
for (const y of v.lanePaths) {
|
|
386
|
+
const m = Number(y.id);
|
|
387
|
+
if (m === 0)
|
|
373
388
|
continue;
|
|
374
|
-
const O =
|
|
375
|
-
|
|
389
|
+
const O = y.type, w = y.innerPath.concat(
|
|
390
|
+
y.outerPath.reverse()
|
|
376
391
|
);
|
|
377
392
|
if (w.length <= 3) {
|
|
378
|
-
console.warn(`lane ${
|
|
393
|
+
console.warn(`lane ${m} has less than 3 points`);
|
|
379
394
|
continue;
|
|
380
395
|
}
|
|
381
|
-
w.push(
|
|
382
|
-
const
|
|
396
|
+
w.push(y.innerPath[0]);
|
|
397
|
+
const I = new N({
|
|
383
398
|
rings: [w]
|
|
384
399
|
});
|
|
385
|
-
if (
|
|
386
|
-
const
|
|
387
|
-
geometry:
|
|
400
|
+
if (I) {
|
|
401
|
+
const L = new p({
|
|
402
|
+
geometry: I,
|
|
388
403
|
attributes: {
|
|
389
404
|
ObjectID: c++,
|
|
390
|
-
id: `${l}+${b}+${
|
|
405
|
+
id: `${l}+${b}+${m}`,
|
|
391
406
|
roadId: l,
|
|
392
|
-
roadName:
|
|
407
|
+
roadName: o.name,
|
|
393
408
|
sectionId: b,
|
|
394
|
-
laneId:
|
|
409
|
+
laneId: m,
|
|
395
410
|
type: O,
|
|
396
411
|
sumoId: ""
|
|
397
412
|
}
|
|
398
413
|
});
|
|
399
|
-
this.allLaneGraphics.push(
|
|
414
|
+
this.allLaneGraphics.push(L), r.push(L);
|
|
400
415
|
}
|
|
401
416
|
}
|
|
402
417
|
}
|
|
@@ -404,15 +419,15 @@ class S {
|
|
|
404
419
|
const n = setInterval(() => {
|
|
405
420
|
if (r.length > 0 || this.allRefLineGraphics.length > 0) {
|
|
406
421
|
if (r.length > 0) {
|
|
407
|
-
const
|
|
422
|
+
const o = r.splice(0, 100);
|
|
408
423
|
this.laneLayer.applyEdits({
|
|
409
|
-
addFeatures:
|
|
424
|
+
addFeatures: o
|
|
410
425
|
});
|
|
411
426
|
}
|
|
412
427
|
if (this.allRefLineGraphics.length > 0) {
|
|
413
|
-
const
|
|
428
|
+
const o = this.allRefLineGraphics.splice(0, 10);
|
|
414
429
|
this.roadNameLayer.applyEdits({
|
|
415
|
-
addFeatures:
|
|
430
|
+
addFeatures: o
|
|
416
431
|
});
|
|
417
432
|
}
|
|
418
433
|
} else
|
|
@@ -421,7 +436,7 @@ class S {
|
|
|
421
436
|
});
|
|
422
437
|
}
|
|
423
438
|
showJunction(t) {
|
|
424
|
-
const
|
|
439
|
+
const a = [];
|
|
425
440
|
for (const i of t) {
|
|
426
441
|
i.nodeType = i.type;
|
|
427
442
|
const s = new p({
|
|
@@ -437,28 +452,28 @@ class S {
|
|
|
437
452
|
},
|
|
438
453
|
symbol: {
|
|
439
454
|
type: "picture-marker",
|
|
440
|
-
url: i.crossId ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/
|
|
455
|
+
url: i.crossId ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png",
|
|
441
456
|
width: 30,
|
|
442
457
|
height: 30
|
|
443
458
|
}
|
|
444
459
|
});
|
|
445
|
-
|
|
460
|
+
a.push(s);
|
|
446
461
|
}
|
|
447
|
-
this.junctionLayer.addMany(
|
|
462
|
+
this.junctionLayer.addMany(a);
|
|
448
463
|
}
|
|
449
464
|
/**
|
|
450
465
|
* 监听鼠标移动事件，高亮显示鼠标所在路段和路口
|
|
451
466
|
*/
|
|
452
467
|
monitorMouseMove() {
|
|
453
|
-
const t = D.debounce(async (
|
|
468
|
+
const t = D.debounce(async (a) => {
|
|
454
469
|
var c;
|
|
455
|
-
const s = (c = (await this.view.hitTest(
|
|
470
|
+
const s = (c = (await this.view.hitTest(a, {
|
|
456
471
|
include: [this.laneLayer, this.junctionLayer]
|
|
457
472
|
})).results) == null ? void 0 : c.filter(
|
|
458
473
|
(r) => r.type === "graphic"
|
|
459
474
|
);
|
|
460
475
|
if (s.length === 0) {
|
|
461
|
-
this.currentSectionCode !== "" && (this.currentSectionCode = "", this.highlightGraphic = void 0, this.highlightLayer.removeAll()), this.currentJunctionId !== "" && (this.currentJunctionId = "", this.
|
|
476
|
+
this.currentSectionCode !== "" && (this.currentSectionCode = "", this.highlightGraphic = void 0, this.highlightLayer.removeAll()), this.currentJunctionId !== "" && (this.currentJunctionId = "", this.view.popup.close());
|
|
462
477
|
return;
|
|
463
478
|
}
|
|
464
479
|
const e = s[0];
|
|
@@ -469,10 +484,10 @@ class S {
|
|
|
469
484
|
) >= 0)
|
|
470
485
|
return;
|
|
471
486
|
this.currentSectionCode = r;
|
|
472
|
-
const
|
|
487
|
+
const o = this.allLaneGraphics.filter(
|
|
473
488
|
(h) => `${h.attributes.roadId}+${h.attributes.sectionId}` === r
|
|
474
489
|
), l = await k.union(
|
|
475
|
-
|
|
490
|
+
o.map((h) => h.geometry)
|
|
476
491
|
);
|
|
477
492
|
this.highlightGraphic = new p({
|
|
478
493
|
geometry: l,
|
|
@@ -492,29 +507,23 @@ class S {
|
|
|
492
507
|
}
|
|
493
508
|
}), this.highlightLayer.removeAll(), this.highlightLayer.add(this.highlightGraphic);
|
|
494
509
|
} else if (e.layer.id === "OpenDriveJunction") {
|
|
495
|
-
const r = this.hitGraphic.
|
|
510
|
+
const r = this.hitGraphic.getAttribute("id");
|
|
496
511
|
if (r === this.currentJunctionId)
|
|
497
512
|
return;
|
|
498
513
|
this.currentJunctionId = r;
|
|
499
|
-
const n =
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
font: {
|
|
508
|
-
size: 10
|
|
509
|
-
},
|
|
510
|
-
yoffset: 40
|
|
511
|
-
}
|
|
514
|
+
const n = this.hitGraphic.getAttribute("name"), o = this.hitGraphic.getAttribute("crossId");
|
|
515
|
+
this.view.popup.open({
|
|
516
|
+
title: n,
|
|
517
|
+
content: `<table>
|
|
518
|
+
<tr><td>路口编号</td><td>${r}</td></tr>
|
|
519
|
+
<tr><td>信号机编号</td><td>${o || "无信控"}</td></tr>
|
|
520
|
+
</table>`,
|
|
521
|
+
location: this.hitGraphic.geometry
|
|
512
522
|
});
|
|
513
|
-
this.highlightLayer.removeAll(), this.highlightLayer.add(n);
|
|
514
523
|
}
|
|
515
524
|
});
|
|
516
|
-
this.mouseMoveHandler = this.view.on("pointer-move", async (
|
|
517
|
-
t(
|
|
525
|
+
this.mouseMoveHandler = this.view.on("pointer-move", async (a) => {
|
|
526
|
+
t(a).catch(() => {
|
|
518
527
|
});
|
|
519
528
|
});
|
|
520
529
|
}
|
|
@@ -522,19 +531,19 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
522
531
|
* 监听鼠标点击事件，获取高亮要素的拓扑信息
|
|
523
532
|
*/
|
|
524
533
|
monitorMouseClick() {
|
|
525
|
-
const t = D.debounce(async (
|
|
534
|
+
const t = D.debounce(async (a) => {
|
|
526
535
|
var n;
|
|
527
|
-
const s = (n = (await this.view.hitTest(
|
|
536
|
+
const s = (n = (await this.view.hitTest(a, {
|
|
528
537
|
include: [this.highlightLayer, this.junctionLayer, this.sectionLayer]
|
|
529
538
|
})).results) == null ? void 0 : n.filter(
|
|
530
|
-
(
|
|
539
|
+
(o) => o.type === "graphic"
|
|
531
540
|
);
|
|
532
541
|
if (s.length === 0)
|
|
533
542
|
return;
|
|
534
543
|
const e = s[0].graphic, c = e.getAttribute("type"), r = e.getAttribute("id");
|
|
535
544
|
if (c === "OpenDriveJunction")
|
|
536
545
|
if (e.getAttribute("selected") === !1) {
|
|
537
|
-
const
|
|
546
|
+
const o = `http://${this.openDriveServer}/api/sumo/getSumoJunction`, l = await g.get(o, {
|
|
538
547
|
params: {
|
|
539
548
|
id: r,
|
|
540
549
|
projectName: this.projectName
|
|
@@ -545,12 +554,15 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
545
554
|
id: r,
|
|
546
555
|
details: l.data.result
|
|
547
556
|
}), e.setAttribute("selected", !0), e.symbol.url = "/GisViewerAssets/Images/point_red.png", this.increasePictureMarkerSize(e, 50));
|
|
548
|
-
} else
|
|
557
|
+
} else {
|
|
549
558
|
this.openDriveClickCallback && this.openDriveClickCallback({
|
|
550
559
|
type: "OpenDriveJunction",
|
|
551
560
|
id: r,
|
|
552
561
|
details: void 0
|
|
553
|
-
}), e.setAttribute("selected", !1)
|
|
562
|
+
}), e.setAttribute("selected", !1);
|
|
563
|
+
const o = e.getAttribute("crossId");
|
|
564
|
+
e.symbol.url = o ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png", this.decreasePictureMarkerSize(e, 30);
|
|
565
|
+
}
|
|
554
566
|
else if (c === "OpenDriveSection")
|
|
555
567
|
if (e.getAttribute("selected"))
|
|
556
568
|
this.sectionLayer.remove(e), this.openDriveClickCallback && this.openDriveClickCallback({
|
|
@@ -560,7 +572,7 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
560
572
|
});
|
|
561
573
|
else {
|
|
562
574
|
this.highlightLayer.remove(e), this.sectionLayer.add(e), e.setAttribute("selected", !0);
|
|
563
|
-
const
|
|
575
|
+
const o = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, l = await g.get(o, {
|
|
564
576
|
params: {
|
|
565
577
|
id: r,
|
|
566
578
|
projectName: this.projectName
|
|
@@ -573,15 +585,15 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
573
585
|
});
|
|
574
586
|
}
|
|
575
587
|
});
|
|
576
|
-
this.mouseClickHandler = this.view.on("immediate-click", async (
|
|
577
|
-
t(
|
|
588
|
+
this.mouseClickHandler = this.view.on("immediate-click", async (a) => {
|
|
589
|
+
t(a).catch(() => {
|
|
578
590
|
});
|
|
579
591
|
});
|
|
580
592
|
}
|
|
581
|
-
increasePictureMarkerSize(t,
|
|
593
|
+
increasePictureMarkerSize(t, a) {
|
|
582
594
|
const i = setInterval(() => {
|
|
583
595
|
const s = t.symbol, e = s.width;
|
|
584
|
-
e <
|
|
596
|
+
e < a ? t.symbol = {
|
|
585
597
|
type: "picture-marker",
|
|
586
598
|
url: s.url,
|
|
587
599
|
width: e + 1,
|
|
@@ -589,10 +601,10 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
589
601
|
} : clearInterval(i);
|
|
590
602
|
}, 20);
|
|
591
603
|
}
|
|
592
|
-
decreasePictureMarkerSize(t,
|
|
604
|
+
decreasePictureMarkerSize(t, a) {
|
|
593
605
|
const i = setInterval(() => {
|
|
594
606
|
const s = t.symbol, e = s.width;
|
|
595
|
-
e >
|
|
607
|
+
e > a ? t.symbol = {
|
|
596
608
|
type: "picture-marker",
|
|
597
609
|
url: s.url,
|
|
598
610
|
width: e - 1,
|
|
@@ -604,13 +616,13 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
604
616
|
* 清除OpenDrive内容
|
|
605
617
|
*/
|
|
606
618
|
async clearOpenDrive() {
|
|
607
|
-
var
|
|
619
|
+
var a, i;
|
|
608
620
|
let t = await this.laneLayer.queryFeatures();
|
|
609
621
|
t.features.length > 0 && await this.laneLayer.applyEdits({
|
|
610
622
|
deleteFeatures: t.features
|
|
611
623
|
}), t = await this.roadNameLayer.queryFeatures(), t.features.length > 0 && await this.roadNameLayer.applyEdits({
|
|
612
624
|
deleteFeatures: t.features
|
|
613
|
-
}), this.highlightLayer.removeAll(), this.junctionLayer.removeAll(), this.wasmLoader.clear(), (
|
|
625
|
+
}), this.highlightLayer.removeAll(), this.junctionLayer.removeAll(), this.wasmLoader.clear(), (a = this.mouseMoveHandler) == null || a.remove(), (i = this.mouseClickHandler) == null || i.remove();
|
|
614
626
|
}
|
|
615
627
|
/**
|
|
616
628
|
* 用sumo的id定位车道、基本段、路段
|
|
@@ -618,28 +630,28 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
618
630
|
* @returns
|
|
619
631
|
*/
|
|
620
632
|
async findSumo(t) {
|
|
621
|
-
const { type:
|
|
622
|
-
if (
|
|
633
|
+
const { type: a, id: i } = t, s = t.flash === void 0 ? !0 : t.flash;
|
|
634
|
+
if (a === "junction")
|
|
623
635
|
return await this.findJunction(i, s);
|
|
624
|
-
if (
|
|
636
|
+
if (a === "edge") {
|
|
625
637
|
const e = i.split("+");
|
|
626
638
|
if (e.length > 2)
|
|
627
639
|
return { status: -1, message: "id格式错误" };
|
|
628
640
|
const c = e.length === 2 ? Number(e[1]) : void 0, r = e[0].split("#");
|
|
629
641
|
if (r.length > 2)
|
|
630
642
|
return { status: -1, message: "id格式错误" };
|
|
631
|
-
const n = r[0],
|
|
632
|
-
return await this.findLane({ roadsectId: n, segmentId:
|
|
643
|
+
const n = r[0], o = r.length === 2 ? Number(r[1]) : void 0;
|
|
644
|
+
return await this.findLane({ roadsectId: n, segmentId: o, laneId: c, flash: s });
|
|
633
645
|
} else
|
|
634
646
|
return { status: -1, message: "未知类型" };
|
|
635
647
|
}
|
|
636
|
-
async findJunction(t,
|
|
648
|
+
async findJunction(t, a) {
|
|
637
649
|
const i = this.junctionLayer.graphics.find(
|
|
638
650
|
(s) => s.attributes.id === t
|
|
639
651
|
);
|
|
640
652
|
if (!i)
|
|
641
653
|
return { status: -1, message: "未找到。请检查路口编号" };
|
|
642
|
-
if (
|
|
654
|
+
if (a) {
|
|
643
655
|
const s = new p({
|
|
644
656
|
geometry: i.geometry,
|
|
645
657
|
symbol: {
|
|
@@ -663,33 +675,33 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
663
675
|
* @returns
|
|
664
676
|
*/
|
|
665
677
|
async findLane(t) {
|
|
666
|
-
let { roadsectId:
|
|
667
|
-
|
|
678
|
+
let { roadsectId: a, segmentId: i, laneId: s } = t;
|
|
679
|
+
a.startsWith("-") && (a = a.slice(1));
|
|
668
680
|
let e = this.allLaneGraphics.filter(
|
|
669
|
-
(n) => n.attributes.roadId ===
|
|
681
|
+
(n) => n.attributes.roadId === a
|
|
670
682
|
);
|
|
671
683
|
if (e.length === 0)
|
|
672
684
|
return { status: -1, message: "未找到。请检查路段编号" };
|
|
673
685
|
if (i !== void 0) {
|
|
674
686
|
const n = [];
|
|
675
|
-
if (e.forEach((
|
|
676
|
-
const l = Number(
|
|
687
|
+
if (e.forEach((o) => {
|
|
688
|
+
const l = Number(o.attributes.sectionId);
|
|
677
689
|
n.indexOf(l) === -1 && n.push(l);
|
|
678
|
-
}), n.sort((
|
|
690
|
+
}), n.sort((o, l) => o - l), i > n.length - 1)
|
|
679
691
|
return { status: -1, message: "未找到。请检查基本段编号" };
|
|
680
692
|
i = n[i], e = e.filter(
|
|
681
|
-
(
|
|
693
|
+
(o) => Number(o.attributes.sectionId) === i
|
|
682
694
|
);
|
|
683
695
|
}
|
|
684
696
|
if (s !== void 0) {
|
|
685
697
|
const n = [];
|
|
686
|
-
if (e.forEach((
|
|
687
|
-
const l = Number(
|
|
698
|
+
if (e.forEach((o) => {
|
|
699
|
+
const l = Number(o.attributes.laneId);
|
|
688
700
|
n.indexOf(l) === -1 && n.push(l);
|
|
689
|
-
}), n.sort((
|
|
701
|
+
}), n.sort((o, l) => o - l), s > n.length - 1)
|
|
690
702
|
return { status: -1, message: "未找到。请检查车道编号" };
|
|
691
703
|
s = n[s], e = e.filter(
|
|
692
|
-
(
|
|
704
|
+
(o) => Number(o.attributes.laneId) === s
|
|
693
705
|
);
|
|
694
706
|
}
|
|
695
707
|
const c = e.map(
|
|
@@ -714,9 +726,9 @@ ${this.hitGraphic.attributes.id}`,
|
|
|
714
726
|
}
|
|
715
727
|
flashGraphic(t) {
|
|
716
728
|
this.flashLayer.removeAll(), this.flashLayer.add(t);
|
|
717
|
-
let
|
|
729
|
+
let a = 0, i = !0;
|
|
718
730
|
const s = setInterval(() => {
|
|
719
|
-
i ? (this.flashLayer.opacity -= 0.02, this.flashLayer.opacity <= 0.1 && (i = !1,
|
|
731
|
+
i ? (this.flashLayer.opacity -= 0.02, this.flashLayer.opacity <= 0.1 && (i = !1, a++)) : (this.flashLayer.opacity += 0.02, this.flashLayer.opacity >= 1 && (i = !0)), a >= 5 && (this.flashLayer.removeAll(), this.flashLayer.opacity = 1, clearInterval(s));
|
|
720
732
|
}, 10);
|
|
721
733
|
}
|
|
722
734
|
async splitLane(t) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@arcgis/core/core/accessorSupport/decorators"),c=require("@arcgis/core/layers/BaseTileLayer.js");var i=Object.defineProperty,p=Object.getOwnPropertyDescriptor,n=(s,e,l,t)=>{for(var r=t>1?void 0:t?p(e,l):e,u=s.length-1,a;u>=0;u--)(a=s[u])&&(r=(t?a(e,l,r):a(r))||r);return t&&r&&i(e,l,r),r};exports.default=class extends c{constructor(e){super(e),this.urlTemplate="",this.urlTemplate=e.urlTemplate}getTileUrl(e,l,t){return this.urlTemplate.replace("{level}",String(e)).replace("{col}",String(t)).replace("{row}",String(l))}};exports.default=n([o.subclass("CustomWMTS")],exports.default);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("@arcgis/core/Basemap"),y=require("@arcgis/core/config"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("@arcgis/core/Basemap"),y=require("@arcgis/core/config"),q=require("@arcgis/core/core/reactiveUtils"),g=require("@arcgis/core/geometry"),z=require("@arcgis/core/geometry/support/webMercatorUtils"),W=require("@arcgis/core/layers/GeoJSONLayer"),O=require("@arcgis/core/layers/TileLayer"),S=require("@arcgis/core/layers/WebTileLayer"),L=require("@arcgis/core/Map"),x=require("@arcgis/core/views/MapView"),R=require("@arcgis/core/views/SceneView"),H=require("@turf/destination"),I=require("@turf/helpers"),_=require("../stores/index.js"),C=require("./custom-layer/custom-wmts-layer.js");function b(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(e,i,t.get?t:{enumerable:!0,get:()=>r[i]})}}return e.default=r,Object.freeze(e)}const T=b(q),p=b(z),G=b(I);function k(r,e){return r&&(r.startsWith("http://")||r.startsWith("https://")?r:e+r)}class N{constructor(){this.mapConfig={},this.watchHandleMap=new Map,this.handleIndex=0,this.zoomWatchHandle=null}async initialize(e){const i=_.default.useAppDataStore,t=JSON.parse(JSON.stringify(i.mapConfig));this.mapConfig=t;const{container:o,markerClickCallback:n,mapClickCallback:f}=e;y.assetsPath=`${t.assetsRoot}/ArcgisAssets`,y.fontsUrl=`${t.assetsRoot}/fonts`,y.apiKey="AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";const c=new L;if((t==null?void 0:t.mapOptions.mode.toLowerCase())==="2d"?this.view=new x({map:c,container:o,...t.mapOptions}):this.view=new R({map:c,container:o,environment:{atmosphereEnabled:!0,lighting:{type:"virtual"}},...t==null?void 0:t.mapOptions}),this.view.on("click",async s=>{var v,M;if(f){let a=s.mapPoint;a.spatialReference.isWebMercator&&(a=p.webMercatorToGeographic(a)),f([a.x,a.y],[s.screenPoint.x,s.screenPoint.y],s)}if(this.view.type==="3d"){const a=this.view.camera;if(this.view.spatialReference.isWebMercator){const u=p.webMercatorToGeographic(a.position),d={heading:a.heading,tilt:a.tilt,position:u.toJSON()};console.log(d),(v=navigator.clipboard)==null||v.writeText(JSON.stringify(d))}else console.log(a.toJSON());console.log(this.view.zoom,this.view.scale)}else{let a=this.view.center;this.view.spatialReference.isWebMercator&&(a=p.webMercatorToGeographic(a)),console.log({center:a.toJSON(),zoom:this.view.zoom})}const l=(M=(await this.view.hitTest(s)).results)==null?void 0:M.filter(a=>a.type==="graphic");l.length>0&&l.forEach(a=>{var d;const u=a.graphic;(d=u.attributes)!=null&&d.type&&n&&n(u.attributes.type,u.attributes.id,u.attributes,s)})}),t!=null&&t.baseLayers?t.baseLayers.forEach(s=>{const h=k(s.url,t.assetsRoot);switch(s.type.toLowerCase()){case"webTile".toLowerCase():{const l=new S({urlTemplate:h,...s.options});c.add(l);break}case"tile":{const l=new O({url:h,...s.options});c.add(l);break}case"customWMTS".toLowerCase():{const l=new C.default({urlTemplate:h,...s.options});c.add(l);break}case"arcgis":{const l=new P(s.options);c.basemap=l;break}}}):c.basemap=new P({style:{id:"arcgis/dark-gray",language:"zh-CN"}}),t!=null&&t.hdLayers){const s=t.hdLayers.map(h=>new W({url:k(h.url,t.assetsRoot),...h.options,title:h.options.id}));c.addMany(s)}this.view.ui.remove("attribution"),this.view.ui.add("compass","top-left"),await this.view.when();const w=this.mapConfig.camera;let m;if(this.view.type==="2d"){let s=this.view.center;this.view.spatialReference.isWebMercator&&(s=p.webMercatorToGeographic(s)),m={center:[s.x,s.y],zoom:this.view.zoom}}else{let s=this.view.camera.position;this.view.spatialReference.isWebMercator&&(s=p.webMercatorToGeographic(s)),m={position:s,heading:this.view.camera.heading,tilt:this.view.camera.tilt}}return w?w.home=m:this.mapConfig.camera={home:m},this.view}setLayerVisibility(e){const{id:i,visible:t}=e,o=this.view.map.findLayerById(i);return o?(o.visible=t,{status:0,message:"ok"}):{status:-1,message:"未找到图层"}}async setMapCenter(e){var i;if(!this.view)return{status:-1,message:"未初始化"};if(e.center||e.target){switch((i=e.target)==null?void 0:i.type){case"point":e.target=new g.Point(e.target);break;case"polyline":e.target=new g.Polyline(e.target);break;case"polygon":e.target=new g.Polygon(e.target);break}await this.view.goTo(e,{duration:(e.duration||0)*1e3})}return{status:0,message:"成功"}}async lookAt(e){if(this.view.type==="2d")return;const i=e.tilt||0,t=e.heading||0;if(i===0)await this.view.goTo({position:{x:e.center[0],y:e.center[1],z:e.height},heading:t,tilt:0},{duration:(e.duration||2)*1e3});else{const o=Math.tan(i*Math.PI/180)*e.height,n=H(G.point(e.center),o,t+180,{units:"meters"});await this.view.goTo({position:{x:n.geometry.coordinates[0],y:n.geometry.coordinates[1],z:e.height},heading:t,tilt:i},{duration:(e.duration||2)*1e3})}}async setMapCamera(e){if(!this.view)return{status:-1,message:"未初始化"};const{name:i,duration:t=0}=e,{camera:o}=this.mapConfig;if(!o)return{status:-1,message:"未配置camera"};const n=o[i];return n?(await this.view.goTo(n,{duration:t*1e3}),{status:0,message:"成功"}):{status:-1,message:"未配置camera"}}requestCoordinateTransform(e,i){let t=0;const n=1e3/30,f=T.watch(()=>this.view.center,()=>{const c=this.transformPoints(e),w=Date.now();w-t>n&&(i(c),t=w)});return this.handleIndex++,this.watchHandleMap.set(this.handleIndex,f),{handle:this.handleIndex,points:this.transformPoints(e)}}transformPoints(e){return e.map(i=>{const t=new g.Point({x:i[0],y:i[1]}),o=this.view.toScreen(t);return[o.x,o.y]})}cancelCoordinateTransform(e){const i=this.watchHandleMap.get(e);i&&(i.remove(),this.watchHandleMap.delete(e))}setMapZoomRange(e){const{min:i,max:t}=e;!i&&!t||(this.zoomWatchHandle&&this.zoomWatchHandle.remove(),this.zoomWatchHandle=T.watch(()=>this.view.zoom,o=>{i&&o<=i&&(this.view.zoom=i),t&&o>=t&&(this.view.zoom=t)}))}}exports.default=N;
|
|
@@ -18,6 +18,7 @@ export default class OpenDriveRenderer {
|
|
|
18
18
|
private projectName;
|
|
19
19
|
private openDriveServer;
|
|
20
20
|
private openDriveClickCallback;
|
|
21
|
+
private makeMd5FromFile;
|
|
21
22
|
showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
|
|
22
23
|
/**
|
|
23
24
|
* 从服务器载入OpenDrive文件解析结果并显示
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/Graphic"),
|
|
2
|
-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/Graphic"),A=require("@arcgis/core/core/promiseUtils"),$=require("@arcgis/core/geometry"),M=require("@arcgis/core/geometry/geometryEngineAsync"),j=require("@arcgis/core/layers/FeatureLayer"),g=require("@arcgis/core/layers/GraphicsLayer"),w=require("axios"),J=require("md5"),G=require("pako"),C=require("../common-utils.js"),P=require("./wasm-loader.js");function N(p){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(e,s,i.get?i:{enumerable:!0,get:()=>p[s]})}}return e.default=p,Object.freeze(e)}const O=N(A),S=N(M);class v{constructor(e){this.wasmLoader=P.default.getInstance(),this.projectName="",this.openDriveServer="",this.currentSectionCode="",this.currentJunctionId="",this.view=e,this.view.popup.visibleElements={closeButton:!1,collapseButton:!1,actionBar:!1},this.laneLayer=new j({id:"OpenDriveLane",fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"id",alias:"编号",type:"string"},{name:"roadId",alias:"道路号",type:"string"},{name:"roadName",alias:"道路名称",type:"string"},{name:"sectionId",alias:"路段号",type:"string"},{name:"laneId",alias:"车道号",type:"string"},{name:"type",alias:"类型",type:"string"},{name:"sumoId",alias:"sumo编号",type:"string"}],objectIdField:"ObjectID",geometryType:"polygon",spatialReference:{wkid:4326},source:[],outFields:["*"],renderer:{type:"unique-value",field:"type",defaultSymbol:{type:"simple-fill",color:[100,100,100],style:"solid",outline:{color:"white",width:1}},uniqueValueInfos:[{value:"shoulder",label:"路肩",symbol:{type:"simple-fill",color:"#008000",style:"solid",outline:{color:"white",width:1}}},{value:"border",label:"路沿",symbol:{type:"simple-fill",color:"#DCDCDC",style:"solid",outline:{color:"white",width:1}}},{value:"driving",label:"机动车道",symbol:{type:"simple-fill",color:[47,79,79,.8],style:"solid",outline:{color:"white",width:1}}},{value:"none",label:"无",symbol:{type:"simple-fill",color:[111,120,135],style:"none",outline:{color:"white",width:1}}},{value:"restricted",label:"禁行区",symbol:{type:"simple-fill",color:"yellow",style:"solid",outline:{color:"yellow",width:2}}},{value:"parking",label:"停车区",symbol:{type:"simple-fill",color:[115,115,115],style:"solid",outline:{color:"white",width:1}}},{value:"median",label:"中央隔离带",symbol:{type:"simple-fill",color:"#008000",style:"solid",outline:{color:"white",width:1}}},{value:"biking",label:"非机动车道",symbol:{type:"simple-fill",color:"#D3D3D3",style:"solid",outline:{color:"white",width:1}}},{value:"sidewalk",label:"人行道",symbol:{type:"simple-fill",color:"#C0C0C0",style:"solid",outline:{color:"white",width:1}}},{value:"junction",label:"路口区域",symbol:{type:"simple-fill",color:"#2F4F4F",style:"solid",outline:{color:"white",width:1}}},{value:"selected",label:"选中车道",symbol:{type:"simple-fill",color:[141,168,211],style:"solid",outline:{color:"white",width:1}}}]}}),this.roadNameLayer=new j({id:"OpenDriveRoadName",fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"roadId",alias:"道路号",type:"string"},{name:"roadName",alias:"道路名称",type:"string"}],objectIdField:"ObjectID",geometryType:"polyline",spatialReference:{wkid:4326},source:[],renderer:{type:"simple",symbol:{type:"simple-line",style:"solid",color:[0,0,0,0],width:1}},labelingInfo:[{symbol:{type:"text",color:"black",haloColor:"white",haloSize:1,font:{size:12,family:"sans-serif"}},labelPlacement:this.view.type==="2d"?"center-along":void 0,labelExpressionInfo:{expression:"$feature.roadName"}}]}),this.junctionLayer=new g({id:"OpenDriveJunction"}),this.sectionLayer=new g({id:"OpenDriveSection"}),this.highlightLayer=new g({id:"OpenDriveHighlight"}),this.flashLayer=new g({id:"OpenDriveFlash"}),this.view.map.addMany([this.laneLayer,this.junctionLayer,this.sectionLayer,this.roadNameLayer,this.highlightLayer,this.flashLayer])}static getInstance(e){return this.instance||(this.instance=new v(e)),this.instance}async makeMd5FromFile(e){const i=await(await fetch(e)).text();return J(i)}async showOpenDriveFromFile(e){var h,u;this.openDriveClickCallback=e.selectedCallback,this.projectName=await this.makeMd5FromFile(e.file),this.openDriveServer=e.server,await this.makeMd5FromFile(e.file);const s=`http://${this.openDriveServer}/api/openDrive/uploadXodr`;let i;try{i=await w.post(s,{},{params:{url:e.file,projectName:this.projectName}})}catch(y){return{status:-1,message:y.message}}if(i.status!==200)return{status:-1,message:i.statusText};console.time("渲染用时");const a=i.data.result.geoSetting;C.default.setGeoData(a.geoReference,a.offsetX,a.offsetY);let t=i.data.result.json;t.startsWith(window.location.protocol)||(t=`${window.location.protocol}//${e.server}${t}`);const r=await(await fetch(t)).arrayBuffer(),n=G.inflate(r,{to:"string"}),o=JSON.parse(n);await this.showAllLanes(o,((h=e.options)==null?void 0:h.showJunctionLane)||!1,((u=e.options)==null?void 0:u.showRoadName)||!0);const l=i.data.result.junctions;if(this.showJunction(l),e.options&&e.options.centerMap!==!1){const y=C.default.transformPointProjection([0,0]);await this.view.goTo(y)}return this.mouseMoveHandler||this.monitorMouseMove(),this.mouseClickHandler||this.monitorMouseClick(),console.timeEnd("渲染用时"),{status:0,message:"ok"}}async showOpenDriveFromServer(e,s){const i=`http://${e}/api/openDrive/analyzeXodr`,a=await w.get(i,{headers:{projectName:s},params:{analyze:!1,compressed:!0}});if(a.status!==200)throw new Error(`OpenDriveRenderer: ${a.statusText}`);let t=a.data.result.json;t.startsWith(window.location.protocol)||(t=`${window.location.protocol}//${e}${t}`);const r=await(await fetch(t)).arrayBuffer(),n=G.inflate(r,{to:"string"}),o=JSON.parse(n);return await this.showAllLanes(o,!1,!1),{status:0,message:"ok"}}async showAllLanes(e,s,i){const a=await this.laneLayer.queryFeatures();return a.features.length>0&&this.laneLayer.applyEdits({deleteFeatures:a.features}),this.roadNameLayer.visible=i,new Promise(t=>{let c=0;this.allLaneGraphics=[],this.allRefLineGraphics=[];const r=[];for(const o of e){if(!s&&o.junction!=="-1")continue;const{id:l,refLine:h}=o;let u=o.name;u.includes("(")&&(u=u.slice(0,u.indexOf("("))),u=u.replace(/(.)/g,"$1 ");const y=new d({geometry:{type:"polyline",paths:[h]},attributes:{ObjectID:c++,roadId:l,roadName:u}});this.allRefLineGraphics.push(y);for(const I of o.laneSections){const L=Number(I.id);for(const f of I.lanePaths){const m=Number(f.id);if(m===0)continue;const F=f.type,b=f.innerPath.concat(f.outerPath.reverse());if(b.length<=3){console.warn(`lane ${m} has less than 3 points`);continue}b.push(f.innerPath[0]);const D=new $.Polygon({rings:[b]});if(D){const k=new d({geometry:D,attributes:{ObjectID:c++,id:`${l}+${L}+${m}`,roadId:l,roadName:o.name,sectionId:L,laneId:m,type:F,sumoId:""}});this.allLaneGraphics.push(k),r.push(k)}}}}const n=setInterval(()=>{if(r.length>0||this.allRefLineGraphics.length>0){if(r.length>0){const o=r.splice(0,100);this.laneLayer.applyEdits({addFeatures:o})}if(this.allRefLineGraphics.length>0){const o=this.allRefLineGraphics.splice(0,10);this.roadNameLayer.applyEdits({addFeatures:o})}}else clearInterval(n),t()},10)})}showJunction(e){const s=[];for(const i of e){i.nodeType=i.type;const a=new d({geometry:{type:"point",x:i.coordinates[0],y:i.coordinates[1]},attributes:{...i,selected:!1,type:"OpenDriveJunction"},symbol:{type:"picture-marker",url:i.crossId?"/GisViewerAssets/Images/point_green.png":"/GisViewerAssets/Images/point_yellow.png",width:30,height:30}});s.push(a)}this.junctionLayer.addMany(s)}monitorMouseMove(){const e=O.debounce(async s=>{var c;const a=(c=(await this.view.hitTest(s,{include:[this.laneLayer,this.junctionLayer]})).results)==null?void 0:c.filter(r=>r.type==="graphic");if(a.length===0){this.currentSectionCode!==""&&(this.currentSectionCode="",this.highlightGraphic=void 0,this.highlightLayer.removeAll()),this.currentJunctionId!==""&&(this.currentJunctionId="",this.view.popup.close());return}const t=a[0];if(this.hitGraphic=t.graphic,t.layer.id==="OpenDriveLane"){const r=`${this.hitGraphic.attributes.roadId}+${this.hitGraphic.attributes.sectionId}`;if(r===this.currentSectionCode||this.sectionLayer.graphics.findIndex(h=>h.getAttribute("id")===r)>=0)return;this.currentSectionCode=r;const o=this.allLaneGraphics.filter(h=>`${h.attributes.roadId}+${h.attributes.sectionId}`===r),l=await S.union(o.map(h=>h.geometry));this.highlightGraphic=new d({geometry:l,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:2}},attributes:{type:"OpenDriveSection",id:r,selected:!1}}),this.highlightLayer.removeAll(),this.highlightLayer.add(this.highlightGraphic)}else if(t.layer.id==="OpenDriveJunction"){const r=this.hitGraphic.getAttribute("id");if(r===this.currentJunctionId)return;this.currentJunctionId=r;const n=this.hitGraphic.getAttribute("name"),o=this.hitGraphic.getAttribute("crossId");this.view.popup.open({title:n,content:`<table>
|
|
2
|
+
<tr><td>路口编号</td><td>${r}</td></tr>
|
|
3
|
+
<tr><td>信号机编号</td><td>${o||"无信控"}</td></tr>
|
|
4
|
+
</table>`,location:this.hitGraphic.geometry})}});this.mouseMoveHandler=this.view.on("pointer-move",async s=>{e(s).catch(()=>{})})}monitorMouseClick(){const e=O.debounce(async s=>{var n;const a=(n=(await this.view.hitTest(s,{include:[this.highlightLayer,this.junctionLayer,this.sectionLayer]})).results)==null?void 0:n.filter(o=>o.type==="graphic");if(a.length===0)return;const t=a[0].graphic,c=t.getAttribute("type"),r=t.getAttribute("id");if(c==="OpenDriveJunction")if(t.getAttribute("selected")===!1){const o=`http://${this.openDriveServer}/api/sumo/getSumoJunction`,l=await w.get(o,{params:{id:r,projectName:this.projectName}});l.status===200&&l.data.status===0&&(this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveJunction",id:r,details:l.data.result}),t.setAttribute("selected",!0),t.symbol.url="/GisViewerAssets/Images/point_red.png",this.increasePictureMarkerSize(t,50))}else{this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveJunction",id:r,details:void 0}),t.setAttribute("selected",!1);const o=t.getAttribute("crossId");t.symbol.url=o?"/GisViewerAssets/Images/point_green.png":"/GisViewerAssets/Images/point_yellow.png",this.decreasePictureMarkerSize(t,30)}else if(c==="OpenDriveSection")if(t.getAttribute("selected"))this.sectionLayer.remove(t),this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveSection",id:r,details:void 0});else{this.highlightLayer.remove(t),this.sectionLayer.add(t),t.setAttribute("selected",!0);const o=`http://${this.openDriveServer}/api/sumo/getSumoEdge`,l=await w.get(o,{params:{id:r,projectName:this.projectName}});l.status===200&&l.data.status===0&&this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveSection",id:r,details:l.data.result})}});this.mouseClickHandler=this.view.on("immediate-click",async s=>{e(s).catch(()=>{})})}increasePictureMarkerSize(e,s){const i=setInterval(()=>{const a=e.symbol,t=a.width;t<s?e.symbol={type:"picture-marker",url:a.url,width:t+1,height:t+1}:clearInterval(i)},20)}decreasePictureMarkerSize(e,s){const i=setInterval(()=>{const a=e.symbol,t=a.width;t>s?e.symbol={type:"picture-marker",url:a.url,width:t-1,height:t-1}:clearInterval(i)},20)}async clearOpenDrive(){var s,i;let e=await this.laneLayer.queryFeatures();e.features.length>0&&await this.laneLayer.applyEdits({deleteFeatures:e.features}),e=await this.roadNameLayer.queryFeatures(),e.features.length>0&&await this.roadNameLayer.applyEdits({deleteFeatures:e.features}),this.highlightLayer.removeAll(),this.junctionLayer.removeAll(),this.wasmLoader.clear(),(s=this.mouseMoveHandler)==null||s.remove(),(i=this.mouseClickHandler)==null||i.remove()}async findSumo(e){const{type:s,id:i}=e,a=e.flash===void 0?!0:e.flash;if(s==="junction")return await this.findJunction(i,a);if(s==="edge"){const t=i.split("+");if(t.length>2)return{status:-1,message:"id格式错误"};const c=t.length===2?Number(t[1]):void 0,r=t[0].split("#");if(r.length>2)return{status:-1,message:"id格式错误"};const n=r[0],o=r.length===2?Number(r[1]):void 0;return await this.findLane({roadsectId:n,segmentId:o,laneId:c,flash:a})}else return{status:-1,message:"未知类型"}}async findJunction(e,s){const i=this.junctionLayer.graphics.find(a=>a.attributes.id===e);if(!i)return{status:-1,message:"未找到。请检查路口编号"};if(s){const a=new d({geometry:i.geometry,symbol:{type:"simple-marker",style:"circle",size:30,color:[255,0,0,.6],outline:{color:"red",width:1}}});this.flashGraphic(a)}return await this.view.goTo(i.geometry,{duration:1e3}),{status:0,message:"ok"}}async findLane(e){let{roadsectId:s,segmentId:i,laneId:a}=e;s.startsWith("-")&&(s=s.slice(1));let t=this.allLaneGraphics.filter(n=>n.attributes.roadId===s);if(t.length===0)return{status:-1,message:"未找到。请检查路段编号"};if(i!==void 0){const n=[];if(t.forEach(o=>{const l=Number(o.attributes.sectionId);n.indexOf(l)===-1&&n.push(l)}),n.sort((o,l)=>o-l),i>n.length-1)return{status:-1,message:"未找到。请检查基本段编号"};i=n[i],t=t.filter(o=>Number(o.attributes.sectionId)===i)}if(a!==void 0){const n=[];if(t.forEach(o=>{const l=Number(o.attributes.laneId);n.indexOf(l)===-1&&n.push(l)}),n.sort((o,l)=>o-l),a>n.length-1)return{status:-1,message:"未找到。请检查车道编号"};a=n[a],t=t.filter(o=>Number(o.attributes.laneId)===a)}const c=t.map(n=>n.geometry),r=await S.union(c);if(e.flash){const n=new d({geometry:r,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:0}}});this.flashGraphic(n)}return await this.view.goTo(r,{duration:1e3}),{status:0,message:"ok"}}flashGraphic(e){this.flashLayer.removeAll(),this.flashLayer.add(e);let s=0,i=!0;const a=setInterval(()=>{i?(this.flashLayer.opacity-=.02,this.flashLayer.opacity<=.1&&(i=!1,s++)):(this.flashLayer.opacity+=.02,this.flashLayer.opacity>=1&&(i=!0)),s>=5&&(this.flashLayer.removeAll(),this.flashLayer.opacity=1,clearInterval(a))},10)}async splitLane(e){return{status:0,message:"ok",result:e}}}exports.default=v;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gisviewer-vue3-arcgis",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.123",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "es/index.mjs",
|
|
6
6
|
"files": [
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
"@vitest/coverage-c8": "^0.29.2",
|
|
34
34
|
"axios": "^1.4.0",
|
|
35
35
|
"fast-xml-parser": "^4.4.0",
|
|
36
|
+
"md5": "^2.3.0",
|
|
36
37
|
"pako": "^2.1.0",
|
|
37
38
|
"pinia": "^2.0.33",
|
|
38
39
|
"proj4": "^2.11.0",
|