gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
337 lines (336 loc) • 10.9 kB
JavaScript
import * as m from "@arcgis/core/core/reactiveUtils";
import { Point as u } from "@arcgis/core/geometry";
import * as g from "@arcgis/core/geometry/support/webMercatorUtils.js";
import L from "@arcgis/core/Graphic";
import b from "@arcgis/core/layers/GraphicsLayer";
import M from "./signal-holo-flow.mjs";
class G extends M {
constructor(e, o) {
var s, n;
super(e), this.waitingAreaLayer = new b(), this.watchHandle = null, this.trajectoryDelayTime = 2, this.stopLineMap = /* @__PURE__ */ new Map(), this.waitingAreaMap = /* @__PURE__ */ new Map(), this.lampGroupMap = /* @__PURE__ */ new Map(), this.countdownPanelProps = o, this.view.map.add(this.waitingAreaLayer), this.trajectoryDelayTime = (n = (s = this.mapConfig.holoFlow) == null ? void 0 : s.signal) == null ? void 0 : n.delay, this.trajectoryDelayTime === void 0 && (this.trajectoryDelayTime = 2);
}
/**
* 读取停止线图层，将灯组面板沿着停止线放置
* @returns
*/
async initializeLayer() {
var n, a, i, r, t;
if (this.stopLineMap.size > 0)
return;
console.time("初始化停止线图层");
let e = (a = (n = this.mapConfig.holoFlow) == null ? void 0 : n.signal) == null ? void 0 : a.stopLineLayer;
if (!e)
return;
e = this.mapConfig.assetsRoot + "/" + e;
let o = await fetch(e), s = await o.json();
for (const l of s.features) {
const { roadId: c, nodeId: h } = l.properties;
let { destinationPoint: p } = l.properties;
const { coordinates: f } = l.geometry;
if (p) {
if (typeof p == "string")
try {
p = JSON.parse(p);
} catch (d) {
console.error("解析面板基准点失败", d);
continue;
}
} else {
const d = f[0], w = f[f.length - 1], y = (d[0] + w[0]) / 2, P = (d[1] + w[1]) / 2;
p = [y, P];
}
this.stopLineMap.set(`${h}_${c}`, {
coord: f,
panelPoint: p
});
}
if (console.timeEnd("初始化停止线图层"), console.time("初始化待行区图层"), e = (r = (i = this.mapConfig.holoFlow) == null ? void 0 : i.signal) == null ? void 0 : r.waitingAreaLayer, !!e) {
e = this.mapConfig.assetsRoot + "/" + e, o = await fetch(e), s = await o.json();
for (const l of s.features) {
const { roadId: c, direction: h, nodeId: p } = l.properties, { coordinates: f } = l.geometry, d = `${p}_${c}`;
this.waitingAreaMap.has(d) || this.waitingAreaMap.set(d, []), (t = this.waitingAreaMap.get(d)) == null || t.push({ coord: f, direction: h });
}
console.timeEnd("初始化待行区图层");
}
}
/**
* 初始化灯组与进口道的关联关系
*/
initializeLampGroup(e) {
const { sigId: o, lampGroupList: s } = e, n = [];
s.forEach((a) => {
const { lampGroupNo: i, lampGroupType: r, crossFlowList: t, pedList: l } = a;
if (t.length > 0)
for (const c of t) {
if (r === 81)
continue;
const h = c.upSectionId;
let p = "s";
switch (c.turn) {
case 1:
p = "s";
break;
case 2:
p = "l";
break;
case 4:
p = "r";
break;
case 8:
p = "u";
break;
}
n.push({
lampGroupId: i,
roadId: h,
dir: p
});
}
l.length > 0;
}), this.lampGroupMap.set(o, n);
}
/**
* 处理统一信控平台信号灯数据
* @param data
*/
handleUniSignalData(e) {
this.watchHandle || (this.watchHandle = m.watch(
() => this.view.extent,
() => this.updatePanelPosition()
));
const { sigId: o, runningStatus: s } = e.data.basicInfo, n = this.lampGroupMap.get(o);
if (!n)
return { status: -1, message: "灯组未初始化" };
const a = /* @__PURE__ */ new Map();
let i = !1;
switch (String(s)) {
case "4": {
i = !0, n.forEach((r) => {
const { roadId: t, dir: l } = r;
a.set(t, {
...a.get(t) || {},
[`${l}Number`]: "",
[`${l}Color`]: "yellow"
});
});
break;
}
case "5": {
n.forEach((r) => {
const { roadId: t, dir: l } = r;
a.set(t, {
...a.get(t) || {},
[`${l}Number`]: "",
[`${l}Color`]: "red"
});
});
break;
}
case "6":
case "9": {
n.forEach((r) => {
const { roadId: t, dir: l } = r;
a.set(t, {
...a.get(t) || {},
[`${l}Number`]: "",
[`${l}Color`]: "off"
});
});
break;
}
default: {
const { curSigColorInfo: r } = e.data;
r.forEach((t) => {
const l = String(t.lamgroupId), { color: c, leftTime: h } = t, p = n.find(
(f) => f.lampGroupId === l
);
if (p) {
const { roadId: f, dir: d } = p;
a.set(f, {
...a.get(f) || {},
[`${d}Number`]: h,
[`${d}Color`]: c === 1 ? "red" : c === 2 ? "yellow" : "green"
});
}
});
}
}
return this.updateLampGroupPanelStatus(o, a, i), { status: 0, message: "ok" };
}
/**
* 根据地图比例尺计算灯组面板缩放比例
*/
getPanelScale() {
const e = this.view.scale;
let o = 1;
return e < 500 ? o = 1.2 : e < 1e3 ? o = 1 : e < 2e3 ? o = 0.8 : e < 4e3 ? o = 0.4 : o = 0, o;
}
/**
* 地图移动时更新灯组面板位置
*/
updatePanelPosition() {
const e = this.getPanelScale();
for (const o of this.countdownPanelProps) {
e !== this.currentPanelScale && (o.scale = e);
const { mapPoint: s } = o;
let n = new u({
x: s[0],
y: s[1]
});
this.view.spatialReference.isWebMercator && (n = g.geographicToWebMercator(
n
));
const a = this.view.toScreen(n);
if (o.position.left = a.x, o.position.top = a.y, this.view.type === "3d") {
const i = this.getPanelRotation(o.stopLine);
o.rotation = i;
}
}
this.currentPanelScale = e;
}
doHoloSignalData(e) {
const o = e.crossId, s = e.showWaitingArea === !0, n = e.phaseCountDownList, a = /* @__PURE__ */ new Map();
for (const i of n) {
let r = "";
for (let h of i.roadIdList)
if (h.startsWith("-") && (h = h.slice(1)), this.stopLineMap.has(`${o}_${h}`)) {
r = `${o}_${h}`;
break;
}
if (!r) {
console.log(`没有找到对应的进口道${o}--${r}`);
continue;
}
let t = a.get(r);
if (t || (t = {}, a.set(r, t)), !i.direction)
continue;
const l = i.direction.toLowerCase(), c = i.color === 1 ? "red" : i.color === 2 ? "yellow" : "green";
l === "u" ? (t.uNumber = i.leftTime, t.uColor = c) : l === "l" ? (t.lNumber = i.leftTime, t.lColor = c) : l === "s" ? (t.sNumber = i.leftTime, t.sColor = c) : l === "r" && (t.rNumber = i.leftTime, t.rColor = c);
}
this.updateLampGroupPanelStatus(o, a), s ? (this.updateWaitingArea(o, a), this.waitingAreaLayer.visible = !0) : this.waitingAreaLayer.visible = !1;
}
updateWaitingArea(e, o) {
o.forEach((s, n) => {
var a;
if (s.lColor) {
let i = this.waitingAreaLayer.graphics.find(
(r) => r.attributes.roadId === n && r.attributes.direction === "l"
);
if (i)
i.attributes.color !== s.lColor && (i.attributes.color = s.lColor, i.symbol = {
type: "simple-fill",
color: this.getColor(s.lColor),
outline: {
color: this.getColor(s.lColor)
}
});
else {
const r = (a = this.waitingAreaMap.get(n)) == null ? void 0 : a.find((t) => t.direction === "l");
r && (i = new L({
geometry: { type: "polygon", rings: r.coord },
attributes: {
roadId: n,
direction: "l",
color: s.lColor
},
symbol: {
type: "simple-fill",
color: this.getColor(s.lColor),
outline: {
color: this.getColor(s.lColor)
}
}
}), this.waitingAreaLayer.add(i));
}
}
});
}
getColor(e) {
return e === "green" ? [0, 255, 0, 0.8] : e === "yellow" ? [255, 192, 2, 0.8] : [255, 0, 0, 0.8];
}
updateLampGroupPanelStatus(e, o, s = !1) {
o.forEach((n, a) => {
const i = this.stopLineMap.get(a);
if (!i)
return;
const r = this.countdownPanelProps.find(
(t) => t.roadId === a
);
if (r)
r.lampStatus = n, r.flash = s;
else {
let t = new u({
x: i.panelPoint[0],
y: i.panelPoint[1]
});
this.view.spatialReference.isWebMercator && (t = g.geographicToWebMercator(
t
));
const l = this.view.toScreen(t), c = this.getPanelRotation(i.coord);
this.countdownPanelProps.push({
displayMode: "complex",
flash: s,
crossId: e,
roadId: a,
mapPoint: i.panelPoint,
// 定位点地理坐标
stopLine: i.coord,
// 关联的停止线坐标
position: { left: l.x, top: l.y },
// 定位点屏幕坐标
rotation: c,
// 面板旋转角度
scale: this.getPanelScale(),
lampStatus: n
// 灯组状态
});
}
});
}
/**
* 处理全息流信号灯数据
* @param data
* @returns
*/
async handleHoloSignalData(e) {
this.watchHandle || (this.watchHandle = m.watch(
() => this.view.extent,
() => this.updatePanelPosition()
)), this.trajectoryDelayTime === 0 ? this.doHoloSignalData(e) : setTimeout(
() => this.doHoloSignalData(e),
this.trajectoryDelayTime * 1e3
);
}
clearSignal() {
var e;
this.waitingAreaLayer.removeAll(), this.countdownPanelProps.length = 0, (e = this.watchHandle) == null || e.remove(), this.watchHandle = null;
}
/**
* 从停止线坐标计算面板旋转角度
* @param coordinates
* @returns
*/
getPanelRotation(e) {
const o = e[0];
let s = new u({
x: o[0],
y: o[1]
});
this.view.spatialReference.isWebMercator && (s = g.geographicToWebMercator(
s
));
const n = this.view.toScreen(s), a = e[e.length - 1];
let i = new u({
x: a[0],
y: a[1]
});
this.view.spatialReference.isWebMercator && (i = g.geographicToWebMercator(
i
));
const r = this.view.toScreen(i), t = r.x - n.x, l = r.y - n.y;
return Math.atan2(l, t) * (180 / Math.PI);
}
}
export {
G as default
};