gisviewer-vue3-arcgis 1.0.127 → 1.0.129
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/gis-map.vue.d.ts +4 -1
- package/es/src/gis-map/gis-map.vue.mjs +71 -59
- package/es/src/gis-map/index.d.ts +3 -0
- package/es/src/gis-map/utils/open-drive-renderer/index.d.ts +45 -1
- package/es/src/gis-map/utils/open-drive-renderer/index.mjs +392 -241
- package/es/src/gis-map/utils/signal-control-area-controller/district-controller.mjs +5 -5
- package/es/src/gis-map/utils/signal-control-area-controller/index.d.ts +6 -0
- package/es/src/gis-map/utils/signal-control-area-controller/index.mjs +42 -27
- package/es/src/types/index.d.ts +4 -0
- package/lib/src/gis-map/gis-map.vue.d.ts +4 -1
- package/lib/src/gis-map/gis-map.vue.js +1 -1
- package/lib/src/gis-map/index.d.ts +3 -0
- package/lib/src/gis-map/utils/open-drive-renderer/index.d.ts +45 -1
- package/lib/src/gis-map/utils/open-drive-renderer/index.js +4 -4
- package/lib/src/gis-map/utils/signal-control-area-controller/district-controller.js +1 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/index.d.ts +6 -0
- package/lib/src/gis-map/utils/signal-control-area-controller/index.js +1 -1
- package/lib/src/types/index.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import p from "@arcgis/core/Graphic";
|
|
2
|
-
import * as
|
|
3
|
-
import { Polygon as
|
|
4
|
-
import * as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
2
|
+
import * as j from "@arcgis/core/core/promiseUtils";
|
|
3
|
+
import { Polygon as O } from "@arcgis/core/geometry";
|
|
4
|
+
import * as I from "@arcgis/core/geometry/geometryEngine";
|
|
5
|
+
import G from "@arcgis/core/layers/FeatureLayer";
|
|
6
|
+
import w from "@arcgis/core/layers/GraphicsLayer";
|
|
7
|
+
import m from "axios";
|
|
8
8
|
import F from "md5";
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
class
|
|
13
|
-
constructor(
|
|
14
|
-
this.wasmLoader =
|
|
9
|
+
import S from "pako";
|
|
10
|
+
import A from "../common-utils.mjs";
|
|
11
|
+
import $ from "./wasm-loader.mjs";
|
|
12
|
+
class C {
|
|
13
|
+
constructor(e) {
|
|
14
|
+
this.wasmLoader = $.getInstance(), this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.currentJunctionId = "", this.view = e, this.view.popup.visibleElements = {
|
|
15
15
|
closeButton: !1,
|
|
16
16
|
collapseButton: !1,
|
|
17
17
|
actionBar: !1
|
|
18
|
-
}, this.laneLayer = new
|
|
18
|
+
}, this.laneLayer = new G({
|
|
19
19
|
id: "OpenDriveLane",
|
|
20
20
|
fields: [
|
|
21
21
|
{
|
|
@@ -223,7 +223,7 @@ class S {
|
|
|
223
223
|
}
|
|
224
224
|
]
|
|
225
225
|
}
|
|
226
|
-
}), this.roadNameLayer = new
|
|
226
|
+
}), this.roadNameLayer = new G({
|
|
227
227
|
id: "OpenDriveRoadName",
|
|
228
228
|
fields: [
|
|
229
229
|
{
|
|
@@ -273,7 +273,7 @@ class S {
|
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
]
|
|
276
|
-
}), this.junctionLayer = new
|
|
276
|
+
}), this.junctionLayer = new w({ id: "OpenDriveJunction" }), this.sectionLayer = new w({ id: "OpenDriveSection" }), this.highlightLayer = new w({ id: "OpenDriveHighlight" }), this.flashLayer = new w({ id: "OpenDriveFlash" }), this.view.map.addMany([
|
|
277
277
|
this.laneLayer,
|
|
278
278
|
this.junctionLayer,
|
|
279
279
|
this.sectionLayer,
|
|
@@ -282,25 +282,38 @@ class S {
|
|
|
282
282
|
this.flashLayer
|
|
283
283
|
]);
|
|
284
284
|
}
|
|
285
|
-
static getInstance(
|
|
286
|
-
return this.instance || (this.instance = new
|
|
285
|
+
static getInstance(e) {
|
|
286
|
+
return this.instance || (this.instance = new C(e)), this.instance;
|
|
287
287
|
}
|
|
288
|
-
async makeMd5FromFile(
|
|
289
|
-
|
|
290
|
-
|
|
288
|
+
async makeMd5FromFile(e) {
|
|
289
|
+
try {
|
|
290
|
+
const s = await (await fetch(e)).text();
|
|
291
|
+
return { status: 0, message: "ok", result: F(s) };
|
|
292
|
+
} catch (t) {
|
|
293
|
+
return { status: -1, message: t.message };
|
|
294
|
+
}
|
|
291
295
|
}
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
296
|
+
/**
|
|
297
|
+
* 从本地文件/网络文件显示OpenDrive内容
|
|
298
|
+
* @param params
|
|
299
|
+
* @returns
|
|
300
|
+
*/
|
|
301
|
+
async showOpenDriveFromFile(e) {
|
|
302
|
+
var d, f;
|
|
303
|
+
this.openDriveClickCallback = e.selectedCallback, console.time("md5用时");
|
|
304
|
+
const t = await this.makeMd5FromFile(e.file);
|
|
305
|
+
if (t.status !== 0)
|
|
306
|
+
return t;
|
|
307
|
+
this.projectName = t.result, console.timeEnd("md5用时"), this.openDriveServer = e.server, await this.makeMd5FromFile(e.file);
|
|
308
|
+
const s = `http://${this.openDriveServer}/api/openDrive/uploadXodr`;
|
|
309
|
+
let o;
|
|
297
310
|
try {
|
|
298
|
-
|
|
299
|
-
|
|
311
|
+
o = await m.post(
|
|
312
|
+
s,
|
|
300
313
|
{},
|
|
301
314
|
{
|
|
302
315
|
params: {
|
|
303
|
-
url:
|
|
316
|
+
url: e.file,
|
|
304
317
|
projectName: this.projectName
|
|
305
318
|
}
|
|
306
319
|
}
|
|
@@ -308,26 +321,26 @@ class S {
|
|
|
308
321
|
} catch (u) {
|
|
309
322
|
return { status: -1, message: u.message };
|
|
310
323
|
}
|
|
311
|
-
if (
|
|
312
|
-
return { status: -1, message:
|
|
324
|
+
if (o.status !== 200)
|
|
325
|
+
return { status: -1, message: o.statusText };
|
|
313
326
|
console.time("渲染用时");
|
|
314
|
-
const
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
327
|
+
const i = o.data.result.geoSetting;
|
|
328
|
+
A.setGeoData(
|
|
329
|
+
i.geoReference,
|
|
330
|
+
i.offsetX,
|
|
331
|
+
i.offsetY
|
|
319
332
|
);
|
|
320
|
-
let
|
|
321
|
-
|
|
322
|
-
const
|
|
333
|
+
let l = o.data.result.json;
|
|
334
|
+
l.startsWith(window.location.protocol) || (l = `${window.location.protocol}//${e.server}${l}`);
|
|
335
|
+
const n = await (await fetch(l)).arrayBuffer(), r = S.inflate(n, { to: "string" }), c = JSON.parse(r);
|
|
323
336
|
await this.showAllLanes(
|
|
324
|
-
|
|
325
|
-
((
|
|
326
|
-
((
|
|
337
|
+
c,
|
|
338
|
+
((d = e.options) == null ? void 0 : d.showJunctionLane) || !1,
|
|
339
|
+
((f = e.options) == null ? void 0 : f.showRoadName) || !0
|
|
327
340
|
);
|
|
328
|
-
const
|
|
329
|
-
if (this.showJunction(
|
|
330
|
-
const u =
|
|
341
|
+
const h = o.data.result.junctions;
|
|
342
|
+
if (this.showJunction(h), e.options && e.options.centerMap !== !1) {
|
|
343
|
+
const u = A.transformPointProjection([0, 0]);
|
|
331
344
|
await this.view.goTo(u);
|
|
332
345
|
}
|
|
333
346
|
return this.mouseMoveHandler || this.monitorMouseMove(), this.mouseClickHandler || this.monitorMouseClick(), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
|
|
@@ -337,160 +350,173 @@ class S {
|
|
|
337
350
|
* @param server
|
|
338
351
|
* @param projectName
|
|
339
352
|
*/
|
|
340
|
-
async showOpenDriveFromServer(
|
|
341
|
-
const
|
|
353
|
+
async showOpenDriveFromServer(e, t) {
|
|
354
|
+
const s = `http://${e}/api/openDrive/analyzeXodr`, o = await m.get(s, {
|
|
342
355
|
headers: {
|
|
343
|
-
projectName:
|
|
356
|
+
projectName: t
|
|
344
357
|
},
|
|
345
358
|
params: {
|
|
346
359
|
analyze: !1,
|
|
347
360
|
compressed: !0
|
|
348
361
|
}
|
|
349
362
|
});
|
|
350
|
-
if (
|
|
351
|
-
throw new Error(`OpenDriveRenderer: ${
|
|
352
|
-
let
|
|
353
|
-
|
|
354
|
-
const
|
|
355
|
-
return await this.showAllLanes(
|
|
363
|
+
if (o.status !== 200)
|
|
364
|
+
throw new Error(`OpenDriveRenderer: ${o.statusText}`);
|
|
365
|
+
let i = o.data.result.json;
|
|
366
|
+
i.startsWith(window.location.protocol) || (i = `${window.location.protocol}//${e}${i}`);
|
|
367
|
+
const a = await (await fetch(i)).arrayBuffer(), n = S.inflate(a, { to: "string" }), r = JSON.parse(n);
|
|
368
|
+
return await this.showAllLanes(r, !1, !1), { status: 0, message: "ok" };
|
|
356
369
|
}
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
370
|
+
/**
|
|
371
|
+
* 显示所有车道
|
|
372
|
+
* @param roads 道路列表
|
|
373
|
+
* @param showJunctionLane 是否显示路口内车道
|
|
374
|
+
* @param showRoadName 是否显示道路名称
|
|
375
|
+
* @returns
|
|
376
|
+
*/
|
|
377
|
+
async showAllLanes(e, t, s) {
|
|
378
|
+
const o = await this.laneLayer.queryFeatures();
|
|
379
|
+
return o.features.length > 0 && this.laneLayer.applyEdits({
|
|
380
|
+
deleteFeatures: o.features
|
|
381
|
+
}), this.roadNameLayer.visible = s, new Promise((i) => {
|
|
382
|
+
let l = 0;
|
|
363
383
|
this.allLaneGraphics = [], this.allRefLineGraphics = [];
|
|
364
|
-
const
|
|
365
|
-
for (const
|
|
366
|
-
if (!
|
|
384
|
+
const a = [];
|
|
385
|
+
for (const r of e) {
|
|
386
|
+
if (!t && r.junction !== "-1")
|
|
367
387
|
continue;
|
|
368
|
-
const { id:
|
|
369
|
-
let d =
|
|
388
|
+
const { id: c, refLine: h } = r;
|
|
389
|
+
let d = r.name;
|
|
370
390
|
d.includes("(") && (d = d.slice(0, d.indexOf("("))), d = d.replace(/(.)/g, "$1 ");
|
|
371
|
-
const
|
|
391
|
+
const f = new p({
|
|
372
392
|
geometry: {
|
|
373
393
|
type: "polyline",
|
|
374
394
|
paths: [h]
|
|
375
395
|
},
|
|
376
396
|
attributes: {
|
|
377
|
-
ObjectID:
|
|
378
|
-
roadId:
|
|
397
|
+
ObjectID: l++,
|
|
398
|
+
roadId: c,
|
|
379
399
|
roadName: d
|
|
380
400
|
}
|
|
381
401
|
});
|
|
382
|
-
this.allRefLineGraphics.push(u);
|
|
383
|
-
for (
|
|
384
|
-
const
|
|
385
|
-
for (const y of
|
|
386
|
-
const
|
|
387
|
-
if (
|
|
402
|
+
this.allRefLineGraphics.push(f), r.laneSections.sort((u, g) => Number(u.id) - Number(g.id));
|
|
403
|
+
for (let u = 0; u < r.laneSections.length; u++) {
|
|
404
|
+
const g = r.laneSections[u], L = Number(g.id);
|
|
405
|
+
for (const y of g.lanePaths) {
|
|
406
|
+
const b = Number(y.id);
|
|
407
|
+
if (b === 0)
|
|
388
408
|
continue;
|
|
389
|
-
const
|
|
409
|
+
const N = y.type, v = y.innerPath.concat(
|
|
390
410
|
y.outerPath.reverse()
|
|
391
411
|
);
|
|
392
|
-
if (
|
|
393
|
-
console.warn(`lane ${
|
|
412
|
+
if (v.length <= 3) {
|
|
413
|
+
console.warn(`lane ${b} has less than 3 points`);
|
|
394
414
|
continue;
|
|
395
415
|
}
|
|
396
|
-
|
|
397
|
-
const
|
|
398
|
-
rings: [
|
|
416
|
+
v.push(y.innerPath[0]);
|
|
417
|
+
const D = new O({
|
|
418
|
+
rings: [v]
|
|
399
419
|
});
|
|
400
|
-
if (
|
|
401
|
-
const
|
|
402
|
-
geometry:
|
|
420
|
+
if (D) {
|
|
421
|
+
const k = new p({
|
|
422
|
+
geometry: D,
|
|
403
423
|
attributes: {
|
|
404
|
-
ObjectID:
|
|
405
|
-
id: `${
|
|
406
|
-
roadId:
|
|
407
|
-
roadName:
|
|
408
|
-
sectionId:
|
|
409
|
-
|
|
410
|
-
|
|
424
|
+
ObjectID: l++,
|
|
425
|
+
id: `${c}+${L}+${b}`,
|
|
426
|
+
roadId: c,
|
|
427
|
+
roadName: r.name,
|
|
428
|
+
sectionId: L,
|
|
429
|
+
sectionIndex: u,
|
|
430
|
+
laneId: b,
|
|
431
|
+
type: N,
|
|
411
432
|
sumoId: ""
|
|
412
433
|
}
|
|
413
434
|
});
|
|
414
|
-
this.allLaneGraphics.push(
|
|
435
|
+
this.allLaneGraphics.push(k), a.push(k);
|
|
415
436
|
}
|
|
416
437
|
}
|
|
417
438
|
}
|
|
418
439
|
}
|
|
419
440
|
const n = setInterval(() => {
|
|
420
|
-
if (
|
|
421
|
-
if (
|
|
422
|
-
const
|
|
441
|
+
if (a.length > 0 || this.allRefLineGraphics.length > 0) {
|
|
442
|
+
if (a.length > 0) {
|
|
443
|
+
const r = a.splice(0, 100);
|
|
423
444
|
this.laneLayer.applyEdits({
|
|
424
|
-
addFeatures:
|
|
445
|
+
addFeatures: r
|
|
425
446
|
});
|
|
426
447
|
}
|
|
427
448
|
if (this.allRefLineGraphics.length > 0) {
|
|
428
|
-
const
|
|
449
|
+
const r = this.allRefLineGraphics.splice(0, 10);
|
|
429
450
|
this.roadNameLayer.applyEdits({
|
|
430
|
-
addFeatures:
|
|
451
|
+
addFeatures: r
|
|
431
452
|
});
|
|
432
453
|
}
|
|
433
454
|
} else
|
|
434
|
-
clearInterval(n),
|
|
455
|
+
clearInterval(n), i();
|
|
435
456
|
}, 10);
|
|
436
457
|
});
|
|
437
458
|
}
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
459
|
+
/**
|
|
460
|
+
* 显示路口
|
|
461
|
+
* @param params
|
|
462
|
+
* @returns
|
|
463
|
+
*/
|
|
464
|
+
showJunction(e) {
|
|
465
|
+
const t = [];
|
|
466
|
+
for (const s of e) {
|
|
467
|
+
s.nodeType = s.type;
|
|
468
|
+
const o = new p({
|
|
443
469
|
geometry: {
|
|
444
470
|
type: "point",
|
|
445
|
-
x:
|
|
446
|
-
y:
|
|
471
|
+
x: s.coordinates[0],
|
|
472
|
+
y: s.coordinates[1]
|
|
447
473
|
},
|
|
448
474
|
attributes: {
|
|
449
|
-
...
|
|
475
|
+
...s,
|
|
450
476
|
selected: !1,
|
|
451
477
|
type: "OpenDriveJunction"
|
|
452
478
|
},
|
|
453
479
|
symbol: {
|
|
454
480
|
type: "picture-marker",
|
|
455
|
-
url:
|
|
481
|
+
url: s.crossId ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png",
|
|
456
482
|
width: 30,
|
|
457
483
|
height: 30
|
|
458
484
|
}
|
|
459
485
|
});
|
|
460
|
-
|
|
486
|
+
t.push(o);
|
|
461
487
|
}
|
|
462
|
-
this.junctionLayer.addMany(
|
|
488
|
+
this.junctionLayer.addMany(t);
|
|
463
489
|
}
|
|
464
490
|
/**
|
|
465
491
|
* 监听鼠标移动事件,高亮显示鼠标所在路段和路口
|
|
466
492
|
*/
|
|
467
493
|
monitorMouseMove() {
|
|
468
|
-
const
|
|
469
|
-
var
|
|
470
|
-
const
|
|
494
|
+
const e = j.debounce(async (t) => {
|
|
495
|
+
var l;
|
|
496
|
+
const o = (l = (await this.view.hitTest(t, {
|
|
471
497
|
include: [this.laneLayer, this.junctionLayer]
|
|
472
|
-
})).results) == null ? void 0 :
|
|
473
|
-
(
|
|
498
|
+
})).results) == null ? void 0 : l.filter(
|
|
499
|
+
(a) => a.type === "graphic"
|
|
474
500
|
);
|
|
475
|
-
if (
|
|
501
|
+
if (o.length === 0) {
|
|
476
502
|
this.currentSectionCode !== "" && (this.currentSectionCode = "", this.highlightGraphic = void 0, this.highlightLayer.removeAll()), this.currentJunctionId !== "" && (this.currentJunctionId = "", this.view.closePopup());
|
|
477
503
|
return;
|
|
478
504
|
}
|
|
479
|
-
const
|
|
480
|
-
if (this.hitGraphic =
|
|
481
|
-
const
|
|
482
|
-
if (
|
|
483
|
-
(h) => h.getAttribute("id") ===
|
|
505
|
+
const i = o[0];
|
|
506
|
+
if (this.hitGraphic = i.graphic, i.layer.id === "OpenDriveLane") {
|
|
507
|
+
const a = `${this.hitGraphic.attributes.roadId}+${this.hitGraphic.attributes.sectionId}`;
|
|
508
|
+
if (a === this.currentSectionCode || this.sectionLayer.graphics.findIndex(
|
|
509
|
+
(h) => h.getAttribute("id") === a
|
|
484
510
|
) >= 0)
|
|
485
511
|
return;
|
|
486
|
-
this.currentSectionCode =
|
|
487
|
-
const
|
|
488
|
-
(h) => `${h.attributes.roadId}+${h.attributes.sectionId}` ===
|
|
489
|
-
),
|
|
490
|
-
|
|
512
|
+
this.currentSectionCode = a;
|
|
513
|
+
const r = this.allLaneGraphics.filter(
|
|
514
|
+
(h) => `${h.attributes.roadId}+${h.attributes.sectionId}` === a
|
|
515
|
+
), c = I.union(
|
|
516
|
+
r.map((h) => h.geometry)
|
|
491
517
|
);
|
|
492
518
|
this.highlightGraphic = new p({
|
|
493
|
-
geometry:
|
|
519
|
+
geometry: c,
|
|
494
520
|
symbol: {
|
|
495
521
|
type: "simple-fill",
|
|
496
522
|
color: [0, 255, 255, 0.5],
|
|
@@ -502,28 +528,28 @@ class S {
|
|
|
502
528
|
},
|
|
503
529
|
attributes: {
|
|
504
530
|
type: "OpenDriveSection",
|
|
505
|
-
id:
|
|
531
|
+
id: a,
|
|
506
532
|
selected: !1
|
|
507
533
|
}
|
|
508
534
|
}), this.highlightLayer.removeAll(), this.highlightLayer.add(this.highlightGraphic);
|
|
509
|
-
} else if (
|
|
510
|
-
const
|
|
511
|
-
if (
|
|
535
|
+
} else if (i.layer.id === "OpenDriveJunction") {
|
|
536
|
+
const a = this.hitGraphic.getAttribute("id");
|
|
537
|
+
if (a === this.currentJunctionId)
|
|
512
538
|
return;
|
|
513
|
-
this.currentJunctionId =
|
|
514
|
-
const n = this.hitGraphic.getAttribute("name"),
|
|
539
|
+
this.currentJunctionId = a;
|
|
540
|
+
const n = this.hitGraphic.getAttribute("name"), r = this.hitGraphic.getAttribute("crossId");
|
|
515
541
|
this.view.popup.open({
|
|
516
542
|
title: n,
|
|
517
543
|
content: `<table>
|
|
518
|
-
<tr><td>路口编号</td><td>${
|
|
519
|
-
<tr><td>信号机编号</td><td>${
|
|
544
|
+
<tr><td>路口编号</td><td>${a}</td></tr>
|
|
545
|
+
<tr><td>信号机编号</td><td>${r || "无信控"}</td></tr>
|
|
520
546
|
</table>`,
|
|
521
547
|
location: this.hitGraphic.geometry
|
|
522
548
|
});
|
|
523
549
|
}
|
|
524
550
|
});
|
|
525
|
-
this.mouseMoveHandler = this.view.on("pointer-move", async (
|
|
526
|
-
t
|
|
551
|
+
this.mouseMoveHandler = this.view.on("pointer-move", async (t) => {
|
|
552
|
+
e(t).catch(() => {
|
|
527
553
|
});
|
|
528
554
|
});
|
|
529
555
|
}
|
|
@@ -531,129 +557,176 @@ class S {
|
|
|
531
557
|
* 监听鼠标点击事件,获取高亮要素的拓扑信息
|
|
532
558
|
*/
|
|
533
559
|
monitorMouseClick() {
|
|
534
|
-
const
|
|
560
|
+
const e = j.debounce(async (t) => {
|
|
535
561
|
var n;
|
|
536
|
-
const
|
|
562
|
+
const o = (n = (await this.view.hitTest(t, {
|
|
537
563
|
include: [this.highlightLayer, this.junctionLayer, this.sectionLayer]
|
|
538
564
|
})).results) == null ? void 0 : n.filter(
|
|
539
|
-
(
|
|
565
|
+
(r) => r.type === "graphic"
|
|
540
566
|
);
|
|
541
|
-
if (
|
|
567
|
+
if (o.length === 0)
|
|
542
568
|
return;
|
|
543
|
-
const
|
|
544
|
-
if (
|
|
545
|
-
if (
|
|
546
|
-
const
|
|
569
|
+
const i = o[0].graphic, l = i.getAttribute("type"), a = i.getAttribute("id");
|
|
570
|
+
if (l === "OpenDriveJunction")
|
|
571
|
+
if (i.getAttribute("selected") === !1) {
|
|
572
|
+
const r = `http://${this.openDriveServer}/api/sumo/getSumoJunction`, c = await m.get(r, {
|
|
547
573
|
params: {
|
|
548
|
-
id:
|
|
574
|
+
id: a,
|
|
549
575
|
projectName: this.projectName
|
|
550
576
|
}
|
|
551
577
|
});
|
|
552
|
-
|
|
578
|
+
c.status === 200 && c.data.status === 0 && (this.openDriveClickCallback && this.openDriveClickCallback({
|
|
553
579
|
type: "OpenDriveJunction",
|
|
554
|
-
id:
|
|
555
|
-
details:
|
|
556
|
-
}),
|
|
580
|
+
id: a,
|
|
581
|
+
details: c.data.result
|
|
582
|
+
}), i.setAttribute("selected", !0), i.symbol.url = "/GisViewerAssets/Images/point_red.png", this.increasePictureMarkerSize(i, 50));
|
|
557
583
|
} else {
|
|
558
584
|
this.openDriveClickCallback && this.openDriveClickCallback({
|
|
559
585
|
type: "OpenDriveJunction",
|
|
560
|
-
id:
|
|
586
|
+
id: a,
|
|
561
587
|
details: void 0
|
|
562
|
-
}),
|
|
563
|
-
const
|
|
564
|
-
|
|
588
|
+
}), i.setAttribute("selected", !1);
|
|
589
|
+
const r = i.getAttribute("crossId");
|
|
590
|
+
i.symbol.url = r ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png", this.decreasePictureMarkerSize(i, 30);
|
|
565
591
|
}
|
|
566
|
-
else if (
|
|
567
|
-
if (
|
|
568
|
-
this.sectionLayer.remove(
|
|
592
|
+
else if (l === "OpenDriveSection")
|
|
593
|
+
if (i.getAttribute("selected"))
|
|
594
|
+
this.sectionLayer.remove(i), this.openDriveClickCallback && this.openDriveClickCallback({
|
|
569
595
|
type: "OpenDriveSection",
|
|
570
|
-
id:
|
|
596
|
+
id: a,
|
|
571
597
|
details: void 0
|
|
572
598
|
});
|
|
573
599
|
else {
|
|
574
|
-
this.highlightLayer.remove(
|
|
575
|
-
const
|
|
600
|
+
this.highlightLayer.remove(i), this.sectionLayer.add(i), i.setAttribute("selected", !0);
|
|
601
|
+
const r = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, c = await m.get(r, {
|
|
576
602
|
params: {
|
|
577
|
-
id:
|
|
603
|
+
id: a,
|
|
578
604
|
projectName: this.projectName
|
|
579
605
|
}
|
|
580
606
|
});
|
|
581
|
-
|
|
607
|
+
c.status === 200 && c.data.status === 0 && this.openDriveClickCallback && (i.setAttribute("edgeId", c.data.result.obj_id), this.openDriveClickCallback({
|
|
582
608
|
type: "OpenDriveSection",
|
|
583
|
-
id:
|
|
584
|
-
details:
|
|
585
|
-
});
|
|
609
|
+
id: a,
|
|
610
|
+
details: c.data.result
|
|
611
|
+
}));
|
|
586
612
|
}
|
|
587
613
|
});
|
|
588
|
-
this.mouseClickHandler = this.view.on("immediate-click", async (
|
|
589
|
-
t
|
|
614
|
+
this.mouseClickHandler = this.view.on("immediate-click", async (t) => {
|
|
615
|
+
e(t).catch(() => {
|
|
590
616
|
});
|
|
591
617
|
});
|
|
592
618
|
}
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
619
|
+
/**
|
|
620
|
+
* 图标增大动画
|
|
621
|
+
* @param graphic
|
|
622
|
+
* @param targetSize
|
|
623
|
+
*/
|
|
624
|
+
increasePictureMarkerSize(e, t) {
|
|
625
|
+
const s = setInterval(() => {
|
|
626
|
+
const o = e.symbol, i = o.width;
|
|
627
|
+
i < t ? e.symbol = {
|
|
597
628
|
type: "picture-marker",
|
|
598
|
-
url:
|
|
599
|
-
width:
|
|
600
|
-
height:
|
|
601
|
-
} : clearInterval(
|
|
629
|
+
url: o.url,
|
|
630
|
+
width: i + 1,
|
|
631
|
+
height: i + 1
|
|
632
|
+
} : clearInterval(s);
|
|
602
633
|
}, 20);
|
|
603
634
|
}
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
635
|
+
/**
|
|
636
|
+
* 图标缩小动画
|
|
637
|
+
* @param graphic
|
|
638
|
+
* @param targetSize
|
|
639
|
+
*/
|
|
640
|
+
decreasePictureMarkerSize(e, t) {
|
|
641
|
+
const s = setInterval(() => {
|
|
642
|
+
const o = e.symbol, i = o.width;
|
|
643
|
+
i > t ? e.symbol = {
|
|
608
644
|
type: "picture-marker",
|
|
609
|
-
url:
|
|
610
|
-
width:
|
|
611
|
-
height:
|
|
612
|
-
} : clearInterval(
|
|
645
|
+
url: o.url,
|
|
646
|
+
width: i - 1,
|
|
647
|
+
height: i - 1
|
|
648
|
+
} : clearInterval(s);
|
|
613
649
|
}, 20);
|
|
614
650
|
}
|
|
651
|
+
async getSumoInfo(e) {
|
|
652
|
+
switch (e.type) {
|
|
653
|
+
case "junction": {
|
|
654
|
+
const t = `http://${this.openDriveServer}/api/sumo/getSumoJunction`, s = await m.get(t, {
|
|
655
|
+
params: {
|
|
656
|
+
id: e.id,
|
|
657
|
+
projectName: this.projectName
|
|
658
|
+
}
|
|
659
|
+
});
|
|
660
|
+
return s.status === 200 ? s.data : { status: -1, message: `路口信息查询失败: ${e.id}` };
|
|
661
|
+
}
|
|
662
|
+
case "edge": {
|
|
663
|
+
const t = e.id.split("#");
|
|
664
|
+
let s = t[0];
|
|
665
|
+
s.startsWith("-") && (s = s.slice(1));
|
|
666
|
+
let o = 0;
|
|
667
|
+
t.length === 2 && (o = Number(t[1]));
|
|
668
|
+
const i = this.allLaneGraphics.find(
|
|
669
|
+
(l) => l.getAttribute("roadId") === s && l.getAttribute("sectionIndex") === o
|
|
670
|
+
);
|
|
671
|
+
if (i) {
|
|
672
|
+
const l = `${s}+${i.getAttribute(
|
|
673
|
+
"sectionId"
|
|
674
|
+
)}`, a = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, n = await m.get(a, {
|
|
675
|
+
params: {
|
|
676
|
+
id: l,
|
|
677
|
+
projectName: this.projectName
|
|
678
|
+
}
|
|
679
|
+
});
|
|
680
|
+
return n.status === 200 ? n.data : { status: -1, message: `路段信息查询失败: ${l}` };
|
|
681
|
+
} else
|
|
682
|
+
return { status: -1, message: "未知类型" };
|
|
683
|
+
}
|
|
684
|
+
default:
|
|
685
|
+
return { status: -1, message: "未知类型" };
|
|
686
|
+
}
|
|
687
|
+
}
|
|
615
688
|
/**
|
|
616
689
|
* 清除OpenDrive内容
|
|
617
690
|
*/
|
|
618
691
|
async clearOpenDrive() {
|
|
619
|
-
var
|
|
620
|
-
let
|
|
621
|
-
|
|
622
|
-
deleteFeatures:
|
|
623
|
-
}),
|
|
624
|
-
deleteFeatures:
|
|
625
|
-
}), this.highlightLayer.removeAll(), this.junctionLayer.removeAll(), this.
|
|
692
|
+
var t, s;
|
|
693
|
+
let e = await this.laneLayer.queryFeatures();
|
|
694
|
+
e.features.length > 0 && await this.laneLayer.applyEdits({
|
|
695
|
+
deleteFeatures: e.features
|
|
696
|
+
}), e = await this.roadNameLayer.queryFeatures(), e.features.length > 0 && await this.roadNameLayer.applyEdits({
|
|
697
|
+
deleteFeatures: e.features
|
|
698
|
+
}), this.highlightLayer.removeAll(), this.junctionLayer.removeAll(), this.sectionLayer.removeAll(), this.flashLayer.removeAll(), (t = this.mouseMoveHandler) == null || t.remove(), this.mouseMoveHandler = void 0, (s = this.mouseClickHandler) == null || s.remove(), this.mouseClickHandler = void 0;
|
|
626
699
|
}
|
|
627
700
|
/**
|
|
628
701
|
* 用sumo的id定位车道、基本段、路段
|
|
629
702
|
* @param params
|
|
630
703
|
* @returns
|
|
631
704
|
*/
|
|
632
|
-
async findSumo(
|
|
633
|
-
const { type:
|
|
634
|
-
if (
|
|
635
|
-
return await this.findJunction(
|
|
636
|
-
if (
|
|
637
|
-
const
|
|
638
|
-
if (
|
|
705
|
+
async findSumo(e) {
|
|
706
|
+
const { type: t, id: s } = e, o = e.flash === void 0 ? !0 : e.flash;
|
|
707
|
+
if (t === "junction")
|
|
708
|
+
return await this.findJunction(s, o);
|
|
709
|
+
if (t === "edge") {
|
|
710
|
+
const i = s.split("+");
|
|
711
|
+
if (i.length > 2)
|
|
639
712
|
return { status: -1, message: "id格式错误" };
|
|
640
|
-
const
|
|
641
|
-
if (
|
|
713
|
+
const l = i.length === 2 ? Number(i[1]) : void 0, a = i[0].split("#");
|
|
714
|
+
if (a.length > 2)
|
|
642
715
|
return { status: -1, message: "id格式错误" };
|
|
643
|
-
const n =
|
|
644
|
-
return await this.findLane({ roadsectId: n, segmentId:
|
|
716
|
+
const n = a[0], r = a.length === 2 ? Number(a[1]) : void 0;
|
|
717
|
+
return await this.findLane({ roadsectId: n, segmentId: r, laneId: l, flash: o });
|
|
645
718
|
} else
|
|
646
719
|
return { status: -1, message: "未知类型" };
|
|
647
720
|
}
|
|
648
|
-
async findJunction(
|
|
649
|
-
const
|
|
650
|
-
(
|
|
721
|
+
async findJunction(e, t) {
|
|
722
|
+
const s = this.junctionLayer.graphics.find(
|
|
723
|
+
(o) => o.attributes.id === e
|
|
651
724
|
);
|
|
652
|
-
if (!
|
|
725
|
+
if (!s)
|
|
653
726
|
return { status: -1, message: "未找到。请检查路口编号" };
|
|
654
|
-
if (
|
|
655
|
-
const
|
|
656
|
-
geometry:
|
|
727
|
+
if (t) {
|
|
728
|
+
const o = new p({
|
|
729
|
+
geometry: s.geometry,
|
|
657
730
|
symbol: {
|
|
658
731
|
type: "simple-marker",
|
|
659
732
|
style: "circle",
|
|
@@ -665,51 +738,51 @@ class S {
|
|
|
665
738
|
}
|
|
666
739
|
}
|
|
667
740
|
});
|
|
668
|
-
this.flashGraphic(
|
|
741
|
+
this.flashGraphic(o);
|
|
669
742
|
}
|
|
670
|
-
return await this.view.goTo(
|
|
743
|
+
return await this.view.goTo(s.geometry, { duration: 1e3 }), { status: 0, message: "ok" };
|
|
671
744
|
}
|
|
672
745
|
/**
|
|
673
746
|
* 用sumo的id定位车道、基本段、路段
|
|
674
747
|
* @param params
|
|
675
748
|
* @returns
|
|
676
749
|
*/
|
|
677
|
-
async findLane(
|
|
678
|
-
let { roadsectId:
|
|
679
|
-
|
|
680
|
-
let
|
|
681
|
-
(n) => n.attributes.roadId ===
|
|
750
|
+
async findLane(e) {
|
|
751
|
+
let { roadsectId: t, segmentId: s, laneId: o } = e;
|
|
752
|
+
t.startsWith("-") && (t = t.slice(1));
|
|
753
|
+
let i = this.allLaneGraphics.filter(
|
|
754
|
+
(n) => n.attributes.roadId === t
|
|
682
755
|
);
|
|
683
|
-
if (
|
|
756
|
+
if (i.length === 0)
|
|
684
757
|
return { status: -1, message: "未找到。请检查路段编号" };
|
|
685
|
-
if (
|
|
758
|
+
if (s !== void 0) {
|
|
686
759
|
const n = [];
|
|
687
|
-
if (
|
|
688
|
-
const
|
|
689
|
-
n.indexOf(
|
|
690
|
-
}), n.sort((
|
|
760
|
+
if (i.forEach((r) => {
|
|
761
|
+
const c = Number(r.attributes.sectionId);
|
|
762
|
+
n.indexOf(c) === -1 && n.push(c);
|
|
763
|
+
}), n.sort((r, c) => r - c), s > n.length - 1)
|
|
691
764
|
return { status: -1, message: "未找到。请检查基本段编号" };
|
|
692
|
-
|
|
693
|
-
(
|
|
765
|
+
s = n[s], i = i.filter(
|
|
766
|
+
(r) => Number(r.attributes.sectionId) === s
|
|
694
767
|
);
|
|
695
768
|
}
|
|
696
|
-
if (
|
|
769
|
+
if (o !== void 0) {
|
|
697
770
|
const n = [];
|
|
698
|
-
if (
|
|
699
|
-
const
|
|
700
|
-
n.indexOf(
|
|
701
|
-
}), n.sort((
|
|
771
|
+
if (i.forEach((r) => {
|
|
772
|
+
const c = Number(r.attributes.laneId);
|
|
773
|
+
n.indexOf(c) === -1 && n.push(c);
|
|
774
|
+
}), n.sort((r, c) => r - c), o > n.length - 1)
|
|
702
775
|
return { status: -1, message: "未找到。请检查车道编号" };
|
|
703
|
-
|
|
704
|
-
(
|
|
776
|
+
o = n[o], i = i.filter(
|
|
777
|
+
(r) => Number(r.attributes.laneId) === o
|
|
705
778
|
);
|
|
706
779
|
}
|
|
707
|
-
const
|
|
780
|
+
const l = i.map(
|
|
708
781
|
(n) => n.geometry
|
|
709
|
-
),
|
|
710
|
-
if (
|
|
782
|
+
), a = I.union(l);
|
|
783
|
+
if (e.flash) {
|
|
711
784
|
const n = new p({
|
|
712
|
-
geometry:
|
|
785
|
+
geometry: a,
|
|
713
786
|
symbol: {
|
|
714
787
|
type: "simple-fill",
|
|
715
788
|
color: [255, 0, 0, 0.5],
|
|
@@ -722,19 +795,97 @@ class S {
|
|
|
722
795
|
});
|
|
723
796
|
this.flashGraphic(n);
|
|
724
797
|
}
|
|
725
|
-
return await this.view.goTo(
|
|
798
|
+
return await this.view.goTo(a, { duration: 1e3 }), { status: 0, message: "ok" };
|
|
726
799
|
}
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
800
|
+
/**
|
|
801
|
+
* graphic渐隐渐显闪烁
|
|
802
|
+
* @param flashGraphic
|
|
803
|
+
*/
|
|
804
|
+
flashGraphic(e) {
|
|
805
|
+
this.flashLayer.removeAll(), this.flashLayer.add(e);
|
|
806
|
+
let t = 0, s = !0;
|
|
807
|
+
const o = setInterval(() => {
|
|
808
|
+
s ? (this.flashLayer.opacity -= 0.02, this.flashLayer.opacity <= 0.1 && (s = !1, t++)) : (this.flashLayer.opacity += 0.02, this.flashLayer.opacity >= 1 && (s = !0)), t >= 5 && (this.flashLayer.removeAll(), this.flashLayer.opacity = 1, clearInterval(o));
|
|
732
809
|
}, 10);
|
|
733
810
|
}
|
|
734
|
-
|
|
735
|
-
|
|
811
|
+
/**
|
|
812
|
+
* 通过接口取消选中
|
|
813
|
+
* @param params
|
|
814
|
+
* @returns
|
|
815
|
+
*/
|
|
816
|
+
unselectSumo(e) {
|
|
817
|
+
if ((!e || e.type === "junction") && this.junctionLayer.graphics.forEach((t) => {
|
|
818
|
+
if ((!e || !e.id || e.id === "" || e.id === t.getAttribute("id")) && t.getAttribute("selected")) {
|
|
819
|
+
t.setAttribute("selected", !1);
|
|
820
|
+
const s = t.getAttribute("crossId");
|
|
821
|
+
t.symbol.url = s ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png", this.decreasePictureMarkerSize(t, 30);
|
|
822
|
+
}
|
|
823
|
+
}), !e || e.type === "edge")
|
|
824
|
+
if (!e || !e.id || e.id === "")
|
|
825
|
+
this.sectionLayer.graphics.forEach((t) => {
|
|
826
|
+
t.visible = !1, t.setAttribute("selected", !1);
|
|
827
|
+
});
|
|
828
|
+
else {
|
|
829
|
+
const t = this.sectionLayer.graphics.find(
|
|
830
|
+
(s) => s.getAttribute("edgeId") === e.id
|
|
831
|
+
);
|
|
832
|
+
t && (t.visible = !1, t.setAttribute("selected", !1));
|
|
833
|
+
}
|
|
834
|
+
return { status: 0, message: "ok" };
|
|
835
|
+
}
|
|
836
|
+
/**
|
|
837
|
+
* 通过接口选中
|
|
838
|
+
* @param params
|
|
839
|
+
* @returns
|
|
840
|
+
*/
|
|
841
|
+
selectSumo(e) {
|
|
842
|
+
switch (e.type) {
|
|
843
|
+
case "junction":
|
|
844
|
+
return this.junctionLayer.graphics.forEach((t) => {
|
|
845
|
+
if (e.id === t.getAttribute("id"))
|
|
846
|
+
return t.setAttribute("selected", !0), t.symbol.url = "/GisViewerAssets/Images/point_red.png", this.increasePictureMarkerSize(t, 50), { status: 0, message: "ok" };
|
|
847
|
+
}), { status: -1, message: "未找到路口" };
|
|
848
|
+
case "edge": {
|
|
849
|
+
const t = e.id.split("#");
|
|
850
|
+
let s = t[0];
|
|
851
|
+
s.startsWith("-") && (s = s.slice(1));
|
|
852
|
+
let o = 0;
|
|
853
|
+
t.length === 2 && (o = Number(t[1]));
|
|
854
|
+
const i = this.allLaneGraphics.filter(
|
|
855
|
+
(l) => l.getAttribute("roadId") === s && l.getAttribute("sectionIndex") === o
|
|
856
|
+
);
|
|
857
|
+
if (i.length > 0) {
|
|
858
|
+
const l = I.union(
|
|
859
|
+
i.map((n) => n.geometry)
|
|
860
|
+
), a = new p({
|
|
861
|
+
geometry: l,
|
|
862
|
+
symbol: {
|
|
863
|
+
type: "simple-fill",
|
|
864
|
+
color: [0, 255, 255, 0.5],
|
|
865
|
+
style: "solid",
|
|
866
|
+
outline: {
|
|
867
|
+
color: [0, 255, 255],
|
|
868
|
+
width: 1
|
|
869
|
+
}
|
|
870
|
+
},
|
|
871
|
+
attributes: {
|
|
872
|
+
type: "OpenDriveSection",
|
|
873
|
+
edgeId: e.id,
|
|
874
|
+
selected: !0
|
|
875
|
+
}
|
|
876
|
+
});
|
|
877
|
+
return this.sectionLayer.add(a), { status: 0, message: "ok" };
|
|
878
|
+
} else
|
|
879
|
+
return { status: -1, message: "未找到路段" };
|
|
880
|
+
}
|
|
881
|
+
default:
|
|
882
|
+
return { status: -1, message: "未知类型" };
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
async splitLane(e) {
|
|
886
|
+
return { status: 0, message: "ok", result: e };
|
|
736
887
|
}
|
|
737
888
|
}
|
|
738
889
|
export {
|
|
739
|
-
|
|
890
|
+
C as default
|
|
740
891
|
};
|