gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
387 lines (386 loc) • 11.4 kB
JavaScript
import p from "@arcgis/core/Graphic";
import m from "@arcgis/core/layers/GraphicsLayer";
import { toRaw as g } from "vue";
import y from "../../stores/index.mjs";
class v {
constructor(i) {
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.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i, this.mapConfig = g(this.appDataStore.mapConfig), this.vehicleLayer = new m({
id: "vehicleLayer"
}), this.view.map.add(this.vehicleLayer);
const t = localStorage.getItem("gpu");
this.hasGpu = t !== "Unknown", this.hasGpu && (this.rafSignal = requestAnimationFrame(() => this.render()));
}
getLog() {
return this.logTable;
}
async init() {
}
addVehicles(i) {
return new Promise((t) => {
if (this.isPaused) {
t();
return;
}
const e = i.map((s) => {
const { vehicleId: r, heading: o, localTimestamp: l } = s, n = Number(s.x), h = Number(s.y), a = new p({
geometry: {
type: "point",
x: n,
y: h
},
attributes: {
...s,
type: "trackVehicle"
},
symbol: this.hasGpu ? this.createCIMSymbol(s) : this.createMarkerSymbol()
});
return this.hasGpu && (a.visible = !1, this.historyPositionMap.set(r, [
{ pos: [n, h, 0], heading: o, time: l }
]), this.vehicleObjectMap.set(r, {
graphic: a,
data: s,
waitForDelete: !1,
isMoving: !1
})), a;
});
this.vehicleLayer.addMany(e), t();
});
}
updateVehicles(i) {
return new Promise((t) => {
if (this.isPaused) {
t();
return;
}
const e = [];
i.forEach((s) => {
const { vehicleId: r, heading: o, localTimestamp: l } = s, n = Number(s.x), h = Number(s.y);
if (this.hasGpu) {
const a = this.vehicleObjectMap.get(r);
a ? (a.data = s, a.graphic.attributes = {
...s,
type: "trackVehicle"
}, this.historyPositionMap.get(
r
).push({
pos: [n, h, 0],
heading: o,
time: l
})) : e.push(s);
} else {
const a = this.vehicleLayer.graphics.find(
(c) => c.getAttribute("vehicleId") == s.vehicleId
);
a ? a.geometry = {
type: "point",
x: n,
y: h
} : e.push(s);
}
}), this.addVehicles(e), t();
});
}
deleteVehicles(i) {
this.isPaused || (this.hasGpu ? i.forEach((t) => {
const e = this.vehicleObjectMap.get(t);
e && (e.waitForDelete = !0);
}) : i.forEach((t) => {
const e = this.vehicleLayer.graphics.find(
(s) => s.getAttribute("vehicleId") == t
);
e && this.vehicleLayer.remove(e);
}));
}
clearVehicles() {
this.vehicleLayer.removeAll(), this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
}
/**
* 设置地面车辆显示隐藏
* @param visible
*/
toggleGroundVehicle(i) {
this.showGroundVehicle = i;
}
/**
* 设置高架车辆显示隐藏
* @param visible
*/
toggleElevatedVehicle(i) {
this.showElevatedVehicle = i;
}
toggleTrafficInfo(i) {
i.name === "vehiclePlate" && (this.showVehiclePlate = i.visible);
}
togglePause(i) {
this.isPaused = i, this.isPaused && this.rafSignal ? cancelAnimationFrame(this.rafSignal) : this.rafSignal = requestAnimationFrame(() => this.render());
}
updatePanelContent(i) {
console.log(i);
}
setInterpolate(i) {
this.needInterpolate = i;
}
render() {
this.isPaused || this.vehicleObjectMap.forEach((i, t) => {
this.updatePosition(t);
}), this.rafSignal = requestAnimationFrame(() => this.render());
}
updatePosition(i) {
const t = this.historyPositionMap.get(i), e = this.vehicleObjectMap.get(i);
if (!t || !e || !e.isMoving && t.length <= 2)
return;
e.isMoving = !0, (e.graphic.getAttribute("roadLayer") || "1") === "1" ? e.graphic.visible = this.showGroundVehicle : e.graphic.visible = this.showElevatedVehicle, e.segmentStartTime || (e.segmentStartTime = Date.now(), e.segmentTotalTime = t[1].time - t[0].time);
const r = Date.now() - e.segmentStartTime, o = Math.min(
1,
r / e.segmentTotalTime
);
if (o === 1)
if (t.shift(), t.length === 1) {
e.waitForDelete ? (this.vehicleLayer.remove(e.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (e.segmentStartTime = void 0, e.segmentTotalTime = void 0, e.graphic.visible = !1, e.isMoving = !1);
return;
} else {
e.segmentStartTime = Date.now();
const l = r - e.segmentTotalTime;
e.segmentTotalTime = t[1].time - t[0].time - l, Math.abs(t[1].heading - t[0].heading) > 180 && (t[1].heading > t[0].heading ? t[0].heading += 360 : t[1].heading += 360), e.graphic.geometry = {
type: "point",
x: t[0].pos[0],
y: t[0].pos[1]
};
}
else {
const l = t[0].pos[0] + (t[1].pos[0] - t[0].pos[0]) * o, n = t[0].pos[1] + (t[1].pos[1] - t[0].pos[1]) * o, h = t[0].heading + (t[1].heading - t[0].heading) * o;
e.graphic.geometry = {
type: "point",
x: l,
y: n
}, e.data.heading = h, e.graphic.symbol = this.hasGpu ? this.createCIMSymbol(e.data) : this.createMarkerSymbol();
}
}
/**
* 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
* @param vehTrack
* @returns
*/
createCIMSymbol(i) {
const t = this.getPlateFontColor(i.plateColor), e = this.getCarPic(i.vehicleColor, i.speed);
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: t.backgroundColor
}
]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: t.fillColor
}
]
},
verticalAlignment: "Center"
},
textString: ""
}
],
scaleSymbolsProportionally: !0,
respectFrame: !0
},
// 车辆图标
{
type: "CIMPictureMarker",
enable: !0,
anchorPoint: {
x: 0,
y: 0
},
anchorPointUnits: "Relative",
size: e.size,
rotation: i.heading,
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(i, t) {
if (this.view.scale >= 1e3) {
let e = "point_green.png";
return t && (t <= 4.2 ? e = "point_red.png" : t <= 8.4 ? e = "point_yellow.png" : e = "point_green.png"), {
pic: e,
size: 15
};
} else {
let e = "grey";
switch (typeof i == "string" && (i = i.toLowerCase()), i) {
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 };
}
}
/**
* 根据号牌颜色属性获取填充色和背景色
* @param plateColor
* @returns
*/
getPlateFontColor(i) {
let t = [255, 255, 255, 255], e = [169, 169, 169, 255];
switch (i) {
case 0:
t = [0, 0, 0, 255], e = [255, 255, 255, 255];
break;
case 1:
t = [0, 0, 0, 255], e = [244, 164, 96, 255];
break;
case 2:
t = [255, 255, 255, 255], e = [65, 105, 225, 255];
break;
case 3:
t = [255, 255, 255, 255], e = [0, 0, 0, 255];
break;
case 15:
t = [244, 164, 96, 255], e = [0, 250, 154, 255];
break;
case 16:
t = [0, 0, 0, 255], e = [0, 250, 154, 255];
break;
}
return {
fillColor: t,
backgroundColor: e
};
}
}
export {
v as default
};