gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
374 lines (373 loc) • 12.4 kB
JavaScript
import * as y from "@arcgis/core/core/reactiveUtils.js";
import { Polyline as b } from "@arcgis/core/geometry";
import n from "@arcgis/core/Graphic";
import h from "@arcgis/core/layers/GraphicsLayer";
import m from "axios";
class w {
constructor(e) {
this.selectedNodeIds = [], this.nodeScale = 5e3, this.hasGpu = !1, this.hasGpu = localStorage.getItem("gpu") !== "Unknown", this.view = e, this.roadsectLayer = new h({
id: "roadsectLayer"
}), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new h({
id: "allNodesLayer"
}), this.view.map.add(this.allNodesLayer), this.bandLayer = new h({
id: "bandLayer"
}), this.view.map.add(this.bandLayer);
}
/**
* 新增绿波带
* @param params
*/
addGreenWaveBand(e) {
this.addNodeCallback = e.addCrossCallback, this.removeNodeCallback = e.removeCrossCallback, e.removeAllCrossCallback && (this.removeAllNodeCallback = e.removeAllCrossCallback), this.selectedNodeIds = [], this.openDriveServer = e.odrServer, this.showAllNodes(e.crossesInArea), this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", (i) => {
this.handleViewClick(i);
}));
}
stopAddGreenWaveBand() {
var e;
(e = this.viewClickWatcher) == null || e.remove(), this.viewClickWatcher = void 0, this.allNodesLayer.removeAll(), this.selectedNodeIds = [], this.roadsectLayer.removeAll(), this.bandLayer.removeAll();
}
async showGreenWaveBand(e) {
this.removeGreenWaveBand(e.bandId), this.scaleWatcher || (this.scaleWatcher = y.watch(
() => this.view.scale,
(s, o) => {
s > this.nodeScale && o <= this.nodeScale ? this.bandLayer.graphics.forEach((a) => {
a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("marker"));
}) : s <= this.nodeScale && o > this.nodeScale && this.bandLayer.graphics.forEach((a) => {
a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("picture"));
});
}
));
const i = new b({
paths: [e.coordinates]
}), t = new n({
geometry: i,
symbol: this.getLineSymbol(!0, e),
attributes: {
bandId: e.bandId,
type: "greenWaveBand",
id: e.bandId
}
});
this.roadsectLayer.add(t), await this.view.goTo(t), e.nodeList && e.nodeList.forEach((s) => {
const o = new n({
geometry: {
type: "point",
x: s.longitude,
y: s.latitude
},
symbol: this.getShowNodeSymbol("picture"),
attributes: {
...s,
bandId: e.bandId,
type: "greenWaveBandNode"
}
});
this.bandLayer.add(o);
});
}
removeGreenWaveBand(e) {
if (e) {
let i = this.bandLayer.graphics.filter(
(t) => t.getAttribute("bandId") === e
);
this.bandLayer.removeMany(i.toArray()), i = this.roadsectLayer.graphics.filter(
(t) => t.getAttribute("bandId") === e
), this.roadsectLayer.removeMany(i.toArray());
} else {
this.bandLayer.removeAll(), this.roadsectLayer.removeAll();
return;
}
}
/**
* 显示所有路口，进入待选状态
* @param nodeAttributes
*/
showAllNodes(e) {
const i = [];
e.forEach((t) => {
i.push(
new n({
geometry: {
type: "point",
x: t.longitude,
y: t.latitude
},
symbol: this.getEditableNodeSymbol(!1),
attributes: { ...t, selected: !1 }
})
);
}), this.allNodesLayer.addMany(i);
}
/**
* 点击待选/已选路口
* @param event
* @returns
*/
async handleViewClick(e) {
var a;
const t = (a = (await this.view.hitTest(e, {
include: [this.allNodesLayer]
})).results) == null ? void 0 : a.filter(
(d) => d.type === "graphic"
);
if (t.length === 0)
return;
const s = t[0].graphic, o = s.getAttribute("id");
if (this.selectedNodeIds.includes(o)) {
const d = this.selectedNodeIds.indexOf(o) + 1;
if (d === 1)
this.removeAllNodeCallback && this.removeAllNodeCallback(), this.selectedNodeIds = [], this.allNodesLayer.graphics.forEach((r) => {
r.setAttribute("selected", !1), r.symbol = this.getEditableNodeSymbol(!1), r.visible = !0;
}), this.roadsectLayer.removeAll();
else {
for (let r = d; r < this.selectedNodeIds.length; r++) {
this.removeNodeCallback && this.removeNodeCallback({
id: this.selectedNodeIds[r]
});
for (let l = 0; l < this.roadsectLayer.graphics.length; l++) {
const c = this.roadsectLayer.graphics.getItemAt(l);
(c.getAttribute("id") === this.selectedNodeIds[r] || !c.getAttribute("selected")) && (this.roadsectLayer.remove(c), l--);
}
}
this.selectedNodeIds = this.selectedNodeIds.slice(0, d), this.allNodesLayer.graphics.forEach((r) => {
const l = this.selectedNodeIds.includes(
r.getAttribute("id")
);
r.setAttribute("selected", l), r.symbol = this.getEditableNodeSymbol(l), r.visible = l;
}), await this.showDownstreamNodes(o);
}
} else {
s.setAttribute("selected", !0), s.symbol = this.getEditableNodeSymbol(!0), this.selectedNodeIds.push(o), this.allNodesLayer.graphics.forEach((r) => {
r.visible = r.getAttribute("selected");
});
let d = [];
for (let r = 0; r < this.roadsectLayer.graphics.length; r++) {
const l = this.roadsectLayer.graphics.getItemAt(r);
l.getAttribute("id") === o ? (l.symbol = this.getLineSymbol(!0), l.setAttribute("selected", !0), d = l.geometry.paths[0]) : l.getAttribute("selected") || (this.roadsectLayer.remove(l), r--);
}
this.addNodeCallback && this.addNodeCallback({
...s.attributes,
roadsect: d
}), await this.showDownstreamNodes(o);
}
}
/**
* 显示下游节点
* @param nodeId
*/
async showDownstreamNodes(e) {
this.view.container.style.cursor = "progress";
const i = await m.get(
`http://${this.openDriveServer}/api/computable/getDownstreamNodes`,
{ params: { nodeId: e } }
);
if (i.status !== 200 || i.data.status !== 0) {
this.view.container.style.cursor = "default";
return;
}
i.data.result.forEach((s) => {
this.allNodesLayer.graphics.forEach((o) => {
if (o.getAttribute("nodeId") === s.id && o.getAttribute("selected") === !1 && (o.visible = !0, s.coordinates)) {
const a = new n({
geometry: {
type: "polyline",
paths: [s.coordinates]
},
symbol: this.getLineSymbol(!1),
attributes: { ...s, selected: !1 }
});
this.roadsectLayer.add(a);
}
});
}), this.view.container.style.cursor = "default";
}
getLineSymbol(e, i) {
if (e) {
const t = (i == null ? void 0 : i.lineWidth) || 4, s = (i == null ? void 0 : i.lineColor) || [55, 125, 34, 255], o = (i == null ? void 0 : i.arrowColor) || [255, 255, 255, 255], d = ((i == null ? void 0 : i.arrowDirection) || "double") === "single" ? [
[
[t, -t],
[3 * t, 0],
[t, t]
]
] : [
[
[t, -t],
[3 * t, 0],
[t, t]
],
[
[-t, t],
[-3 * t, 0],
[-t, -t]
]
];
return Array.isArray(s) && s.length === 3 && s.push(255), Array.isArray(o) && o.length === 3 && o.push(255), {
type: "cim",
data: {
type: "CIMSymbolReference",
symbol: {
type: "CIMLineSymbol",
symbolLayers: [
{
type: "CIMVectorMarker",
enable: !0,
size: 4,
markerPlacement: {
type: "CIMMarkerPlacementAlongLineSameSize",
endings: "WithMarkers",
placementTemplate: [40],
angleToLine: !0
},
frame: {
xmin: -5,
ymin: -5,
xmax: 5,
ymax: 5
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
paths: d
},
symbol: {
type: "CIMLineSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: !0,
width: 1.5,
color: o
}
]
}
}
]
},
{
type: "CIMSolidStroke",
enable: !0,
width: t,
color: s
}
]
}
}
};
} else
return {
type: "simple-line",
color: "gray",
width: 2
};
}
getShowNodeSymbol(e) {
return e === "marker" ? {
type: "simple-marker",
style: "circle",
color: [61, 139, 249],
size: 8,
outline: {
color: "white",
width: 1
}
} : this.getEditableNodeSymbol(!0);
}
/**
* 编辑状态时的路口符号
* 全部用cim符号，是否选中用不同的图标
* @param selected 是否选中
* @returns
*/
getEditableNodeSymbol(e) {
return {
type: "cim",
data: {
type: "CIMSymbolReference",
primitiveOverrides: [
{
// 将textGraphic的TextString替换为graphic.attributes.name
type: "CIMPrimitiveOverride",
primitiveName: "textGraphic",
propertyName: "TextString",
valueExpressionInfo: {
type: "CIMExpressionInfo",
title: "Custom",
expression: 'Replace($feature.name, "与", "/") + " " + $feature.signalId',
returnType: "Default"
}
}
],
symbol: {
type: "CIMPointSymbol",
symbolLayers: [
// 路口名称
{
type: "CIMVectorMarker",
size: 30,
colorLocked: !0,
anchorPointUnits: "Relative",
frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
markerGraphics: [
{
type: "CIMMarkerGraphic",
primitiveName: "textGraphic",
geometry: { x: 0, y: 0 },
symbol: {
type: "CIMTextSymbol",
height: 12,
horizontalAlignment: "Center",
offsetX: 0,
offsetY: 20,
haloSize: 2,
haloSymbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: [255, 255, 255, 255]
}
]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: [0, 0, 0, 255]
}
]
},
verticalAlignment: "Center"
},
textString: ""
}
],
scaleSymbolsProportionally: !0,
respectFrame: !0
},
// 路口图标
{
type: "CIMPictureMarker",
enable: !0,
anchorPoint: {
x: 0,
y: 0
},
anchorPointUnits: "Relative",
size: 25,
rotateClockwise: !0,
textureFilter: "Picture",
url: `/GisViewerAssets/Images/cross/${e ? "gis_xhj_blue" : "gis_xhj_gray"}.png`
}
]
}
}
};
}
}
export {
w as default
};