gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
368 lines (367 loc) • 11.3 kB
JavaScript
import m from "@arcgis/core/Graphic";
import w from "@arcgis/core/layers/FeatureLayer";
import D from "../common-utils.mjs";
import { subDistrictPointLayerOptions as P, subDistrictLineLayerOptions as g } from "./layer-symbol.mjs";
class q {
constructor(t) {
this.roadConnections = [], this.view = t, this.subDistrictPointLayer = new w(
P
), this.subDistrictPointLayer.spatialReference = t.spatialReference, this.subDistrictPointLayer.popupEnabled = !0, this.subDistrictLineLayer = new w(
g
), this.subDistrictLineLayer.spatialReference = t.spatialReference, this.subDistrictLineLayer.popupEnabled = !0, this.view.map.addMany([
this.subDistrictLineLayer,
this.subDistrictPointLayer
]);
}
async showSubDistricts(t) {
var n;
await this.clearSubDistricts(), (n = this.clickHandler) == null || n.remove(), this.clickHandler = this.view.on("click", this.viewHitTest.bind(this));
let s = 0;
const i = [], r = [];
t.forEach((e) => {
e.roadConnections.length > 0 && this.roadConnections.push(...e.roadConnections), r.push({
value: e.id,
label: e.name,
symbol: {
type: "simple-marker",
style: "circle",
color: [...e.areaColor, 0.8],
size: "8px",
outline: {
color: [...e.areaColor],
width: 4
}
}
}), e.signals.forEach((a) => {
const d = new m({
geometry: {
type: "point",
longitude: a.longitude,
latitude: a.latitude
},
attributes: {
ObjectID: s++,
id: a.nodeId,
name: a.name,
subDistrictId: e.id,
subDistrictName: e.name,
districtId: e.parentId,
districtName: e.parentName,
signalCount: e.signalCount,
color: e.areaColor.join(","),
type: "subDistrict"
}
});
i.push(d);
});
}), this.subDistrictPointLayer.renderer = {
type: "simple",
symbol: {
type: "simple-marker",
color: [23, 151, 255, 0.8],
size: "8px",
outline: {
color: "white",
width: 1
}
}
}, this.currentPointRenderer = this.subDistrictPointLayer.renderer.clone(), await this.subDistrictPointLayer.applyEdits({
addFeatures: i
}), await D.viewGoto(this.view, i);
}
/**
* 显示区控下的所有子区，用道路线表示
* @param id 区控ID
*/
async showRoads(t) {
const { type: s, id: i } = t, r = this.subDistrictPointLayer.createQuery(), n = s === "district" ? "districtId" : "subDistrictId";
i !== "" ? r.where = `${n} = '${i}'` : r.where = "1=1";
const e = await this.subDistrictPointLayer.queryFeatures(
r
), a = /* @__PURE__ */ new Map();
e.features.forEach((o) => {
var b;
const {
subDistrictId: c,
color: u,
id: h,
districtName: p,
subDistrictName: f,
signalCount: y
} = o.attributes;
a.has(c) || a.set(c, {
color: u,
signalIds: [],
districtName: p,
subDistrictName: f,
signalCount: y
}), (b = a.get(c)) == null || b.signalIds.push(h);
});
const d = [], L = [];
for (const o of a) {
let c = 0;
const u = o[0];
d.push({
value: u,
symbol: {
type: "simple-line",
color: o[1].color.split(",").map(Number),
width: 2,
style: "solid"
}
});
const { districtName: h, subDistrictName: p, signalIds: f, signalCount: y } = o[1];
this.roadConnections.filter(
(l) => l.subDistrictId === u
).forEach((l) => {
const I = new m({
geometry: {
type: "polyline",
paths: l.coordinates
},
attributes: {
ObjectID: c++,
id: l.id,
districtId: l.districtId,
subDistrictId: u,
subDistrictName: p,
districtName: h,
signalCount: y,
color: o[1].color
}
});
L.push(I);
});
}
this.subDistrictLineLayer.renderer = {
type: "simple",
symbol: {
type: "simple-line",
color: [23, 151, 255],
width: 2
}
// type: 'unique-value',
// field: 'subDistrictId',
// defaultSymbol: {
// type: 'simple-line',
// color: [180, 180, 180, 0.5],
// width: 2,
// style: 'solid'
// },
// defaultLabel: '其他子区',
// uniqueValueInfos,
// visualVariables: [
// {
// type: 'size',
// valueExpression: '$view.scale',
// stops: [
// {
// size: 6,
// value: 2500
// },
// {
// size: 5,
// value: 5000
// },
// {
// size: 4,
// value: 18055.954822000003
// },
// {
// size: 3,
// value: 144447.638572
// },
// {
// size: 2,
// value: 1155581.108577
// }
// ]
// }
// ]
}, this.currentLineRenderer = this.subDistrictLineLayer.renderer.clone(), await this.subDistrictLineLayer.applyEdits({
addFeatures: L
});
}
async clearSubDistricts() {
var i;
const t = await this.subDistrictPointLayer.queryFeatures();
t.features.length > 0 && await this.subDistrictPointLayer.applyEdits({
deleteFeatures: t.features
}), this.subDistrictPointLayer.definitionExpression = "1=1";
const s = await this.subDistrictLineLayer.queryFeatures();
s.features.length > 0 && await this.subDistrictLineLayer.applyEdits({
deleteFeatures: s.features
}), this.subDistrictLineLayer.definitionExpression = "1=1", this.roadConnections = [], (i = this.clickHandler) == null || i.remove();
}
setVisible(t) {
this.showRoads({ type: "district", id: "" }), this.subDistrictPointLayer.visible = t, this.subDistrictLineLayer.visible = t;
}
/**
* 定位子区
* @param id 子区ID
*/
async locateSubDistrict(t) {
const s = this.subDistrictPointLayer.createQuery();
s.where = `subDistrictId = '${t}'`, s.returnGeometry = !0;
const i = await this.subDistrictPointLayer.queryFeatures(s);
return i.features.length > 0 ? (await D.viewGoto(this.view, i.features, !1), { status: 0, message: "ok" }) : { status: 1, message: "未找到子区" };
}
/**
* 高亮子区, 其他子区隐藏
* @param id 子区ID
* @return 返回高亮子区的数量以及区控id
*/
async highlightSubDistrict(t) {
let s = "";
const i = this.subDistrictPointLayer.definitionExpression;
this.subDistrictPointLayer.definitionExpression = `subDistrictId = '${t.id}'`;
const r = await this.subDistrictPointLayer.queryFeatures(), n = r.features.length;
return n > 0 ? (this.subDistrictLineLayer.definitionExpression = `subDistrictId = '${t.id}'`, s = r.features[0].attributes.districtId, await D.viewGoto(
this.view,
r.features,
t.needZoom !== !1
)) : this.subDistrictPointLayer.definitionExpression = i, { count: n, parentId: s };
}
/**
* 按照区控、子区id显示子区
* @param type 类型，district 或 subDistrict
* @param id
*/
filter(t) {
const { type: s, id: i } = t, r = `${s === "district" ? "districtId" : "subDistrictId"} = '${i}'`;
this.subDistrictPointLayer.definitionExpression = r, this.subDistrictLineLayer.definitionExpression = r;
}
/**
* 重置过滤器，显示所有子区
*/
resetFilter() {
this.subDistrictPointLayer.definitionExpression = "1=1", this.subDistrictLineLayer.definitionExpression = "1=1";
}
/**
* 监听地图点击事件，进行子区高亮
* @param event
*/
async viewHitTest(t) {
var r;
const i = (r = (await this.view.hitTest(t, {
include: [this.subDistrictPointLayer, this.subDistrictLineLayer]
})).results) == null ? void 0 : r.filter(
(n) => n.type === "graphic"
);
if (i.length === 0)
console.time("resetRenderer"), this.subDistrictPointLayer.renderer = this.currentPointRenderer, this.subDistrictLineLayer.renderer = this.currentLineRenderer;
else {
const n = i[0].graphic, e = n.attributes.color.split(",").map(Number);
this.subDistrictPointLayer.renderer = {
type: "unique-value",
field: "subDistrictId",
defaultSymbol: {
type: "simple-marker",
style: "circle",
color: [0, 0, 0, 0],
size: "8px",
outline: {
color: [180, 180, 180, 0.5],
width: 4
}
},
defaultLabel: "其他子区",
uniqueValueInfos: [
{
value: n.attributes.subDistrictId,
symbol: {
type: "simple-marker",
style: "circle",
color: [...e, 0.8],
size: "8px",
outline: {
color: e,
width: 4
}
}
}
]
// visualVariables: [
// {
// type: 'size',
// valueExpression: '$view.scale',
// stops: [
// {
// size: 24,
// value: 2500
// },
// {
// size: 20,
// value: 5000
// },
// {
// size: 8,
// value: 18055.954822000003
// },
// {
// size: 4,
// value: 144447.638572
// },
// {
// size: 2,
// value: 1155581.108577
// }
// ]
// }
// ]
}, this.subDistrictLineLayer.renderer = {
type: "unique-value",
field: "subDistrictId",
defaultSymbol: {
type: "simple-line",
style: "solid",
color: [180, 180, 180, 0.5],
width: "8px"
},
defaultLabel: "其他子区",
uniqueValueInfos: [
{
value: n.attributes.subDistrictId,
symbol: {
type: "simple-line",
style: "solid",
color: n.attributes.color.split(",").map(Number),
width: "8px"
}
}
]
// visualVariables: [
// {
// type: 'size',
// valueExpression: '$view.scale',
// stops: [
// {
// size: 6,
// value: 2500
// },
// {
// size: 5,
// value: 5000
// },
// {
// size: 4,
// value: 18055.954822000003
// },
// {
// size: 3,
// value: 144447.638572
// },
// {
// size: 2,
// value: 1155581.108577
// }
// ]
// }
// ]
};
}
}
}
export {
q as default
};