gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
238 lines (237 loc) • 8.21 kB
JavaScript
import S from "ol/Feature";
import { Point as T } from "ol/geom";
import w from "ol/layer/Vector";
import f from "ol/source/Vector";
import { Circle as C, Fill as u, Stroke as v, Text as E } from "ol/style";
import y from "ol/style/Style";
import { toRaw as V } from "vue";
import D from "../../stores/index.mjs";
class N {
constructor(e) {
this.esServer = "", this.currentParams = null, this.cameraLoaded = !1, this.kkLoaded = !1, this.resolutionChangeKey = null, this.moveEndKey = null, this.lastZoomLevel = null, this.viewChangeDebounceTimer = null, this.map = e, this.mapView = this.map.getView();
const i = D.useAppDataStore, o = V(i.mapConfig);
this.esServer = (o == null ? void 0 : o.esServer) || "", this.cameraLayer = new w({
source: new f(),
visible: !1
}), this.map.addLayer(this.cameraLayer), this.kkLayer = new w({
source: new f(),
visible: !1
}), this.map.addLayer(this.kkLayer);
}
async setEdpassLayerVisibility(e) {
return this.currentParams = e, e.deviceType === "camera" ? this.cameraLayer.setVisible(e.visible) : e.deviceType === "kk" && this.kkLayer.setVisible(e.visible), await this.updateDevice(), this.ensureMapListeners(), { status: 0, message: "Success" };
}
/**
* 更新当前显示的设备数据，主要在地图视图变化时调用，确保当前视图范围内的设备数据是最新的。
*/
async updateDevice() {
var i, o, a, n, c, h, t, s;
const e = this.mapView.calculateExtent(this.map.getSize());
if (this.cameraLayer.getVisible()) {
const r = await this.getFeatureInExtent(
{
deviceType: "camera",
visible: !0,
ddCode: ((i = this.currentParams) == null ? void 0 : i.ddCode) || "",
zdCode: ((o = this.currentParams) == null ? void 0 : o.zdCode) || "",
deviceState: "abnormal"
},
e
);
r.push(
...await this.getFeatureInExtent(
{
deviceType: "camera",
visible: !0,
ddCode: ((a = this.currentParams) == null ? void 0 : a.ddCode) || "",
zdCode: ((n = this.currentParams) == null ? void 0 : n.zdCode) || "",
deviceState: "normal"
},
e
)
), this.cameraLoaded = !0, this.cameraLayer.getSource().clear(), this.cameraLayer.getSource().addFeatures(r);
}
if (this.kkLayer.getVisible()) {
const r = await this.getFeatureInExtent(
{
deviceType: "kk",
visible: !0,
ddCode: ((c = this.currentParams) == null ? void 0 : c.ddCode) || "",
zdCode: ((h = this.currentParams) == null ? void 0 : h.zdCode) || "",
deviceState: "abnormal"
},
e
);
r.push(
...await this.getFeatureInExtent(
{
deviceType: "kk",
visible: !0,
ddCode: ((t = this.currentParams) == null ? void 0 : t.ddCode) || "",
zdCode: ((s = this.currentParams) == null ? void 0 : s.zdCode) || "",
deviceState: "normal"
},
e
)
), this.kkLoaded = !0, this.kkLayer.getSource().clear(), this.kkLayer.getSource().addFeatures(r);
}
}
async getFeatureInExtent(e, i) {
try {
const a = await (await fetch(`${this.esServer}/queryGeoAggregation`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
deviceType: e.deviceType,
devStateSet: [e.deviceState === "normal" ? "1" : "2"],
topLeftLat: i[3],
// ymax
topLeftLon: i[0],
// xmin
bottomRightLat: i[1],
// ymin
bottomRightLon: i[2],
// xmax
zdCode: e.zdCode || "",
ddCode: e.ddCode || "",
mapLevel: this.mapView.getZoom()
})
})).json(), n = (a == null ? void 0 : a.data) || [];
return this.makeDeviceFeatures(
n,
e.deviceType,
e.deviceState || "normal"
);
} catch (o) {
return console.error("queryGeoAggregation 请求异常:", o), [];
}
}
makeDeviceFeatures(e, i, o) {
console.time("render batch"), i === "camera" ? this.cameraLayer.getSource() : this.kkLayer.getSource();
const a = e.map((t) => t.count), n = Math.min(...a), c = Math.max(...a), h = e.map((t) => {
var g;
const s = new S({
geometry: new T([Number(t.lon), Number(t.lat)])
});
s.set("id", ((g = t.devInfo) == null ? void 0 : g.deviceId) || t.key), s.set("type", i), s.set("count", t.count), t.devInfo && Object.keys(t.devInfo).forEach((d) => {
s.set(d, t.devInfo[d]);
});
const r = o === "normal" ? "#1CDE96" : "#969696";
if (t.count > 1) {
const d = t.count.toString(), m = 0.3, p = 1;
let l;
if (c === n)
l = (m + p) / 2;
else {
const k = (t.count - n) / (c - n);
l = m + k * (p - m);
}
const L = -(16 * l + 10), b = [
new y({
image: new C({
radius: 16,
fill: new u({
color: r
}),
stroke: new v({
color: "white",
width: 2
}),
scale: l
})
}),
new y({
text: new E({
text: d,
font: "bold 12px Microsoft YaHei",
fill: new u({
color: "white"
}),
backgroundFill: new u({
color: r
}),
backgroundStroke: new v({
color: "white",
width: 1
}),
padding: [2, 4, 2, 4],
offsetY: L
})
})
];
s.setStyle(b);
} else
s.setStyle(
new y({
image: new C({
radius: 4,
fill: new u({
color: r
}),
stroke: new v({
color: "white",
width: 1
})
})
})
);
return s.setProperties(t), s;
});
return console.timeEnd("render batch"), h;
}
hasAnyVisible() {
return this.cameraLayer.getVisible() || this.kkLayer.getVisible();
}
/**
* 确保地图监听已挂载
*/
ensureMapListeners() {
if (!this.hasAnyVisible()) {
this.removeMapListeners();
return;
}
this.resolutionChangeKey || (this.resolutionChangeKey = this.mapView.on("change:resolution", () => {
this.scheduleViewChange(() => this.onResolutionChange());
})), this.moveEndKey || (this.moveEndKey = this.map.on("moveend", () => {
this.scheduleViewChange(() => this.onMoveEnd());
}));
}
/**
* 移除地图监听
*/
removeMapListeners() {
this.viewChangeDebounceTimer && (clearTimeout(this.viewChangeDebounceTimer), this.viewChangeDebounceTimer = null), this.resolutionChangeKey && (this.mapView.un("change:resolution", this.onResolutionChange.bind(this)), this.resolutionChangeKey = null), this.moveEndKey && (this.map.un("moveend", this.onMoveEnd.bind(this)), this.moveEndKey = null);
}
/**
* 共用防抖：无论 resolution 还是 moveend，都重置同一个定时器，300ms 内只执行最后一次
*/
scheduleViewChange(e) {
this.viewChangeDebounceTimer && clearTimeout(this.viewChangeDebounceTimer), this.viewChangeDebounceTimer = setTimeout(() => {
this.viewChangeDebounceTimer = null, e();
}, 300);
}
/**
* 分辨率变化回调
*/
async onResolutionChange() {
const e = Math.floor(this.mapView.getZoom() || 0);
e !== this.lastZoomLevel && (console.log(`Zoom level changed to ${e}, updating devices...`), this.lastZoomLevel = e, await this.updateDevice());
}
/**
* 地图移动结束回调
*/
async onMoveEnd() {
console.log("Map move ended, updating devices..."), await this.updateDevice();
}
/**
* 销毁控制器
*/
destroy() {
this.removeMapListeners(), this.map.removeLayer(this.cameraLayer), this.map.removeLayer(this.kkLayer);
}
}
export {
N as default
};