gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
241 lines (240 loc) • 8.6 kB
JavaScript
import * as c from "@arcgis/core/core/reactiveUtils";
import { Point as d } from "@arcgis/core/geometry";
import p from "@arcgis/core/layers/FeatureLayer";
import { toRaw as u } from "vue";
import y from "../../../stores/index.mjs";
class C {
constructor(e) {
this.currentPhaseMap = /* @__PURE__ */ new Map(), this.countdownCanvasMap = /* @__PURE__ */ new Map(), this.lastDataTime = 0, this.isDeletingCanvas = !1, this.canvasWidth = 80, this.canvasHeight = 40, this.view = (e.type === "2d", e);
const t = y.useAppDataStore;
this.mapConfig = u(t.mapConfig);
}
/**
* 初始化相位线图层
* */
async initializeLayer() {
try {
await this.initializePlateBackground();
} catch (e) {
console.log("倒计时背景图片加载失败", e);
}
if (this.mapConfig.phaseLineLayer)
if (this.phaseLineLayer)
this.phaseLineLayer.visible || (this.phaseLineLayer.visible = !0);
else {
const e = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`, s = (await (await fetch(e)).json()).features.map((i, n) => ({
geometry: {
type: "polyline",
paths: [i.geometry.coordinates]
},
attributes: {
ObjectID: n + 1,
id: i.properties.id,
color: "hide"
}
}));
this.phaseLineLayer = new p({
source: s,
geometryType: "polyline",
objectIdField: "ObjectID",
outFields: ["*"],
fields: [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "color",
alias: "color",
type: "string"
}
],
renderer: {
type: "unique-value",
field: "color",
// 没更新相位数据的路口不显示相位线
defaultSymbol: {
type: "simple-line",
color: "lightblue",
width: "2px",
style: "none"
},
uniqueValueInfos: [
{
value: "green",
symbol: {
type: "line-3d",
symbolLayers: [
{
type: "path",
profile: "quad",
material: { color: [19, 255, 69, 0.8] },
width: 1,
height: 0.5
}
]
}
},
{
value: "red",
symbol: {
type: "line-3d",
symbolLayers: [
{
type: "path",
profile: "quad",
material: { color: [254, 5, 9, 0.8] },
width: 1,
height: 0.5
}
]
}
},
{
value: "yellow",
symbol: {
type: "line-3d",
symbolLayers: [
{
type: "path",
profile: "quad",
material: { color: [255, 215, 0, 0.8] },
width: 1,
height: 0.5
}
]
}
}
]
}
}), this.view.map.add(this.phaseLineLayer), console.log("相位线图层初始化成功");
}
}
async initializePlateBackground() {
return new Promise((e, t) => {
const a = new Image();
a.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, a.onload = () => {
this.plateBackground = a, e();
}, a.onerror = (s) => {
t(s);
};
});
}
async handleHoloSignalData(e) {
const { crossId: t, lat: a, lon: s, rtStage: i, channelsConfig: n } = e;
await this.updateCountdown(t, a, s, i), !(!this.phaseLineLayer || !n) && ((!this.currentPhaseMap.has(t) || this.currentPhaseMap.get(t) !== i.stagePhase) && await this.updatePhaseLine(
t,
i.channelsConfig,
n
), this.currentPhaseMap.set(t, i.stagePhase));
}
/**
* 清除实时信号相关图层
* */
clearSignal() {
this.phaseLineLayer && (this.phaseLineLayer.visible = !1), this.countdownWatchHandel && (this.countdownWatchHandel.remove(), this.countdownWatchHandel = void 0), this.countdownCanvasMap.forEach((e) => {
this.view.container.removeChild(e.backgroundCanvas), this.view.container.removeChild(e.countdownCanvas);
}), this.countdownCanvasMap.clear();
}
/**
* 获取显示倒计时的canvas
* */
async updateCountdown(e, t, a, s) {
if (this.isDeletingCanvas)
return;
const i = this.countdownCanvasMap.get(e);
if (i)
this.drawCountdownText(i.countdownCanvas, s);
else
try {
const n = new d({
longitude: a,
latitude: t,
z: 10
}), o = this.view.toScreen(n), l = this.createCountdownCanvas();
if (!l)
return;
const h = l[0], r = l[1];
h.style.left = o.x + "px", h.style.top = o.y + "px", r.style.left = o.x + "px", r.style.top = o.y + "px", this.countdownCanvasMap.set(e, {
backgroundCanvas: h,
countdownCanvas: r,
mapPoint: n
}), this.drawCountdownText(r, s);
} catch (n) {
console.log("倒计时canvas创建失败", e, n);
}
this.countdownWatchHandel || (this.countdownWatchHandel = c.watch(
() => this.view.extent,
() => {
this.countdownCanvasMap.forEach((n) => {
const o = this.view.toScreen(n.mapPoint);
n.backgroundCanvas.style.left = o.x + "px", n.backgroundCanvas.style.top = o.y + "px", n.countdownCanvas.style.left = o.x + "px", n.countdownCanvas.style.top = o.y + "px";
});
}
));
}
/**
* 在倒计时面板上写入倒计时时间
* @param canvas 倒计时面板canvas
* @param rtStage 相位数据
* @param rtStage.stageID 相位名
* @param rtStage.stageRemainingTime 剩余时间
* @param rtStage.stageAllRedTime 全红时间
* @param rtStage.stageYellowTime 黄灯时间
*/
drawCountdownText(e, t) {
const a = e.getContext("2d", {
willReadFrequently: !0
});
a.clearRect(0, 0, e.width, e.height), a.font = "24px Digital", a.textBaseline = "middle", a.textAlign = "center", a.fillStyle = t.stageRemainingTime <= t.stageAllRedTime ? "red" : t.stageRemainingTime <= t.stageAllRedTime + t.stageYellowTime ? "yellow" : "lime", a.fillText(
t.stageRemainingTime.toFixed(0),
e.width / 2,
e.height / 2
);
}
async updatePhaseLine(e, t, a) {
const s = this.phaseLineLayer.source.filter(
(i) => i.getAttribute("id").includes(e)
);
s.forEach((i) => {
const n = i.getAttribute("id");
this.isLaneInChannels(n, t) ? i.setAttribute("color", "green") : this.isLaneInChannels(n, a) ? i.setAttribute("color", "red") : i.setAttribute("color", "green");
}), await this.phaseLineLayer.applyEdits({ updateFeatures: s });
}
/**
* 车道是否在通道中
* @param laneCode 车道编码
* @param channels 通道列表
* @returns
*/
isLaneInChannels(e, t) {
const a = e.split("+"), s = a[1], i = a[2];
for (let n = 0; n < t.length; n++)
for (let o = 0; o < t[n].laneSnList.length; o++) {
const l = t[n].laneSnList[o].toFixed(0);
if (s === l[0] && i === l[1])
return !0;
}
return !1;
}
createCountdownCanvas() {
const e = document.createElement("canvas");
e.width = this.canvasWidth, e.height = this.canvasHeight, e.style.position = "absolute", e.style.transform = "translate(-50%, -50%)";
const t = e.getContext("2d", {
willReadFrequently: !0
});
this.plateBackground ? t.drawImage(
this.plateBackground,
0,
0,
this.canvasWidth,
this.canvasHeight
) : (t.strokeStyle = "rgba(0, 255, 0, 1)", t.lineWidth = 1, t.strokeRect(0, 0, this.canvasWidth, this.canvasHeight), t.fillStyle = "rgba(0, 0, 0, 1)", t.fillRect(0, 0, this.canvasWidth, this.canvasHeight)), this.view.container.appendChild(e);
const a = document.createElement("canvas");
return a.width = this.canvasWidth - 10, a.height = this.canvasHeight - 10, a.style.position = "absolute", a.style.transform = "translate(-50%, -50%)", this.view.container.appendChild(a), [e, a];
}
}
export {
C as default
};