gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
343 lines (342 loc) • 11.3 kB
JavaScript
import * as y from "@arcgis/core/core/reactiveUtils.js";
import { Polyline as m } from "@arcgis/core/geometry";
import c from "@arcgis/core/Graphic";
import n from "@arcgis/core/layers/GraphicsLayer";
import b 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 n({
id: "roadsectLayer"
}), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new n({
id: "allNodesLayer"
}), this.view.map.add(this.allNodesLayer), this.bandLayer = new n({
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", (o) => {
this.handleViewClick(o);
}));
}
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.scaleWatcher || (this.scaleWatcher = y.watch(
() => this.view.scale,
(s, i) => {
s > this.nodeScale && i <= this.nodeScale ? this.bandLayer.graphics.forEach((l) => {
l.geometry.type === "point" && (l.symbol = this.getShowNodeSymbol("marker"));
}) : s <= this.nodeScale && i > this.nodeScale && this.bandLayer.graphics.forEach((l) => {
l.geometry.type === "point" && (l.symbol = this.getShowNodeSymbol("picture"));
});
}
));
const o = new m({
paths: [e.coordinates]
}), a = new c({
geometry: o,
symbol: this.getLineSymbol(!0),
attributes: { bandId: e.bandId }
});
this.roadsectLayer.add(a), await this.view.goTo(a), e.nodeList.forEach((s) => {
const i = new c({
geometry: {
type: "point",
x: s.longitude,
y: s.latitude
},
symbol: this.getShowNodeSymbol("picture"),
attributes: s
});
this.bandLayer.add(i);
});
}
/**
* 显示所有路口，进入待选状态
* @param nodeAttributes
*/
showAllNodes(e) {
const o = [];
e.forEach((a) => {
o.push(
new c({
geometry: {
type: "point",
x: a.longitude,
y: a.latitude
},
symbol: this.getEditableNodeSymbol(!1),
attributes: { ...a, selected: !1 }
})
);
}), this.allNodesLayer.addMany(o);
}
/**
* 点击待选/已选路口
* @param event
* @returns
*/
async handleViewClick(e) {
var l;
const a = (l = (await this.view.hitTest(e, {
include: [this.allNodesLayer]
})).results) == null ? void 0 : l.filter(
(d) => d.type === "graphic"
);
if (a.length === 0)
return;
const s = a[0].graphic, i = s.getAttribute("id");
if (this.selectedNodeIds.includes(i)) {
const d = this.selectedNodeIds.indexOf(i) + 1;
if (d === 1)
this.removeAllNodeCallback && this.removeAllNodeCallback(), this.selectedNodeIds = [], this.allNodesLayer.graphics.forEach((t) => {
t.setAttribute("selected", !1), t.symbol = this.getEditableNodeSymbol(!1), t.visible = !0;
}), this.roadsectLayer.removeAll();
else {
for (let t = d; t < this.selectedNodeIds.length; t++) {
this.removeNodeCallback && this.removeNodeCallback({
id: this.selectedNodeIds[t]
});
for (let r = 0; r < this.roadsectLayer.graphics.length; r++) {
const h = this.roadsectLayer.graphics.getItemAt(r);
(h.getAttribute("id") === this.selectedNodeIds[t] || !h.getAttribute("selected")) && (this.roadsectLayer.remove(h), r--);
}
}
this.selectedNodeIds = this.selectedNodeIds.slice(0, d), this.allNodesLayer.graphics.forEach((t) => {
const r = this.selectedNodeIds.includes(
t.getAttribute("id")
);
t.setAttribute("selected", r), t.symbol = this.getEditableNodeSymbol(r), t.visible = r;
}), await this.showDownstreamNodes(i);
}
} else {
s.setAttribute("selected", !0), s.symbol = this.getEditableNodeSymbol(!0), this.selectedNodeIds.push(i), this.allNodesLayer.graphics.forEach((t) => {
t.visible = t.getAttribute("selected");
});
let d = [];
for (let t = 0; t < this.roadsectLayer.graphics.length; t++) {
const r = this.roadsectLayer.graphics.getItemAt(t);
r.getAttribute("id") === i ? (r.symbol = this.getLineSymbol(!0), r.setAttribute("selected", !0), d = r.geometry.paths[0]) : r.getAttribute("selected") || (this.roadsectLayer.remove(r), t--);
}
this.addNodeCallback && this.addNodeCallback({
...s.attributes,
roadsect: d
}), await this.showDownstreamNodes(i);
}
}
/**
* 显示下游节点
* @param nodeId
*/
async showDownstreamNodes(e) {
this.view.container.style.cursor = "progress";
const o = await b.get(
`http://${this.openDriveServer}/api/computable/getDownstreamNodes`,
{ params: { nodeId: e } }
);
if (o.status !== 200 || o.data.status !== 0) {
this.view.container.style.cursor = "default";
return;
}
o.data.result.forEach((s) => {
this.allNodesLayer.graphics.forEach((i) => {
if (i.getAttribute("nodeId") === s.id && i.getAttribute("selected") === !1 && (i.visible = !0, s.coordinates)) {
const l = new c({
geometry: {
type: "polyline",
paths: [s.coordinates]
},
symbol: this.getLineSymbol(!1),
attributes: { ...s, selected: !1 }
});
this.roadsectLayer.add(l);
}
});
}), this.view.container.style.cursor = "default";
}
getLineSymbol(e) {
return e ? {
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: [
[
[4, -4],
[12, 0],
[4, 4]
],
[
[-4, 4],
[-12, 0],
[-4, -4]
]
]
},
symbol: {
type: "CIMLineSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: !0,
width: 1.5,
color: [255, 255, 255, 255]
}
]
}
}
]
},
{
type: "CIMSolidStroke",
enable: !0,
width: 4,
color: [55, 125, 34, 255]
}
]
}
}
} : {
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
};