gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
336 lines (335 loc) • 9.92 kB
JavaScript
import u from "@arcgis/core/Graphic";
import { Point as p } from "@arcgis/core/geometry";
import d from "@arcgis/core/layers/GraphicsLayer";
import y from "../stores/index.mjs";
import m from "./common-utils.mjs";
class S {
constructor(i) {
this.maxMissCount = 2, this.objectMissCount = /* @__PURE__ */ new Map(), this.showVehiclePlate = !0, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.showLog = !1, this.focusVehNo = "", this.view = i;
const t = y.useAppDataStore;
this.mapConfig = JSON.parse(JSON.stringify(t.mapConfig)), this.objectsLayer = new d(), this.view.map.add(this.objectsLayer);
}
/**
* 开始显示交通流数据
* @param url
* @param options
*/
connectTrafficFlow(i, t) {
var e;
this.showVehiclePlate = (t == null ? void 0 : t.showVehiclePlate) !== !1, this.showLog = (t == null ? void 0 : t.showTraceLog) === !0, (e = this.webSocket) == null || e.close(), this.webSocket = new WebSocket(i), this.webSocket.onopen = () => {
console.log("websocket连接成功"), this.objectMissCount.clear();
}, this.webSocket.onclose = () => {
console.log("websocket连接关闭");
}, this.webSocket.onmessage = (o) => {
this.handleTrafficFlowData(o.data);
};
}
/**
* 停止显示交通流数据
*/
disconnectTrafficFlow() {
var i;
(i = this.webSocket) == null || i.close(), this.objectsLayer.removeAll(), this.objectMissCount.clear();
}
/**
* 切换交通信息可见性
* @param params
*/
toggleTrafficInfo(i) {
switch (i.name.toLowerCase()) {
case "vehiclePlate".toLowerCase():
this.showVehiclePlate = i.visible;
break;
}
}
/**
* 切换交通对象可见性
* @param params
*/
toggleTrafficObject(i) {
switch (i.name.toLowerCase()) {
case "groundVehicle".toLowerCase():
this.showGroundVehicle = i.visible;
break;
case "elevatedVehicle".toLowerCase():
this.showElevatedVehicle = i.visible;
break;
}
}
handleTrafficFlowData(i) {
const t = m.unzip(i);
if (!t)
return;
const e = [], o = [], n = [], c = JSON.parse(t);
this.showLog && console.log(c);
const s = c.data || c.rtPositionList;
if (!s || s.length === 0)
return;
const b = new Date(c.jgsj).getTime();
for (const a of s) {
const r = this.buildVehicleTrackData(a, b);
r && (this.objectMissCount.has(r.ptcId) ? e.push(r) : o.push(r), this.objectMissCount.set(r.ptcId, 0));
}
for (const a of this.objectMissCount) {
const r = a[0];
let l = a[1];
s.findIndex((f) => f.vehno === r) < 0 && (l++, this.objectMissCount.set(r, l), l === this.maxMissCount && n.push(r));
}
for (const a of n)
this.objectMissCount.delete(a);
this.addTrafficObjects(o), this.updateTrafficObjects(e), this.deleteTrafficObjects(n);
}
/**
* 新增交通对象
* @param objects
*/
addTrafficObjects(i) {
const t = i.map(
(e) => new u({
geometry: new p({ longitude: e.x, latitude: e.y }),
symbol: this.createCIMSymbol(e),
attributes: e,
visible: this.getVehicleVisibility(e)
})
);
this.objectsLayer.addMany(t);
}
getVehicleVisibility(i) {
return i.roadLayer === "1" ? this.showGroundVehicle : i.roadLayer === "2" || i.roadLayer === "3" ? this.showElevatedVehicle : !0;
}
/**
* 更新交通对象
* @param objects
*/
updateTrafficObjects(i) {
i.forEach((t) => {
const e = this.objectsLayer.graphics.find(
(o) => o.getAttribute("ptcId") === t.ptcId
);
e && (e.geometry = new p({
longitude: t.x,
latitude: t.y
}), e.symbol = this.createCIMSymbol(t), e.visible = this.getVehicleVisibility(t));
});
}
/**
* 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
* @param vehTrack
* @returns
*/
createCIMSymbol(i) {
const t = this.getPlateFontColor(i.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: 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: 15,
rotation: i.heading,
rotateClockwise: !0,
textureFilter: "Picture",
url: `${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(i.vehicleColor).pic}`
}
]
}
}
};
}
/**
* 删除交通对象
* @param ids
*/
deleteTrafficObjects(i) {
i.forEach((t) => {
const e = this.objectsLayer.graphics.find(
(o) => o.getAttribute("ptcId") === t
);
e && this.objectsLayer.remove(e);
});
}
buildVehicleTrackData(i, t) {
const { hpys: e, csys: o, lng: n, angle: c, hphm: s, lat: b, cx: a, roadLayer: r } = i, l = i.vehno || i.vehNo;
if (!l)
return;
let h;
if (s && s !== "0" && s !== 0 ? h = s.includes("-") ? s.split("-")[1] : s : h = l.includes("-") ? l.split("-")[1] : l, !["1", "2", "3", "4", "5", "6", 1, 2, 3, 4, 5, 6].includes(a)) {
console.log("车辆类型错误", a);
return;
}
return {
vehicleId: l,
ptcId: l,
timestamp: t,
localTimestamp: t,
x: n,
y: b,
ptcType: Number(a),
heading: c,
vehicleColor: o || "z",
plateColor: s ? e : "99",
showName: h,
vehicleType: 99,
roadLayer: r || "1"
};
}
/**
* 根据车身颜色属性返回对应的车辆图标
* @param carColor
* @returns
*/
getCarPic(i) {
let t = 0;
if (this.view.type === "3d" ? t = this.view.zoom : t = this.view.zoom, t <= 17)
return {
pic: "point.png",
color: [128, 128, 128, 255]
};
{
let e = "grey", o = [128, 128, 128, 255];
switch (i.toLowerCase()) {
case "a":
e = "white", o = [200, 200, 200, 255];
break;
case "b":
e = "grey", o = [128, 128, 128, 255];
break;
case "c":
e = "yellow", o = [255, 215, 0, 255];
break;
case "d":
e = "pink", o = [255, 182, 193, 255];
break;
case "e":
e = "red", o = [255, 0, 0, 255];
break;
case "f":
e = "purple", o = [128, 0, 128, 255];
break;
case "g":
e = "green", o = [124, 252, 0, 255];
break;
case "h":
e = "blue", o = [0, 191, 255, 255];
break;
case "i":
e = "brown", o = [244, 164, 96, 255];
break;
case "j":
e = "black", o = [0, 0, 0, 255];
break;
}
return {
pic: e + ".png",
color: o
};
}
}
/**
* 根据号牌颜色属性获取填充色和背景色
* @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 {
S as default
};