gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
199 lines (198 loc) • 7.05 kB
JavaScript
import { createEmpty as x, extend as N, isEmpty as D } from "ol/extent";
import w from "ol/Feature";
import { LineString as z, Point as _ } from "ol/geom";
import E from "ol/layer/Vector";
import k from "ol/source/Vector";
import I from "ol/style/Circle";
import u from "ol/style/Fill";
import b from "ol/style/Icon";
import c from "ol/style/Stroke";
import l from "ol/style/Style";
import F from "ol/style/Text";
import { toRaw as L } from "vue";
import C from "../../../stores/index.mjs";
const M = 17, O = "/GisViewerAssets/Images/cross/gis_xhj_blue.png", R = "/GisViewerAssets/Images/cross/gis_xhj_gray.png", d = "#1677ff";
class q {
constructor(t) {
this.initialized = !1, this.roadsectShapeMap = /* @__PURE__ */ new Map(), this.highlightedSubareaId = null, this.lineStyleCache = /* @__PURE__ */ new Map(), this.nodeDotStyleCache = /* @__PURE__ */ new Map(), this.nodeIconStyle = new l({
image: new b({
src: O,
scale: 0.5,
anchor: [0.5, 1]
}),
zIndex: 1
}), this.grayLineStyle = new l({
stroke: new c({ color: "rgba(180, 180, 180, 0.8)", width: 3 }),
zIndex: 0
}), this.grayNodeDotStyle = new l({
image: new I({
radius: 5,
fill: new u({ color: "rgba(180, 180, 180, 0.8)" }),
stroke: new c({ color: "#ffffff", width: 2 })
}),
zIndex: 1
}), this.grayNodeIconStyle = new l({
image: new b({
src: R,
scale: 0.5,
anchor: [0.5, 1]
}),
zIndex: 1
}), this.nodeLabelStyleCache = /* @__PURE__ */ new Map(), this.map = t;
const e = C.useAppDataStore;
L(
e.olMapInitializer
).subscribeClick(
(i, n, o) => this.mapClick(i, o),
{ triggerOnBlankClick: !0 }
), this.source = new k(), this.signalSystemLayer = new E({ source: this.source }), this.signalSystemLayer.set("id", "signal-system-no-shape-layer"), this.map.addLayer(this.signalSystemLayer), this.configureLayerStyle();
}
getLineStyle(t) {
let e = this.lineStyleCache.get(t);
return e || (e = new l({
stroke: new c({ color: t, width: 3 }),
zIndex: 0
}), this.lineStyleCache.set(t, e)), e;
}
getNodeDotStyle(t) {
let e = this.nodeDotStyleCache.get(t);
return e || (e = new l({
image: new I({
radius: 5,
fill: new u({ color: t }),
stroke: new c({ color: "#ffffff", width: 2 })
}),
zIndex: 1
}), this.nodeDotStyleCache.set(t, e)), e;
}
configureLayerStyle() {
const t = this.map.getView().getResolutionForZoom(M);
this.signalSystemLayer.setStyle((e, s) => {
if (e.get("type") !== "signal-system-no-shape-node")
return;
const i = this.highlightedSubareaId !== null && e.get("subareaId") !== this.highlightedSubareaId, n = e.get("color") || d;
return s <= t ? [
i ? this.grayNodeIconStyle : this.nodeIconStyle,
this.getNodeLabelStyle(e.get("nodeName"), i)
] : i ? this.grayNodeDotStyle : this.getNodeDotStyle(n);
});
}
getNodeLabelStyle(t, e) {
const s = `${e}_${t}`, i = this.nodeLabelStyleCache.get(s);
if (i)
return i;
const n = new l({
text: new F({
text: t || "",
font: '12px "Microsoft YaHei"',
textAlign: "center",
textBaseline: "bottom",
offsetY: -25,
fill: new u({ color: e ? "#8c8c8c" : "#1f2937" }),
stroke: new c({ color: "#ffffff", width: 3 })
}),
zIndex: 2
});
return this.nodeLabelStyleCache.set(s, n), n;
}
mapClick(t, e) {
if (t === "map-blank") {
this.resetHighlight();
return;
}
if (t !== "signal-system-no-shape-road" && t !== "signal-system-no-shape-node")
return;
const s = e == null ? void 0 : e.subareaId;
s && (this.highlightSubarea(s), this.focusSubarea(s));
}
highlightSubarea(t) {
this.highlightedSubareaId = t, this.source.getFeatures().forEach((e) => {
e.get("type") === "signal-system-no-shape-road" && e.setStyle(
e.get("subareaId") === t ? this.getLineStyle(e.get("color") || d) : this.grayLineStyle
);
}), this.signalSystemLayer.changed();
}
resetHighlight() {
this.highlightedSubareaId = null, this.source.getFeatures().forEach((t) => {
t.get("type") === "signal-system-no-shape-road" && t.setStyle(
this.getLineStyle(t.get("color") || d)
);
}), this.signalSystemLayer.changed();
}
focusSubarea(t) {
const e = x();
this.source.getFeatures().forEach((s) => {
if (s.get("subareaId") !== t)
return;
const i = s.getGeometry();
i && N(e, i.getExtent());
}), !D(e) && this.map.getView().fit(e, {
padding: [0, 0, 0, 0],
duration: 350
});
}
async initialize() {
var o;
const t = C.useAppDataStore, s = (o = L(t.mapConfig).signalSystem) == null ? void 0 : o.roadsectLayer;
if (!s) {
console.log(
"No roadsect layer URL found in mapConfig.roadsectIndex. Initialization aborted."
);
return;
}
(await (await fetch(s)).json()).features.forEach((r) => {
const y = r.properties.id, a = r.geometry.coordinates;
this.roadsectShapeMap.set(y, a);
});
}
async showSubSignalSystemNoShape(t) {
var n;
this.initialized || (await this.initialize(), this.initialized = !0), this.source.clear(), this.highlightedSubareaId = null;
const e = /* @__PURE__ */ new Set(), s = [], i = [];
t.subAreas.forEach((o) => {
const r = o.nodeVOList, y = o.color || d;
for (let a = 0; a < r.length - 1; a += 1)
for (let h = a + 1; h < r.length; h += 1) {
const f = r[a].nodeId, m = r[h].nodeId;
[
`${f}_${m}`,
`${m}_${f}`
].forEach((g) => {
const S = this.roadsectShapeMap.get(g);
if (!S || S.length < 2 || e.has(g))
return;
e.add(g);
const p = new w({
geometry: new z(S),
subareaId: o.subareaId,
roadsectId: g,
type: "signal-system-no-shape-road",
color: o.color
});
p.setStyle(this.getLineStyle(y)), s.push(p);
});
}
r.forEach((a) => {
const h = new w({
...a,
geometry: new _([a.longitude, a.latitude]),
subareaId: o.subareaId,
type: "signal-system-no-shape-node",
color: o.color
});
i.push(h);
});
}), this.source.addFeatures(s), this.source.addFeatures(i), (n = t.options) != null && n.needZoom && this.source.getFeatures().length > 0 && this.map.getView().fit(this.source.getExtent(), {
padding: [10, 10, 10, 10]
});
}
clearSignalSystemNoShape() {
this.source.clear(), this.highlightedSubareaId = null, this.nodeLabelStyleCache.clear(), this.lineStyleCache.clear(), this.nodeDotStyleCache.clear(), this.signalSystemLayer.changed();
}
highlightSubSignalSystemNoShape(t) {
this.highlightSubarea(t), this.focusSubarea(t);
}
}
export {
q as default
};