gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
504 lines (503 loc) • 15 kB
JavaScript
import * as y from "@arcgis/core/geometry/geometryEngine.js";
import g from "@arcgis/core/geometry/Polyline.js";
import * as p from "@arcgis/core/geometry/support/webMercatorUtils.js";
import m from "@arcgis/core/Graphic.js";
import u from "@arcgis/core/layers/GraphicsLayer";
import G from "@arcgis/core/widgets/Sketch";
import x from "@arcgis/core/widgets/Sketch/SketchViewModel";
import * as c from "@turf/turf";
const P = {
maxAllowedGraphics: 0,
GraphicsLayer: {},
sketchVisibleElements: {},
sketchPosition: "top-left",
defaultSketchVisible: !0,
sketchViewModelItemSymbol: {}
}, f = {
type: "simple-line",
color: "#556DEA",
width: 2
}, M = {
type: "simple-fill",
// autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.4],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
class $ {
constructor(t, e) {
this.isDraw = !1, this.drawStartGraphicId = null, this.drawPointGraphic = /* @__PURE__ */ new Map(), this.dimensionType = null, this.viewer = t, this.options = {
...P,
...e
}, this.graphicsLayer = new u({ ...this.options.GraphicsLayer }), this.textGraphicsLayer = new u(), this.viewer.map.layers.add(this.graphicsLayer), this.viewer.map.layers.add(this.textGraphicsLayer), this.init();
}
init() {
this.sketchViewModel = new x({
layer: this.graphicsLayer,
view: this.viewer,
updateOnGraphicClick: !0,
polylineSymbol: f,
polygonSymbol: M,
...this.options.sketchViewModelItemSymbol
});
const t = this.findLayerById("TrafficToolMarkings"), e = [];
t && e.push({ layer: t, enabled: !0 }), this.sketch = new G({
view: this.viewer,
viewModel: this.sketchViewModel,
layer: this.graphicsLayer,
visible: this.options.defaultSketchVisible,
snappingOptions: {
// autocasts to SnappingOptions()
enabled: !0,
// global snapping is turned on
// assigns a collection of FeatureSnappingLayerSource() and enables feature snapping on this layer
featureSources: e
}
}), this.sketch.visibleElements = {
...this.options.sketchVisibleElements
}, this.viewer.ui.add(this.sketch, this.options.sketchPosition);
const i = this;
this.viewer.on("pointer-move", function(s) {
const r = {
x: s.x,
y: s.y
};
if (i.isDraw && i.dimensionType == "distance") {
i.tipsDom || (i.tipsDom = i.createDom());
const o = i.getDrawGraphicLength();
i.tipsDom.innerText = `${o}米`, i.tipsDom.style.left = `${r.x}px`, i.tipsDom.style.top = `${r.y + 3}px`, i.tipsDom.style.pointerEvents = "none";
}
});
}
on(t) {
const e = this;
this.sketch.on("create", function(i) {
e.onCreate(i, t);
}), this.sketch.on("update", function(i) {
e.onUpdate(i, t);
}), this.sketch.on("delete", function(i) {
e.onDelete(i, t);
}), this.sketch.on("redo", function(i) {
console.log("redo", i), t && t("redo", "complete", i);
}), this.sketch.on("undo", function(i) {
console.log("undo", i), t && t("undo", "complete", i);
});
}
onCreate(t, e) {
if (console.log("create", t), this.drawStartGraphicId || (this.drawStartGraphicId = new Date().getTime().toString()), t.graphic.getAttribute("id") || (t.graphic.setAttribute("type", "draw"), t.graphic.setAttribute("id", this.drawStartGraphicId)), t.state === "start" && t.graphic.geometry.type === "polyline" && (this.isDraw = !0, this.drawStartGraphic = p.webMercatorToGeographic(
t.graphic.geometry
), this.dimensionType == "distance")) {
const i = this.getGeometryXY(this.drawStartGraphic, 0), s = `${this.drawStartGraphicId}-start`;
this.addOrUpdateMarkPoint("起点", i, s);
}
if (t.state === "active" && t.graphic.geometry.type === "polyline") {
const i = p.webMercatorToGeographic(
t.graphic.geometry
), s = this.drawStartGraphicId;
this.dimensionType == "distance" && (this.drawPolylinePoint(i, s), this.drawStartGraphic = i);
}
if (t.state === "complete" && t.graphic.geometry.type === "polyline" && this.dimensionType == "distance") {
const i = this.getDrawGraphicLength(), s = `${this.drawStartGraphicId}-end`, r = p.webMercatorToGeographic(
t.graphic.geometry
), o = r.paths[0], n = this.getGeometryXY(r, o.length - 1);
this.addOrUpdateMarkPoint(`总长度：${i}米`, n, s), this.drawStartGraphic = null, this.removeDom(), this.isDraw = !1, this.drawStartGraphicId = null;
}
t.state === "cancel" && t.graphic.geometry.type === "polyline" && this.onCreateToCancel(), e && e("create", t.state, t.graphic);
}
onCreateToCancel() {
this.removeDom(), this.isDraw = !1, this.drawStartGraphic = null;
const t = this.drawStartGraphicId;
this.drawPointGraphic.forEach((e, i) => {
new RegExp(`^${t}-`).test(i) && (this.textGraphicsLayer.remove(e), this.drawPointGraphic.delete(i));
}), this.drawStartGraphicId = null;
}
onUpdate(t, e) {
console.log("update", t), this.updatePolylinePoint(
t.graphics.filter((i) => i.geometry.type === "polyline")
), e && e("update", t.state, t.graphics);
}
onDelete(t, e) {
console.log("delete", t), this.deletePolylinePoint(
t.graphics.filter((i) => i.geometry.type === "polyline")
), e && e("delete", "complete", t.graphics);
}
addPolyline(t) {
const e = [], i = {
type: "draw",
id: new Date().getTime().toString()
};
t.map((s) => {
e.push(
this.createPolylineGraphic(s, f, {
...i
})
);
}), this.graphicsLayer.addMany(e);
}
createPolylineGraphic(t, e, i) {
const s = new g({
paths: [t]
}), r = p.geographicToWebMercator(s);
return new m({
geometry: r,
symbol: e,
attributes: i
});
}
createDom() {
const t = document.createElement("div");
t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.width = "100px", t.style.height = "80px", t.style.zIndex = "999", t.style.display = "flex", t.style.justifyContent = "center", t.style.alignItems = "center", t.style.color = "#fff", t.style.fontSize = "20px", t.style.fontWeight = "bold", t.innerText = "";
const e = document.getElementsByClassName("esri-view-root");
if (e.length > 0)
return e[0].appendChild(t), t;
}
removeDom() {
this.tipsDom && (this.tipsDom.remove(), this.tipsDom = null);
}
/**
* 开始绘制
* @param tool 'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle'
* @param createOptions
*/
sketchCreate(t, e) {
this.sketchViewModel.create(t, e);
}
/**
* 退出绘制
*
* @memberof sketchViewTool
*/
sketchCancel() {
this.sketchViewModel.cancel();
}
/**
* 获取所有的图形得长度
* @param offsetUnit 距离单位
* @returns
*/
getCalculateDistance(t = "meters") {
const e = [];
return this.graphicsLayer.graphics.map((i) => {
i.geometry.type === "polyline" && e.push(this.calculateDistance(i.geometry, t));
}), e;
}
/**
* 获取所有的图形得航向角
*
* @returns
* @memberof sketchViewTool
*/
getCalculateHeading(t = "north") {
const e = [];
return this.graphicsLayer.graphics.map((i) => {
i.geometry.type === "polyline" && e.push(this.calculateHeading(i.geometry, t));
}), e;
}
/**
* 获取所有的线段的路径和长度
*
* @returns
* @memberof sketchViewTool
*/
getAllPolylineGraphicPath(t = "meters") {
const e = [];
return this.graphicsLayer.graphics.map((i) => {
i.geometry.type === "polyline" && e.push({
paths: p.webMercatorToGeographic(i.geometry).paths[0],
distance: this.calculateDistance(i.geometry, t)
});
}), e;
}
close() {
this.sketch.visible = !1;
}
show() {
this.sketch.visible = !0;
}
removeAll() {
this.graphicsLayer.removeAll(), this.textGraphicsLayer.removeAll(), this.drawPointGraphic.clear();
}
calculateDistance(t, e = "meters") {
return y.geodesicLength(
t,
e
);
}
/**
* 计算geometry的航向角
*
* @param {__esri.Geometry} geometry
* @param {string} [direction='north']
* @returns
* @memberof sketchViewTool
*/
calculateHeading(t, e = "north") {
const s = p.webMercatorToGeographic(t).paths[0];
return this.calculatePointHeading(s, e);
}
/**
* 计算路径的航向角
*
* @param {number[][]} path 路径
* @param {string} [direction='north'] 方向
* @returns
* @memberof sketchViewTool
*/
calculatePointHeading(t, e = "north") {
const i = {
longitude: t[0][0],
latitude: t[0][1]
}, s = {
longitude: t[t.length - 1][0],
latitude: t[t.length - 1][1]
}, r = i.longitude, o = i.latitude, n = s.longitude, a = s.latitude, h = n - r, d = Math.sin(h) * Math.cos(a), w = Math.cos(o) * Math.sin(a) - Math.sin(o) * Math.cos(a) * Math.cos(h);
let l = (Math.atan2(d, w) * (180 / Math.PI) + 360) % 360;
return e === "east" ? l = (l + 90) % 360 : e === "south" ? l = (l + 180) % 360 : e === "west" && (l = (l + 270) % 360), l;
}
drawPolylinePoint(t, e, i = "add") {
const s = t == null ? void 0 : t.paths[0], r = [];
for (let o = 0; o < s.length - 1; o++) {
const n = s[o];
r.push([...n]);
const a = {
x: n[0],
y: n[1]
};
if (o == 0) {
i == "update" && this.addOrUpdateMarkPoint("起点", a, `${e}-start`);
continue;
}
const h = `${e}-${o + 1}`, d = this.getPointLength(r, "meters");
this.addOrUpdateMarkPoint(`${d.toFixed(2)}米`, a, h);
}
if (i == "update" && s.length > 1) {
const o = this.getGeometryXY(
t,
s.length - 1
);
r.push([o.x, o.y]);
const n = this.getPointLength(r, "meters");
this.addOrUpdateMarkPoint(
`总长度：${n.toFixed(2)}米`,
o,
`${e}-end`
);
}
}
updatePolylinePoint(t) {
for (let e = 0; e < t.length; e++) {
console.log(t[e]);
const i = t[e].getAttribute("id"), s = p.webMercatorToGeographic(
t[e].geometry
);
this.drawPolylinePoint(s, i, "update");
}
}
deletePolylinePoint(t) {
var e;
for (let i = 0; i < t.length; i++) {
const s = t[i].getAttribute("id"), r = `${s}-start`, o = `${s}-end`, n = [r, o];
(e = t[i].geometry) == null || e.paths[0].map(
(a, h) => {
n.push(`${s}-${h + 1}`);
}
), n.map((a) => {
const h = this.drawPointGraphic.get(a);
h && (this.textGraphicsLayer.remove(h), this.drawPointGraphic.delete(a));
});
}
}
/**
* 添加或者更新标记点
*
* @param {string} text 标记点的文本
* @param {ITPoint} point 标记点的坐标
* @param {string} id 标记点的id
* @param {*} [attributes={}] 标记点的属性
* @returns
* @memberof sketchViewTool
*/
addOrUpdateMarkPoint(t, e, i, s = {}) {
if (this.drawPointGraphic.has(i)) {
const o = this.drawPointGraphic.get(i);
this.textGraphicsLayer.remove(o);
const n = this.createTextGraphic(t, e, {
...s,
id: i
});
this.drawPointGraphic.set(i, n), this.textGraphicsLayer.add(n);
return;
}
const r = this.createTextGraphic(t, e, {
...s,
id: i
});
this.drawPointGraphic.set(i, r), this.textGraphicsLayer.add(r);
}
/**
* 获取图形的点位
*
* @param {__esri.Geometry} geometry
* @returns
* @memberof sketchViewTool
*/
getGeometryXY(t, e = 0) {
const i = t == null ? void 0 : t.paths[0];
return {
x: i[e][0],
y: i[e][1]
};
}
/**
* 创建文本图形
*
* @param {string} text 文本
* @param {{ x: number; y: number }} point 坐标
* @param {*} [attributes={}] 属性
* @returns
* @memberof sketchViewTool
*/
createTextGraphic(t, e, i = {}) {
return new m({
geometry: {
//@ts-ignore
type: "point",
x: e.x,
y: e.y
},
symbol: {
//@ts-ignore
type: "text",
text: t,
color: "white",
haloColor: "black",
haloSize: "1px",
xoffset: 3,
yoffset: 3
},
attributes: {
...i
}
});
}
/**
* 获取当前绘制的图形的长度
* @returns
*/
getDrawGraphicLength() {
return this.drawStartGraphic ? this.calculateDistance(this.drawStartGraphic, "meters").toFixed(2) : 0;
}
/**
* 获取两点的角度
*
* @param {ITPoint} startPoint
* @param {ITPoint} endPoint
* @returns
* @memberof SketchView
*/
getAngle(t, e) {
const i = e.x - t.x, s = e.y - t.y;
return Math.atan2(s, i) * 180 / Math.PI;
}
/**
* 获取两点的方位角
*
* @param {ITPoint} startPoint
* @param {ITPoint} endPoint
* @returns
* @memberof sketchViewTool
*/
getBearing(t, e) {
return c.bearing(
c.point([t.x, t.y]),
c.point([e.x, e.y])
);
}
/**
* 获取两点的距离
* @param startPoint
* @param endPoint
* @param units
* @returns
*/
getPointLength(t, e = "meters") {
const i = new g({
paths: [t]
});
return y.geodesicLength(i, e);
}
/**
* 获取多个点的中心点
*
* @param {ITPoint[]} points
* @returns
* @memberof sketchViewTool
*/
featureCollection(t) {
const e = c.featureCollection(
t.map((s) => c.point([s.x, s.y]))
);
return c.center(e);
}
/**
* 获取两点的中心点
*
* @param {ITPoint} startPoint
* @param {ITPoint} endPoint
* @returns
* @memberof sketchViewTool
*/
midpoint(t, e) {
return c.midpoint(
c.point([t.x, t.y]),
c.point([e.x, e.y])
);
}
/**
* 获取方向
*
* @param {ITPoint} startPoint 起点
* @param {ITPoint} endPoint 终点
* @returns
* @memberof SketchView
*/
getDirection(t, e) {
const i = e.x - t.x, s = e.y - t.y, o = Math.atan2(s, i) * 180 / Math.PI;
return o >= -45 && o <= 45 ? 0 : o > 45 && o <= 135 ? 1 : o > 135 || o <= -135 ? 2 : 3;
}
findLayerById(t) {
return this.viewer.map.findLayerById(t);
}
/**
* 开启图层捕捉
*/
turnOnLayerSnap() {
this.sketchViewModel.snappingOptions.enabled = !0;
}
/**
* 关闭图层捕捉
*/
turnOffLayerSnap() {
this.sketchViewModel.snappingOptions.enabled = !1;
}
setDimensionType(t) {
this.dimensionType = t;
}
/**
* 删除指定的图形
* @param graphic 删除指定的图形
*/
remove(t) {
this.graphicsLayer.remove(t);
}
destroy() {
var t, e;
this.viewer.map.remove(this.graphicsLayer), this.viewer.map.remove(this.textGraphicsLayer), (t = this.sketch) == null || t.destroy(), (e = this.sketchViewModel) == null || e.destroy();
}
}
export {
$ as default
};