gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
551 lines (550 loc) • 16.8 kB
JavaScript
import n from "@arcgis/core/Graphic";
import u from "@arcgis/core/layers/GraphicsLayer";
import g from "@turf/buffer";
import p from "@turf/convex";
import * as a from "@turf/helpers";
import h from "axios";
import b from "concaveman";
import f from "../../../stores/index.mjs";
class L {
constructor(e) {
var i;
this.crossScale = 5e3, this.hasGpu = !1, this.crossIdsInDistrict = [], this.view = e, this.hasGpu = localStorage.getItem("gpu") !== "Unknown";
const r = f.useAppDataStore.mapConfig;
this.openDriveServer = (i = r.openDriveServer) == null ? void 0 : i.url, this.districtControllerLayer = new u({
id: "districtControllerLayer"
}), this.subDistrictControllerLayer = new u({
id: "subDistrictControllerLayer"
}), this.crossLayer = new u({
id: "crossLayer"
}), this.view.map.addMany([
this.districtControllerLayer,
this.subDistrictControllerLayer,
this.crossLayer
]);
}
/**
* 显示单个子区
* @param params
* @returns
*/
showSubSignalControlArea(e) {
this.crossLayer.removeAll(), this.crossLayer.visible = !0;
const r = e.children.map((i) => {
const s = { ...i, selected: !0 };
return new n({
geometry: {
type: "point",
x: i.longitude,
y: i.latitude
},
symbol: this.getCrossSymbolInSubDistrict(s),
attributes: s
});
});
return this.crossLayer.addMany(r), this.view.goTo(r, {
duration: this.hasGpu ? 1e3 : 0
}), { status: 0, message: "ok" };
}
/**
* 点击路口时
* @param event
* @returns
*/
async handleViewClick(e) {
var s;
const r = (s = (await this.view.hitTest(e, {
include: [this.crossLayer]
})).results) == null ? void 0 : s.filter(
(o) => o.type === "graphic"
);
if (r.length === 0)
return;
const i = r[0].graphic;
i.getAttribute("selected") ? i.getAttribute("signalId") && (this.removeCrossCallback && this.removeCrossCallback({ id: i.getAttribute("id") }), i.setAttribute("selected", !1), i.symbol = this.getCrossSymbolInSubDistrict(
i.attributes
)) : (i.getAttribute("signalId") && (this.addCrossCallback && this.addCrossCallback(i.attributes), i.setAttribute("selected", !0), i.symbol = this.getCrossSymbolInSubDistrict(
i.attributes
)), await this.showNearbyCrosses(i.getAttribute("id")));
}
/**
* 显示周边的路口
* @param crossIds
* @returns
*/
async showNearbyCrosses(e) {
const t = await h.get(
`http://${this.openDriveServer}/api/computable/getRelatedNodesForNode`,
{ params: { nodeIds: e } }
);
if (t.status === 200)
if (t.data.status === 0) {
const r = t.data.result, i = [];
for (const s of r) {
const o = s.nodeId;
if (o.startsWith("-"))
continue;
if (s.signalId && !this.crossIdsInDistrict.includes(o)) {
console.log("不是此区控内的路口", o);
continue;
}
if (this.crossLayer.graphics.some(
(c) => c.getAttribute("id") === o
))
continue;
const m = new n({
geometry: {
type: "point",
x: s.lon,
y: s.lat
},
symbol: this.getCrossSymbolInSubDistrict(s),
attributes: {
id: o,
name: s.name,
signalId: s.signalId,
selected: !1
}
});
i.push(m);
}
return this.crossLayer.addMany(i), { status: 0, message: "ok" };
} else
return { status: -1, message: t.data.message };
else
return { status: -1, message: "请求失败" };
}
/**
* 编辑子区的路口
* @returns
*/
async editSubSignalControlArea(e) {
if (e.odrServer) {
this.openDriveServer = e.odrServer, this.crossIdsInDistrict = e.crossesInArea.map((s) => s.id);
const t = a.featureCollection(
e.crossesInArea.map(
(s) => a.point([s.longitude, s.latitude])
)
), r = p(t);
r && (this.districtControllerLayer.removeAll(), this.districtControllerLayer.add(
new n({
geometry: {
type: "polygon",
rings: r.geometry.coordinates
},
symbol: {
type: "simple-fill",
style: "none",
outline: {
color: [61, 139, 249],
width: 3,
style: "long-dash"
}
}
})
)), this.addCrossCallback = e.addCrossCallback, this.removeCrossCallback = e.removeCrossCallback, this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", async (s) => {
await this.handleViewClick(s);
}));
const i = this.crossLayer.graphics.toArray().map((s) => s.getAttribute("id")).join(",");
return await this.showNearbyCrosses(i);
} else
return { status: 1, message: "未配置OpenDriveServer" };
}
stopEditSubSignalControlArea() {
var t;
(t = this.viewClickWatcher) == null || t.remove(), this.viewClickWatcher = void 0;
const e = this.crossLayer.graphics.filter(
(r) => r.getAttribute("signalId") === "" || !r.getAttribute("signalId") || !r.getAttribute("selected")
);
this.crossLayer.removeMany(e.toArray()), this.districtControllerLayer.removeAll();
}
/**
* 从外部接口选中一个路口
* @param id
*/
selectSubSignalControlAreaCross(e) {
return this.crossLayer.graphics.forEach((t) => {
if (t.getAttribute("id") === e && !t.getAttribute("selected"))
return t.setAttribute("selected", !0), t.symbol = this.getCrossSymbolInSubDistrict(
t.attributes
), { status: 0, message: "ok" };
}), { status: 0, message: "未找到" };
}
/**
* 从外部接口取消选中一个路口
* @param id
*/
unselectSubSignalControlAreaCross(e) {
return this.crossLayer.graphics.forEach((t) => {
if (t.getAttribute("id") === e && t.getAttribute("selected"))
return t.setAttribute("selected", !1), t.symbol = this.getCrossSymbolInSubDistrict(
t.attributes
), { status: 0, message: "ok" };
}), { status: 0, message: "未找到" };
}
/**
* 在区控\子区\路口图层中查找对应的graphic
* @param id
* @returns
*/
findAreaGraphic(e) {
let t = this.districtControllerLayer.graphics.find(
(r) => r.attributes.id === e
);
return t || (t = this.subDistrictControllerLayer.graphics.find(
(r) => r.attributes.id === e
)), t || (t = this.crossLayer.graphics.find((r) => r.attributes.id === e)), t;
}
/**
* 绘制区控与子区
* @param districtController
* @param isDistrict 是否是区控
* @returns
*/
drawArea(e, t) {
const r = e.getAllSignalCoordinates();
if (r.length >= 2) {
let s = null;
if (r.length === 2)
s = a.lineString(r);
else {
if (t) {
const y = a.featureCollection(
r.map((d) => a.point(d))
);
s = p(y);
} else {
const y = b(r, 0.5);
y.length >= 4 && (s = a.polygon([y]));
}
s || (s = a.lineString(r));
}
const o = g(
s.geometry,
// 区控面积更大，需要更大的缓冲半径
t ? 200 : 30,
{
units: "meters"
}
);
let l;
t ? l = [
{
fieldName: "id",
label: "区控编号"
},
{
fieldName: "crossCount",
label: "路口数量"
},
{
fieldName: "subDistrictCount",
label: "子区数量"
}
] : l = [
{
fieldName: "parentName",
label: "所属区控"
},
{
fieldName: "crossCount",
label: "路口数量"
}
];
const m = {
type: "signalControlArea",
id: e.id,
name: e.name,
parentId: e.parentId,
parentName: e.parentName,
crossCount: e.signalCount,
subDistrictCount: e.subDistrictCount
}, c = new n({
geometry: {
type: "polygon",
rings: o.geometry.coordinates
},
symbol: {
type: "simple-fill",
style: "none",
// color: [...districtController.areaColor, 0.3],
outline: {
color: t ? [111, 100, 255] : [5, 196, 104],
width: 3,
style: t ? "long-dash" : "solid"
}
},
attributes: m,
popupTemplate: {
title: `${e.name}`,
content: [
{
type: "fields",
fieldInfos: l
}
]
}
});
t ? this.districtControllerLayer.add(c) : this.subDistrictControllerLayer.add(c);
}
for (const s of e.subDistricts)
this.drawArea(s, !1);
const i = [];
e.signals.forEach((s) => {
const o = {
type: "cross",
id: s.id,
name: s.name,
signalId: s.signalId,
nodeId: s.nodeId,
districtId: t ? e.id : e.parentId,
districtName: t ? e.name : e.parentName,
subDistrictId: t ? "" : e.id,
subDistrictName: t ? "" : e.name,
isKey: s.isKey
}, l = new n({
geometry: {
type: "point",
x: s.longitude,
y: s.latitude
},
symbol: this.getCrossGraphicSymbol(o, "marker"),
attributes: o,
popupTemplate: {
title: s.name,
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "districtName",
label: "区控名称"
},
{
fieldName: "subDistrictName",
label: "子区名称"
},
{
fieldName: "signalId",
label: "信号机编号"
},
{
fieldName: "nodeId",
label: "路口编号"
}
]
}
]
}
});
i.push(l);
}), this.crossLayer.addMany(i);
}
/**
* 显示子区时路口的样式
* @param attributes
* @returns
*/
getCrossSymbolInSubDistrict(e) {
return e.signalId && e.signalId !== "" ? {
type: "cim",
data: {
type: "CIMSymbolReference",
primitiveOverrides: [
{
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: 32,
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: 1,
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: 30,
rotateClockwise: !0,
textureFilter: "Picture",
url: `/GisViewerAssets/Images/cross/${e.selected ? "gis_xhj_blue" : "gis_xhj_gray"}.png`
}
]
}
}
} : {
type: "picture-marker",
url: "/GisViewerAssets/Images/cross/gis_lkcz.png",
width: "20px",
height: "20px"
};
}
/**
* 生成路口点符号。在不同比例尺下，使用不同的符号
* @param attributes
* @param symbolType
* @returns
*/
getCrossGraphicSymbol(e, t) {
const r = e.isKey;
if (t === "marker")
return {
type: "simple-marker",
style: "circle",
color: r ? [254, 172, 22] : [5, 116, 255],
size: r ? 12 : 8,
outline: {
color: "white",
width: 1
}
};
if (t === "picture")
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: 32,
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: r ? 30 : 15,
haloSize: 1,
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: r ? 40 : 20,
rotateClockwise: !0,
textureFilter: "Picture",
url: `/GisViewerAssets/Images/cross/${r ? "gis_gjxklk_orange" : "gis_xhj_blue"}.png`
}
]
}
}
};
}
}
export {
L as default
};