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