gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
279 lines (278 loc) • 10.3 kB
JavaScript
import * as b from "@arcgis/core/core/reactiveUtils.js";
import u from "@arcgis/core/Graphic";
import n from "@arcgis/core/layers/GraphicsLayer";
import { toRaw as y } from "vue";
import v from "../../stores/index.mjs";
class C {
constructor(e) {
this.clusterScaleThreshold = 1, this.watchHandle = null, this.currentShowParams = null, this.isCameraVisible = !1, this.isKkVisible = !1, this.esServer = "", this.clusterEnabled = {
cameraNormal: !1,
cameraAbnormal: !1,
kkNormal: !1,
kkAbnormal: !1
}, this.view = e;
const t = v.useAppDataStore;
this.mapInitializer = y(t.mapInitializer);
const i = y(t.mapConfig);
this.esServer = (i == null ? void 0 : i.esServer) || "", this.cameraNormalLayer = new n({
id: "cameraNormalLayer",
visible: !1
}), this.cameraAbnormalLayer = new n({
id: "cameraAbnormalLayer",
visible: !1
}), this.kkNormalLayer = new n({
id: "kkNormalLayer",
visible: !1
}), this.kkAbnormalLayer = new n({
id: "kkAbnormalLayer",
visible: !1
}), this.view.map.addMany([
this.cameraNormalLayer,
this.cameraAbnormalLayer,
this.kkNormalLayer,
this.kkAbnormalLayer
]);
}
async setEdpassLayerVisibility(e) {
return this.currentShowParams = {
...this.currentShowParams ?? {},
...e
}, e.deviceType !== "camera" && e.deviceType !== "kk" ? { status: -1, message: "不支持的设备类型" } : (e.deviceType === "camera" && (this.isCameraVisible = e.visible), e.deviceType === "kk" && (this.isKkVisible = e.visible), this.updateClusterEnabled(e), (e.style ?? this.getAutoStyleByScale()) === "cluster" || e.style == null ? this.ensureStationaryWatch() : this.tryRemoveWatchIfNoVisible(), this.applyClusterMode(), { status: 0, message: "Success" });
}
/**
* 控制散点图层显示隐藏
* @param visible
*/
showScatter(e) {
const t = e ?? this.isCameraVisible, i = e ?? this.isKkVisible;
this.mapInitializer.setLayerVisibility({
id: "camera-normal",
visible: t
}), this.mapInitializer.setLayerVisibility({
id: "camera-abnormal",
visible: t
}), this.mapInitializer.setLayerVisibility({
id: "kk-normal",
visible: i
}), this.mapInitializer.setLayerVisibility({
id: "kk-abnormal",
visible: i
});
}
getLayerConfig(e) {
let t, i, a;
return e.deviceType === "camera" ? e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_sxj_map.png", i = [45, 108, 196], a = this.cameraNormalLayer) : (t = "/GisViewerAssets/Images/gis/gis_sxj_yc.png", i = [189, 49, 50], a = this.cameraAbnormalLayer) : e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_kk_map.png", i = [45, 108, 196], a = this.kkNormalLayer) : (t = "/GisViewerAssets/Images/gis/gis_kk_yc.png", i = [189, 49, 50], a = this.kkAbnormalLayer), {
icon: t,
color: i,
deviceLayer: a
};
}
getAutoStyleByScale() {
return this.view.scale > this.clusterScaleThreshold ? "cluster" : "scatter";
}
updateClusterEnabled(e) {
const t = e.deviceState;
e.deviceType === "camera" ? t ? t === "normal" ? this.clusterEnabled.cameraNormal = e.visible : this.clusterEnabled.cameraAbnormal = e.visible : (this.clusterEnabled.cameraNormal = e.visible, this.clusterEnabled.cameraAbnormal = e.visible) : t ? t === "normal" ? this.clusterEnabled.kkNormal = e.visible : this.clusterEnabled.kkAbnormal = e.visible : (this.clusterEnabled.kkNormal = e.visible, this.clusterEnabled.kkAbnormal = e.visible);
}
ensureStationaryWatch() {
this.watchHandle || (this.watchHandle = b.when(
() => this.view.stationary,
async () => {
if (!this.currentShowParams)
return;
if ((this.currentShowParams.style ?? this.getAutoStyleByScale()) === "scatter") {
this.applyScatterMode();
return;
}
await this.applyClusterMode();
}
));
}
hasAnyClusterEnabled() {
return this.clusterEnabled.cameraNormal || this.clusterEnabled.cameraAbnormal || this.clusterEnabled.kkNormal || this.clusterEnabled.kkAbnormal;
}
tryRemoveWatchIfNoVisible() {
var i;
const e = this.isCameraVisible || this.isKkVisible, t = this.hasAnyClusterEnabled();
!e && !t && ((i = this.watchHandle) == null || i.remove(), this.watchHandle = null);
}
applyScatterMode() {
this.showScatter(), this.cameraNormalLayer.visible = !1, this.cameraAbnormalLayer.visible = !1, this.kkNormalLayer.visible = !1, this.kkAbnormalLayer.visible = !1, this.cameraNormalLayer.removeAll(), this.cameraAbnormalLayer.removeAll(), this.kkNormalLayer.removeAll(), this.kkAbnormalLayer.removeAll();
}
async applyClusterMode() {
var r, l;
this.showScatter(!1);
const e = ((r = this.currentShowParams) == null ? void 0 : r.ddCode) || "", t = ((l = this.currentShowParams) == null ? void 0 : l.zdCode) || "", i = this.view.extent, a = [];
this.cameraNormalLayer.visible = this.clusterEnabled.cameraNormal, this.clusterEnabled.cameraNormal ? a.push(
this.showClusterInExtent(
{
deviceType: "camera",
deviceState: "normal",
style: "cluster",
ddCode: e,
zdCode: t,
visible: !0
},
i
)
) : this.cameraNormalLayer.removeAll(), this.kkNormalLayer.visible = this.clusterEnabled.kkNormal, this.clusterEnabled.kkNormal ? a.push(
this.showClusterInExtent(
{
deviceType: "kk",
deviceState: "normal",
style: "cluster",
ddCode: e,
zdCode: t,
visible: !0
},
i
)
) : this.kkNormalLayer.removeAll(), await Promise.all(a), this.tryRemoveWatchIfNoVisible();
}
async showClusterInExtent(e, t) {
const i = await fetch(`${this.esServer}/queryGeoAggregation`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
deviceType: e.deviceType,
topLeftLat: t.ymax,
topLeftLon: t.xmin,
bottomRightLat: t.ymin,
bottomRightLon: t.xmax,
devStateSet: e.deviceState ? [e.deviceState === "normal" ? "1" : "2"] : ["1", "2"],
zdCode: e.zdCode || "",
ddCode: e.ddCode || "",
mapLevel: this.view.zoom + 8,
meter: 1e3
})
});
if (i.status !== 200) {
console.error(i.statusText);
return;
}
const a = await i.json();
if (a.code !== 200)
return;
const { icon: r, color: l, deviceLayer: h } = this.getLayerConfig(e);
h.removeAll();
const d = a.data.map((s) => {
var m;
const o = (s.count.toString().length * 6 + 6) / 2, c = new u({
geometry: {
type: "point",
x: s.lon,
y: s.lat
},
attributes: {
id: ((m = s.devInfo) == null ? void 0 : m.deviceId) || s.key,
type: e.deviceType,
count: s.count,
typeName: e.deviceType === "camera" ? "视频" : "卡口",
stateName: e.deviceState === "normal" ? "正常" : "异常",
...s.devInfo
}
});
return s.count > 1 ? c.symbol = {
type: "cim",
data: {
type: "CIMSymbolReference",
symbol: {
type: "CIMPointSymbol",
symbolLayers: [
{
type: "CIMVectorMarker",
size: 32,
colorLocked: !0,
anchorPointUnits: "Relative",
frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [
[
[-o, 30],
[o, 30],
[o, 15],
[-o, 15],
[-o, 30]
]
]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: l.concat([255])
},
{
type: "CIMSolidStroke",
enable: !0,
width: 3,
color: l.concat([128])
}
]
}
},
{
type: "CIMMarkerGraphic",
primitiveName: "textGraphic",
geometry: { x: 0, y: 0 },
symbol: {
type: "CIMTextSymbol",
fontFamilyName: "msyh",
height: 12,
horizontalAlignment: "Center",
offsetX: 0,
offsetY: 22,
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: !0,
color: [255, 255, 255, 255]
}
]
},
verticalAlignment: "Center"
},
textString: s.count.toString()
}
],
scaleSymbolsProportionally: !0,
respectFrame: !0
},
{
type: "CIMPictureMarker",
enable: !0,
anchorPoint: {
x: 0,
y: 0
},
anchorPointUnits: "Relative",
size: 24,
rotateClockwise: !0,
textureFilter: "Picture",
url: r
}
]
}
}
} : c.symbol = {
type: "picture-marker",
url: r,
width: 18,
height: 18
}, c;
});
h.addMany(d);
}
}
export {
C as default
};