gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
518 lines (517 loc) • 14.9 kB
JavaScript
import m from "@arcgis/core/Graphic";
import u from "@arcgis/core/layers/GraphicsLayer";
import { toRaw as g } from "vue";
import y from "../../../stores/index.mjs";
class v {
constructor(t) {
this.hasGpu = !1, this.appDataStore = y.useAppDataStore, this.logTable = [
[
"uuid",
"ptcId",
"plateno",
"timestamp",
"localTimestamp",
"timestamp_str",
"speed",
"laneNo",
"objHeight",
"objLength",
"latitude",
"longitude",
"ptcType",
"vehicleType",
"vehicleColor",
"plateColor",
"sbdm",
"heading",
"fixAngle",
"roadLayer",
"status",
"step",
"receiveTimestamp"
]
], this.needInterpolate = !0, this.isPaused = !1, this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.simulateVehicleColor = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.sourceVehicleColorMap = /* @__PURE__ */ new Map(), this.simulatedVehicleColorMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = t, this.mapConfig = g(this.appDataStore.mapConfig), this.vehicleLayer = new u({
id: "vehicleLayer"
}), this.view.map.add(this.vehicleLayer);
const e = localStorage.getItem("gpu");
this.hasGpu = e !== "Unknown", this.hasGpu && (this.rafSignal = requestAnimationFrame(() => this.render()));
}
getLog() {
return this.logTable;
}
async init() {
}
addVehicles(t) {
return new Promise((e) => {
if (this.isPaused) {
e();
return;
}
const i = t.map((r) => {
const s = this.getRenderVehicleTrack(r), { vehicleId: a, heading: l, localTimestamp: n } = s, c = Number(r.x), h = Number(r.y), o = new m({
geometry: {
type: "point",
x: c,
y: h
},
attributes: {
...s,
type: "trackVehicle"
},
symbol: this.hasGpu ? this.createCIMSymbol(s) : this.createMarkerSymbol()
});
return this.hasGpu && (o.visible = !1, this.historyPositionMap.set(a, [
{ pos: [c, h, 0], heading: l, time: n }
]), this.vehicleObjectMap.set(a, {
graphic: o,
data: s,
waitForDelete: !1,
isMoving: !1
})), o;
});
this.vehicleLayer.addMany(i), e();
});
}
updateVehicles(t) {
return new Promise((e) => {
if (this.isPaused) {
e();
return;
}
const i = [];
t.forEach((r) => {
const s = this.getRenderVehicleTrack(r), { vehicleId: a, heading: l, localTimestamp: n } = s, c = Number(r.x), h = Number(r.y);
if (this.hasGpu) {
const o = this.vehicleObjectMap.get(a);
o ? (o.data = s, o.graphic.attributes = {
...s,
type: "trackVehicle"
}, this.historyPositionMap.get(
a
).push({
pos: [c, h, 0],
heading: l,
time: n
})) : i.push(r);
} else {
const o = this.vehicleLayer.graphics.find(
(p) => p.getAttribute("vehicleId") == s.vehicleId
);
o ? o.geometry = {
type: "point",
x: c,
y: h
} : i.push(r);
}
}), this.addVehicles(i), e();
});
}
deleteVehicles(t) {
this.isPaused || (this.hasGpu ? t.forEach((e) => {
const i = this.vehicleObjectMap.get(e);
i && (i.waitForDelete = !0);
}) : t.forEach((e) => {
const i = this.vehicleLayer.graphics.find(
(r) => r.getAttribute("vehicleId") == e
);
i && this.vehicleLayer.remove(i);
}));
}
clearVehicles() {
this.vehicleLayer.removeAll(), this.vehicleObjectMap.clear(), this.historyPositionMap.clear(), this.sourceVehicleColorMap.clear(), this.simulatedVehicleColorMap.clear();
}
/**
* 设置地面车辆显示隐藏
* @param visible
*/
toggleGroundVehicle(t) {
this.showGroundVehicle = t;
}
/**
* 设置高架车辆显示隐藏
* @param visible
*/
toggleElevatedVehicle(t) {
this.showElevatedVehicle = t;
}
toggleTrafficInfo(t) {
t.name === "vehiclePlate" && (this.showVehiclePlate = t.visible);
}
togglePause(t) {
this.isPaused = t, this.isPaused && this.rafSignal ? cancelAnimationFrame(this.rafSignal) : this.rafSignal = requestAnimationFrame(() => this.render());
}
updatePanelContent(t) {
console.log(t);
}
setInterpolate(t) {
this.needInterpolate = t;
}
render() {
this.isPaused || this.vehicleObjectMap.forEach((t, e) => {
this.updatePosition(e);
}), this.rafSignal = requestAnimationFrame(() => this.render());
}
updatePosition(t) {
const e = this.historyPositionMap.get(t), i = this.vehicleObjectMap.get(t);
if (!e || !i || !i.isMoving && e.length <= 2)
return;
i.isMoving = !0, (i.graphic.getAttribute("roadLayer") || "1") === "1" ? i.graphic.visible = this.showGroundVehicle : i.graphic.visible = this.showElevatedVehicle, i.segmentStartTime || (i.segmentStartTime = Date.now(), i.segmentTotalTime = e[1].time - e[0].time);
const s = Date.now() - i.segmentStartTime, a = Math.min(
1,
s / i.segmentTotalTime
);
if (a === 1)
if (e.shift(), e.length === 1) {
i.waitForDelete ? (this.vehicleLayer.remove(i.graphic), this.vehicleObjectMap.delete(t), this.historyPositionMap.delete(t)) : (i.segmentStartTime = void 0, i.segmentTotalTime = void 0, i.graphic.visible = !1, i.isMoving = !1);
return;
} else {
i.segmentStartTime = Date.now();
const l = s - i.segmentTotalTime;
i.segmentTotalTime = e[1].time - e[0].time - l, Math.abs(e[1].heading - e[0].heading) > 180 && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), i.graphic.geometry = {
type: "point",
x: e[0].pos[0],
y: e[0].pos[1]
};
}
else {
const l = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, n = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, c = e[0].heading + (e[1].heading - e[0].heading) * a;
i.graphic.geometry = {
type: "point",
x: l,
y: n
}, i.data.heading = c, i.graphic.symbol = this.hasGpu ? this.createCIMSymbol(i.data) : this.createMarkerSymbol();
}
}
/**
* 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
* @param vehTrack
* @returns
*/
createCIMSymbol(t) {
const e = this.getPlateFontColor(t.plateColor);
return {
type: "cim",
data: {
type: "CIMSymbolReference",
primitiveOverrides: [
{
// 将textGraphic的TextString替换为graphic.attributes.showName
type: "CIMPrimitiveOverride",
primitiveName: "textGraphic",
propertyName: "TextString",
valueExpressionInfo: {
type: "CIMExpressionInfo",
title: "Custom",
expression: "$feature.showName",
returnType: "Default"
}
}
],
symbol: {
type: "CIMPointSymbol",
symbolLayers: [
// 车辆号牌
{
type: "CIMVectorMarker",
enable: this.showVehiclePlate,
size: 32,
colorLocked: !0,
anchorPointUnits: "Relative",
frame: { xmin: -8, ymin: -8, xmax: 8, ymax: 8 },
markerGraphics: [
{
type: "CIMMarkerGraphic",
primitiveName: "textGraphic",
geometry: { x: 0, y: 0 },
symbol: {
type: "CIMTextSymbol",
height: 4,
horizontalAlignment: "Center",
offsetX: 0,
offsetY: 8,
haloSize: 1,
haloSymbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: e.backgroundColor
}
]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: e.fillColor
}
]
},
verticalAlignment: "Center"
},
textString: ""
}
],
scaleSymbolsProportionally: !0,
respectFrame: !0
},
// 车辆图标
this.createVehicleMarkerLayer(t)
]
}
}
};
}
getRenderVehicleTrack(t) {
if (this.sourceVehicleColorMap.set(t.vehicleId, t.vehicleColor), !this.simulateVehicleColor || !this.vehicleObjectMap.has(t.vehicleId))
return t;
this.simulatedVehicleColorMap.has(t.vehicleId) || this.simulatedVehicleColorMap.set(
t.vehicleId,
this.getRandomSimulatedVehicleColor()
);
const i = this.simulatedVehicleColorMap.get(
t.vehicleId
);
return i === void 0 ? t : {
...t,
vehicleColor: i
};
}
createVehicleMarkerLayer(t) {
if (this.view.scale >= 1e3) {
const i = this.getVehiclePointColor(t.vehicleColor);
return {
type: "CIMVectorMarker",
enable: !0,
size: 18,
colorLocked: !0,
anchorPointUnits: "Relative",
frame: { xmin: -12, ymin: -12, xmax: 12, ymax: 12 },
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [this.createCircleRing(10)]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: [i[0], i[1], i[2], 48]
}
]
}
},
{
type: "CIMMarkerGraphic",
geometry: {
rings: [this.createCircleRing(7)]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: [i[0], i[1], i[2], 112]
}
]
}
},
{
type: "CIMMarkerGraphic",
geometry: {
rings: [this.createCircleRing(4)]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: i
},
{
type: "CIMSolidStroke",
enable: !0,
width: 0.8,
color: [255, 255, 255, 220]
}
]
}
}
],
scaleSymbolsProportionally: !0,
respectFrame: !0
};
}
const e = this.getCarPic(t.vehicleColor);
return {
type: "CIMPictureMarker",
enable: !0,
anchorPoint: {
x: 0,
y: 0
},
anchorPointUnits: "Relative",
size: e.size,
rotation: (t.heading + 90) % 360,
rotateClockwise: !0,
textureFilter: "Picture",
url: `${this.mapConfig.assetsRoot}Images/${e.pic}`
};
}
createMarkerSymbol() {
return {
type: "simple-marker",
color: "green",
size: 5,
outline: {
color: "white",
width: 1
}
};
}
/**
* 根据车身颜色属性返回对应的车辆图标
* @param carColor
* @returns
*/
getCarPic(t) {
let e = "grey";
switch (typeof t == "string" && (t = t.toLowerCase()), t) {
case "a":
case 1:
e = "white";
break;
case "b":
case 2:
e = "grey";
break;
case "c":
case 3:
e = "yellow";
break;
case "d":
case 4:
e = "pink";
break;
case "e":
case 5:
e = "red";
break;
case "f":
case 10:
e = "purple";
break;
case "g":
case 6:
e = "green";
break;
case "h":
case 7:
e = "blue";
break;
case "i":
case 8:
e = "brown";
break;
case "j":
case 9:
e = "black";
break;
}
return { pic: "/car/" + e + ".png", size: 20 };
}
getVehiclePointColor(t) {
switch (typeof t == "string" && (t = t.toLowerCase()), t) {
case "a":
case 1:
return [255, 255, 255, 255];
case "b":
case 2:
return [169, 169, 169, 255];
case "c":
case 3:
return [255, 215, 0, 255];
case "d":
case 4:
return [255, 105, 180, 255];
case "e":
case 5:
return [255, 69, 58, 255];
case "f":
case 10:
return [138, 43, 226, 255];
case "g":
case 6:
return [34, 197, 94, 255];
case "h":
case 7:
return [59, 130, 246, 255];
case "i":
case 8:
return [150, 111, 51, 255];
case "j":
case 9:
return [31, 41, 55, 255];
default:
return [169, 169, 169, 255];
}
}
createCircleRing(t, e = 24) {
const i = [];
for (let r = 0; r <= e; r++) {
const s = Math.PI * 2 * r / e;
i.push([
Number((Math.cos(s) * t).toFixed(2)),
Number((Math.sin(s) * t).toFixed(2))
]);
}
return i;
}
getRandomSimulatedVehicleColor() {
const t = Math.random();
return t < 0.06 ? 6 : t < 0.46 ? 7 : 3;
}
/**
* 根据号牌颜色属性获取填充色和背景色
* @param plateColor
* @returns
*/
getPlateFontColor(t) {
let e = [255, 255, 255, 255], i = [169, 169, 169, 255];
switch (t) {
case 0:
e = [0, 0, 0, 255], i = [255, 255, 255, 255];
break;
case 1:
e = [0, 0, 0, 255], i = [244, 164, 96, 255];
break;
case 2:
e = [255, 255, 255, 255], i = [65, 105, 225, 255];
break;
case 3:
e = [255, 255, 255, 255], i = [0, 0, 0, 255];
break;
case 15:
e = [244, 164, 96, 255], i = [0, 250, 154, 255];
break;
case 16:
e = [0, 0, 0, 255], i = [0, 250, 154, 255];
break;
}
return {
fillColor: e,
backgroundColor: i
};
}
}
export {
v as default
};