gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
266 lines (265 loc) • 7.76 kB
JavaScript
import l from "@arcgis/core/Graphic";
import * as f from "@arcgis/core/core/promiseUtils";
import { Point as b, Polyline as p } from "@arcgis/core/geometry";
import S from "@arcgis/core/geometry/SpatialReference";
import * as h from "@arcgis/core/geometry/geometryEngineAsync";
import m from "@arcgis/core/layers/FeatureLayer";
import u from "@arcgis/core/layers/GraphicsLayer";
import G from "@arcgis/core/layers/support/FeatureEffect";
import R from "@arcgis/core/layers/support/FeatureFilter";
import d from "@arcgis/core/renderers/SimpleRenderer";
import v from "@arcgis/core/rest/support/Query";
import { SimpleMarkerSymbol as g, SimpleLineSymbol as L, SimpleFillSymbol as w } from "@arcgis/core/symbols";
import F from "@arcgis/core/widgets/Sketch/SketchViewModel";
import A from "../../../stores/index.mjs";
import I from "../common-utils.mjs";
class V {
constructor(e) {
this.geometryUnit = "meters", this.view = e, this.pointLayer = new u(), this.bufferAreaLayer = new u({
blendMode: "color-burn"
}), this.view.map.layers.addMany([this.bufferAreaLayer, this.pointLayer]);
const i = f.debounce(
async (t) => {
const r = await this.calculateBuffer(t);
this.updateLayerFilter(r);
}
);
this.sketchViewModel = new F({
view: e,
layer: this.pointLayer
}), this.sketchViewModel.on("update", (t) => {
var c, s;
((s = (c = t.toolEventInfo) == null ? void 0 : c.mover) == null ? void 0 : s.attributes.type) === "edge" && (t.toolEventInfo.type === "move-start" ? this.centerGeometryAtStart = this.centerGraphic.geometry : this.centerGraphic.geometry = this.centerGeometryAtStart);
const r = this.centerGraphic.geometry, o = this.edgeGraphic.geometry, n = [
[r.x, r.y],
[o.x, o.y]
];
i(n).catch((y) => {
if (!f.isAbortError(y))
throw y;
});
});
}
/**
* 搜索路口中心点周边车道
* @param params
* @returns Promise<IResult>
*/
async initializeSearch(e) {
if (this.laneLayer)
this.laneLayer.visible = !0, this.stopLineLayer.visible = !0;
else {
const s = await this.loadLaneAndStopLineLayer();
if (s.status !== 0)
return s;
}
const { crossId: i, crossCenter: t } = e, r = new b({
longitude: t[0],
latitude: t[1]
});
this.view.goTo(
{
target: r,
zoom: 18
},
{ duration: 2e3 }
), this.centerGraphic = new l({
geometry: r,
symbol: new g({
style: "circle",
color: [0, 255, 255, 0.5],
size: 10
}),
attributes: {
crossId: i,
type: "center"
}
});
const o = I.destinationWithPoint(
r,
90,
e.bufferRadius || 70
);
this.edgeGraphic = new l({
geometry: o,
symbol: new g({
style: "circle",
color: [0, 255, 255, 0.5],
size: 10
}),
attributes: {
crossId: i,
type: "edge"
}
});
const n = new p({
paths: [
[
[r.x, r.y],
[o.x, o.y]
]
]
});
this.radiusLineGraphic = new l({
geometry: n,
symbol: new L({
color: [0, 255, 255],
width: 2
})
}), this.pointLayer.addMany([
this.centerGraphic,
this.edgeGraphic,
this.radiusLineGraphic
]);
const c = await h.geodesicBuffer(
r,
e.bufferRadius || 70,
this.geometryUnit
);
return this.bufferGraphic = new l({
geometry: c,
symbol: new w({
color: [150, 150, 150],
outline: {
color: "#FFEB00",
width: "3px"
}
})
}), this.bufferAreaLayer.add(this.bufferGraphic), this.sketchViewModel.update([this.edgeGraphic, this.centerGraphic], {
tool: "move"
}), { status: 0, message: "初始化成功" };
}
/**
* 获取当前缓冲区的搜索结果
*/
async getCurrentSearchResult() {
const e = new v();
e.relationParameter = "intersects", e.geometry = this.bufferGraphic.geometry, e.returnGeometry = !0, e.outSpatialReference = new S({ wkid: 4326 }), e.outFields = ["*"];
const i = (await this.laneLayer.queryFeatures(e)).features, t = (await this.stopLineLayer.queryFeatures(e)).features;
return {
lanes: i,
stopLines: t
};
}
/**
* 清除地图上显示的搜索结果
*/
clearResult() {
this.sketchViewModel.complete(), this.pointLayer.removeAll(), this.bufferAreaLayer.removeAll(), this.laneLayer.visible = !1, this.stopLineLayer.visible = !1;
}
/**
* 计算缓冲区
* 移动边缘点或圆心点后调用
* @param vertices 圆心点与边缘点的坐标
*/
async calculateBuffer(e) {
this.radiusLineGraphic.geometry = new p({
paths: [e],
spatialReference: this.view.spatialReference
});
const i = await h.geodesicLength(
this.radiusLineGraphic.geometry,
this.geometryUnit
), t = await h.geodesicBuffer(
this.centerGraphic.geometry,
i,
this.geometryUnit
);
return this.bufferGraphic.geometry = t, t;
}
/**
* 载入车道和停止线图层
*/
async loadLaneAndStopLineLayer() {
var s, y;
const e = A.useAppDataStore, i = JSON.parse(JSON.stringify(e.mapConfig));
if (!((s = i.roadConfigTool) != null && s.initLanePolygonLayer))
return {
status: -1,
message: "roadConfigTool.initLanePolygonLayer未配置"
};
if (!((y = i.roadConfigTool) != null && y.initStopLineLayer))
return {
status: -1,
message: "roadConfigTool.initStopLineLayer"
};
const t = `${i.assetsRoot}${i.roadConfigTool.initLanePolygonLayer}`;
let r;
try {
r = await (await fetch(t)).json();
} catch (a) {
return { status: -2, message: `${t}读取失败`, result: a.message };
}
const o = r.features.filter((a) => a.attributes.RoadSecID !== "").map((a) => l.fromJSON(a));
this.laneLayer = new m({
objectIdField: "FID",
spatialReference: r.spatialReference,
geometryType: "polygon",
source: o,
fields: [
{
name: "RoadSecID",
alias: "RoadSecID",
type: "string"
}
],
renderer: new d({
symbol: new w({
color: [255, 0, 0, 0.3],
outline: {
color: "white"
}
})
})
}), this.view.map.layers.add(this.laneLayer);
const n = `${i.assetsRoot}${i.roadConfigTool.initStopLineLayer}`;
try {
r = await (await fetch(n)).json();
} catch (a) {
return {
status: -2,
message: `${n}读取失败`,
result: a.message
};
}
const c = r.features.filter((a) => a.attributes.RoadSecID !== "").map((a) => l.fromJSON(a));
return this.stopLineLayer = new m({
objectIdField: "FID",
spatialReference: r.spatialReference,
geometryType: "polyline",
source: c,
fields: [
{
name: "RoadSecID",
alias: "RoadSecID",
type: "string"
}
],
renderer: new d({
symbol: new L({
color: "red",
width: 4,
cap: "butt",
join: "miter"
})
})
}), this.view.map.layers.add(this.stopLineLayer), { status: 0, message: "ok" };
}
/**
* 更新车道与停止线图层的filter，高亮缓冲区内部的要素
* @param buffer
*/
updateLayerFilter(e) {
const i = new R({
geometry: e,
spatialRelationship: "intersects"
}), t = new G({
filter: i,
excludedEffect: "opacity(0%)"
});
this.laneLayer.featureEffect = t, this.stopLineLayer.featureEffect = t;
}
}
export {
V as default
};