gisviewer-vue3-arcgis 1.0.284 → 1.0.285
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.mjs +6 -5
- package/es/src/gis-map/gis-map.vue.d.ts +124 -1
- package/es/src/gis-map/gis-map.vue.mjs +63 -63
- package/es/src/gis-map/index.d.ts +124 -1
- package/es/src/gis-map/utils/edpass-device-controller.mjs +278 -0
- package/es/src/gis-map/utils/green-wave-band-controller/index.mjs +362 -0
- package/es/src/gis-map/utils/holo-flow/index.mjs +101 -0
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts +125 -0
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.mjs +153 -0
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue2.mjs +4 -0
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.mjs +336 -0
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.mjs +236 -0
- package/es/src/gis-map/utils/holo-flow/trace-holo-flow.mjs +106 -0
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs +576 -0
- package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs +386 -0
- package/es/src/gis-map/utils/index.mjs +2 -2
- package/es/src/gis-map/utils/police-jurisdiction.mjs +202 -0
- package/es/src/gis-map/utils/road-config-tool/cross.mjs +127 -0
- package/es/src/gis-map/utils/road-config-tool/entrance.mjs +79 -0
- package/es/src/gis-map/utils/road-config-tool/exit.mjs +86 -0
- package/es/src/gis-map/utils/road-config-tool/index.mjs +112 -0
- package/es/src/gis-map/utils/road-config-tool/indicator-area.mjs +44 -0
- package/es/src/gis-map/utils/road-config-tool/lane.mjs +35 -0
- package/es/src/gis-map/utils/road-config-tool/search-nearby-lanes.mjs +265 -0
- package/es/src/gis-map/utils/signal-control-area/cross-renderer.mjs +593 -0
- package/es/src/gis-map/utils/signal-control-area/district-controller.mjs +84 -0
- package/es/src/gis-map/utils/signal-control-area/district-renderer.mjs +122 -0
- package/es/src/gis-map/utils/signal-control-area/edit-area.mjs +550 -0
- package/es/src/gis-map/utils/signal-control-area/layer-symbol.mjs +984 -0
- package/es/src/gis-map/utils/signal-control-area/signal-area-controller.mjs +140 -0
- package/es/src/gis-map/utils/signal-control-area/signal-cross-controller.mjs +423 -0
- package/es/src/gis-map/utils/signal-control-area/signal-renderer.mjs +123 -0
- package/es/src/gis-map/utils/signal-control-area/sub-district-renderer.mjs +367 -0
- package/es/src/gis-map/utils/signal-system/signal-system-controller.mjs +137 -0
- package/es/src/gis-map/utils/sketchViewTool.mjs +503 -0
- package/es/src/gis-map-ol/gis-map-ol.vue.d.ts +50 -0
- package/es/src/gis-map-ol/gis-map-ol.vue.mjs +67 -0
- package/es/src/gis-map-ol/gis-map-ol.vue2.mjs +4 -0
- package/es/src/gis-map-ol/gis-map-ol.vue3.mjs +5 -0
- package/es/src/gis-map-ol/index.d.ts +44 -1
- package/es/src/gis-map-ol/index.mjs +8 -0
- package/es/src/gis-map-ol/utils/ol-map-initializer.d.ts +28 -0
- package/es/src/gis-map-ol/utils/ol-map-initializer.mjs +129 -0
- package/es/src/gis-map-ol/utils/signal-control/signal-cross-controller.d.ts +42 -0
- package/es/src/gis-map-ol/utils/signal-control/signal-cross-controller.mjs +263 -0
- package/es/src/index.mjs +4 -4
- package/es/src/types/index.mjs +5 -0
- package/lib/index.js +1 -1
- package/lib/src/gis-map/gis-map.vue.d.ts +124 -1
- package/lib/src/gis-map/gis-map.vue.js +1 -1
- package/lib/src/gis-map/index.d.ts +124 -1
- package/lib/src/gis-map/utils/edpass-device-controller.js +1 -0
- package/lib/src/gis-map/utils/green-wave-band-controller/index.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/index.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts +125 -0
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue2.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/trace-holo-flow.js +2 -0
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js +1 -0
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-layer.js +1 -0
- package/lib/src/gis-map/utils/index.js +1 -1
- package/lib/src/gis-map/utils/police-jurisdiction.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/cross.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/entrance.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/exit.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/index.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/indicator-area.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/lane.js +1 -0
- package/lib/src/gis-map/utils/road-config-tool/search-nearby-lanes.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/cross-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/district-controller.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/district-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/edit-area.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/layer-symbol.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/signal-area-controller.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/signal-cross-controller.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/signal-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-control-area/sub-district-renderer.js +1 -0
- package/lib/src/gis-map/utils/signal-system/signal-system-controller.js +1 -0
- package/lib/src/gis-map/utils/sketchViewTool.js +1 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue.d.ts +50 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue.js +1 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue2.js +1 -0
- package/lib/src/gis-map-ol/gis-map-ol.vue3.js +1 -0
- package/lib/src/gis-map-ol/index.d.ts +44 -1
- package/lib/src/gis-map-ol/index.js +1 -0
- package/lib/src/gis-map-ol/utils/ol-map-initializer.d.ts +28 -0
- package/lib/src/gis-map-ol/utils/ol-map-initializer.js +1 -0
- package/lib/src/gis-map-ol/utils/signal-control/signal-cross-controller.d.ts +42 -0
- package/lib/src/gis-map-ol/utils/signal-control/signal-cross-controller.js +1 -0
- package/lib/src/index.js +1 -1
- package/lib/src/types/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,503 @@
|
|
|
1
|
+
import * as y from "@arcgis/core/geometry/geometryEngine.js";
|
|
2
|
+
import g from "@arcgis/core/geometry/Polyline.js";
|
|
3
|
+
import * as p from "@arcgis/core/geometry/support/webMercatorUtils.js";
|
|
4
|
+
import m from "@arcgis/core/Graphic.js";
|
|
5
|
+
import u from "@arcgis/core/layers/GraphicsLayer";
|
|
6
|
+
import G from "@arcgis/core/widgets/Sketch";
|
|
7
|
+
import x from "@arcgis/core/widgets/Sketch/SketchViewModel";
|
|
8
|
+
import * as c from "@turf/turf";
|
|
9
|
+
const P = {
|
|
10
|
+
maxAllowedGraphics: 0,
|
|
11
|
+
GraphicsLayer: {},
|
|
12
|
+
sketchVisibleElements: {},
|
|
13
|
+
sketchPosition: "top-left",
|
|
14
|
+
defaultSketchVisible: !0,
|
|
15
|
+
sketchViewModelItemSymbol: {}
|
|
16
|
+
}, f = {
|
|
17
|
+
type: "simple-line",
|
|
18
|
+
color: "#556DEA",
|
|
19
|
+
width: 2
|
|
20
|
+
}, M = {
|
|
21
|
+
type: "simple-fill",
|
|
22
|
+
// autocasts as new SimpleFillSymbol()
|
|
23
|
+
color: [227, 139, 79, 0.4],
|
|
24
|
+
outline: {
|
|
25
|
+
// autocasts as new SimpleLineSymbol()
|
|
26
|
+
color: [255, 255, 255],
|
|
27
|
+
width: 1
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
class $ {
|
|
31
|
+
constructor(t, e) {
|
|
32
|
+
this.isDraw = !1, this.drawStartGraphicId = null, this.drawPointGraphic = /* @__PURE__ */ new Map(), this.dimensionType = null, this.viewer = t, this.options = {
|
|
33
|
+
...P,
|
|
34
|
+
...e
|
|
35
|
+
}, 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();
|
|
36
|
+
}
|
|
37
|
+
init() {
|
|
38
|
+
this.sketchViewModel = new x({
|
|
39
|
+
layer: this.graphicsLayer,
|
|
40
|
+
view: this.viewer,
|
|
41
|
+
updateOnGraphicClick: !0,
|
|
42
|
+
polylineSymbol: f,
|
|
43
|
+
polygonSymbol: M,
|
|
44
|
+
...this.options.sketchViewModelItemSymbol
|
|
45
|
+
});
|
|
46
|
+
const t = this.findLayerById("TrafficToolMarkings"), e = [];
|
|
47
|
+
t && e.push({ layer: t, enabled: !0 }), this.sketch = new G({
|
|
48
|
+
view: this.viewer,
|
|
49
|
+
viewModel: this.sketchViewModel,
|
|
50
|
+
layer: this.graphicsLayer,
|
|
51
|
+
visible: this.options.defaultSketchVisible,
|
|
52
|
+
snappingOptions: {
|
|
53
|
+
// autocasts to SnappingOptions()
|
|
54
|
+
enabled: !0,
|
|
55
|
+
// global snapping is turned on
|
|
56
|
+
// assigns a collection of FeatureSnappingLayerSource() and enables feature snapping on this layer
|
|
57
|
+
featureSources: e
|
|
58
|
+
}
|
|
59
|
+
}), this.sketch.visibleElements = {
|
|
60
|
+
...this.options.sketchVisibleElements
|
|
61
|
+
}, this.viewer.ui.add(this.sketch, this.options.sketchPosition);
|
|
62
|
+
const i = this;
|
|
63
|
+
this.viewer.on("pointer-move", function(s) {
|
|
64
|
+
const r = {
|
|
65
|
+
x: s.x,
|
|
66
|
+
y: s.y
|
|
67
|
+
};
|
|
68
|
+
if (i.isDraw && i.dimensionType == "distance") {
|
|
69
|
+
i.tipsDom || (i.tipsDom = i.createDom());
|
|
70
|
+
const o = i.getDrawGraphicLength();
|
|
71
|
+
i.tipsDom.innerText = `${o}米`, i.tipsDom.style.left = `${r.x}px`, i.tipsDom.style.top = `${r.y + 3}px`, i.tipsDom.style.pointerEvents = "none";
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
on(t) {
|
|
76
|
+
const e = this;
|
|
77
|
+
this.sketch.on("create", function(i) {
|
|
78
|
+
e.onCreate(i, t);
|
|
79
|
+
}), this.sketch.on("update", function(i) {
|
|
80
|
+
e.onUpdate(i, t);
|
|
81
|
+
}), this.sketch.on("delete", function(i) {
|
|
82
|
+
e.onDelete(i, t);
|
|
83
|
+
}), this.sketch.on("redo", function(i) {
|
|
84
|
+
console.log("redo", i), t && t("redo", "complete", i);
|
|
85
|
+
}), this.sketch.on("undo", function(i) {
|
|
86
|
+
console.log("undo", i), t && t("undo", "complete", i);
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
onCreate(t, e) {
|
|
90
|
+
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(
|
|
91
|
+
t.graphic.geometry
|
|
92
|
+
), this.dimensionType == "distance")) {
|
|
93
|
+
const i = this.getGeometryXY(this.drawStartGraphic, 0), s = `${this.drawStartGraphicId}-start`;
|
|
94
|
+
this.addOrUpdateMarkPoint("起点", i, s);
|
|
95
|
+
}
|
|
96
|
+
if (t.state === "active" && t.graphic.geometry.type === "polyline") {
|
|
97
|
+
const i = p.webMercatorToGeographic(
|
|
98
|
+
t.graphic.geometry
|
|
99
|
+
), s = this.drawStartGraphicId;
|
|
100
|
+
this.dimensionType == "distance" && (this.drawPolylinePoint(i, s), this.drawStartGraphic = i);
|
|
101
|
+
}
|
|
102
|
+
if (t.state === "complete" && t.graphic.geometry.type === "polyline" && this.dimensionType == "distance") {
|
|
103
|
+
const i = this.getDrawGraphicLength(), s = `${this.drawStartGraphicId}-end`, r = p.webMercatorToGeographic(
|
|
104
|
+
t.graphic.geometry
|
|
105
|
+
), o = r.paths[0], n = this.getGeometryXY(r, o.length - 1);
|
|
106
|
+
this.addOrUpdateMarkPoint(`总长度:${i}米`, n, s), this.drawStartGraphic = null, this.removeDom(), this.isDraw = !1, this.drawStartGraphicId = null;
|
|
107
|
+
}
|
|
108
|
+
t.state === "cancel" && t.graphic.geometry.type === "polyline" && this.onCreateToCancel(), e && e("create", t.state, t.graphic);
|
|
109
|
+
}
|
|
110
|
+
onCreateToCancel() {
|
|
111
|
+
this.removeDom(), this.isDraw = !1, this.drawStartGraphic = null;
|
|
112
|
+
const t = this.drawStartGraphicId;
|
|
113
|
+
this.drawPointGraphic.forEach((e, i) => {
|
|
114
|
+
new RegExp(`^${t}-`).test(i) && (this.textGraphicsLayer.remove(e), this.drawPointGraphic.delete(i));
|
|
115
|
+
}), this.drawStartGraphicId = null;
|
|
116
|
+
}
|
|
117
|
+
onUpdate(t, e) {
|
|
118
|
+
console.log("update", t), this.updatePolylinePoint(
|
|
119
|
+
t.graphics.filter((i) => i.geometry.type === "polyline")
|
|
120
|
+
), e && e("update", t.state, t.graphics);
|
|
121
|
+
}
|
|
122
|
+
onDelete(t, e) {
|
|
123
|
+
console.log("delete", t), this.deletePolylinePoint(
|
|
124
|
+
t.graphics.filter((i) => i.geometry.type === "polyline")
|
|
125
|
+
), e && e("delete", "complete", t.graphics);
|
|
126
|
+
}
|
|
127
|
+
addPolyline(t) {
|
|
128
|
+
const e = [], i = {
|
|
129
|
+
type: "draw",
|
|
130
|
+
id: new Date().getTime().toString()
|
|
131
|
+
};
|
|
132
|
+
t.map((s) => {
|
|
133
|
+
e.push(
|
|
134
|
+
this.createPolylineGraphic(s, f, {
|
|
135
|
+
...i
|
|
136
|
+
})
|
|
137
|
+
);
|
|
138
|
+
}), this.graphicsLayer.addMany(e);
|
|
139
|
+
}
|
|
140
|
+
createPolylineGraphic(t, e, i) {
|
|
141
|
+
const s = new g({
|
|
142
|
+
paths: [t]
|
|
143
|
+
}), r = p.geographicToWebMercator(s);
|
|
144
|
+
return new m({
|
|
145
|
+
geometry: r,
|
|
146
|
+
symbol: e,
|
|
147
|
+
attributes: i
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
createDom() {
|
|
151
|
+
const t = document.createElement("div");
|
|
152
|
+
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 = "";
|
|
153
|
+
const e = document.getElementsByClassName("esri-view-root");
|
|
154
|
+
if (e.length > 0)
|
|
155
|
+
return e[0].appendChild(t), t;
|
|
156
|
+
}
|
|
157
|
+
removeDom() {
|
|
158
|
+
this.tipsDom && (this.tipsDom.remove(), this.tipsDom = null);
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* 开始绘制
|
|
162
|
+
* @param tool 'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle'
|
|
163
|
+
* @param createOptions
|
|
164
|
+
*/
|
|
165
|
+
sketchCreate(t, e) {
|
|
166
|
+
this.sketchViewModel.create(t, e);
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* 退出绘制
|
|
170
|
+
*
|
|
171
|
+
* @memberof sketchViewTool
|
|
172
|
+
*/
|
|
173
|
+
sketchCancel() {
|
|
174
|
+
this.sketchViewModel.cancel();
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* 获取所有的图形得长度
|
|
178
|
+
* @param offsetUnit 距离单位
|
|
179
|
+
* @returns
|
|
180
|
+
*/
|
|
181
|
+
getCalculateDistance(t = "meters") {
|
|
182
|
+
const e = [];
|
|
183
|
+
return this.graphicsLayer.graphics.map((i) => {
|
|
184
|
+
i.geometry.type === "polyline" && e.push(this.calculateDistance(i.geometry, t));
|
|
185
|
+
}), e;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* 获取所有的图形得航向角
|
|
189
|
+
*
|
|
190
|
+
* @returns
|
|
191
|
+
* @memberof sketchViewTool
|
|
192
|
+
*/
|
|
193
|
+
getCalculateHeading(t = "north") {
|
|
194
|
+
const e = [];
|
|
195
|
+
return this.graphicsLayer.graphics.map((i) => {
|
|
196
|
+
i.geometry.type === "polyline" && e.push(this.calculateHeading(i.geometry, t));
|
|
197
|
+
}), e;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* 获取所有的线段的路径和长度
|
|
201
|
+
*
|
|
202
|
+
* @returns
|
|
203
|
+
* @memberof sketchViewTool
|
|
204
|
+
*/
|
|
205
|
+
getAllPolylineGraphicPath(t = "meters") {
|
|
206
|
+
const e = [];
|
|
207
|
+
return this.graphicsLayer.graphics.map((i) => {
|
|
208
|
+
i.geometry.type === "polyline" && e.push({
|
|
209
|
+
paths: p.webMercatorToGeographic(i.geometry).paths[0],
|
|
210
|
+
distance: this.calculateDistance(i.geometry, t)
|
|
211
|
+
});
|
|
212
|
+
}), e;
|
|
213
|
+
}
|
|
214
|
+
close() {
|
|
215
|
+
this.sketch.visible = !1;
|
|
216
|
+
}
|
|
217
|
+
show() {
|
|
218
|
+
this.sketch.visible = !0;
|
|
219
|
+
}
|
|
220
|
+
removeAll() {
|
|
221
|
+
this.graphicsLayer.removeAll(), this.textGraphicsLayer.removeAll(), this.drawPointGraphic.clear();
|
|
222
|
+
}
|
|
223
|
+
calculateDistance(t, e = "meters") {
|
|
224
|
+
return y.geodesicLength(
|
|
225
|
+
t,
|
|
226
|
+
e
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
/**
|
|
230
|
+
* 计算geometry的航向角
|
|
231
|
+
*
|
|
232
|
+
* @param {__esri.Geometry} geometry
|
|
233
|
+
* @param {string} [direction='north']
|
|
234
|
+
* @returns
|
|
235
|
+
* @memberof sketchViewTool
|
|
236
|
+
*/
|
|
237
|
+
calculateHeading(t, e = "north") {
|
|
238
|
+
const s = p.webMercatorToGeographic(t).paths[0];
|
|
239
|
+
return this.calculatePointHeading(s, e);
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* 计算路径的航向角
|
|
243
|
+
*
|
|
244
|
+
* @param {number[][]} path 路径
|
|
245
|
+
* @param {string} [direction='north'] 方向
|
|
246
|
+
* @returns
|
|
247
|
+
* @memberof sketchViewTool
|
|
248
|
+
*/
|
|
249
|
+
calculatePointHeading(t, e = "north") {
|
|
250
|
+
const i = {
|
|
251
|
+
longitude: t[0][0],
|
|
252
|
+
latitude: t[0][1]
|
|
253
|
+
}, s = {
|
|
254
|
+
longitude: t[t.length - 1][0],
|
|
255
|
+
latitude: t[t.length - 1][1]
|
|
256
|
+
}, 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);
|
|
257
|
+
let l = (Math.atan2(d, w) * (180 / Math.PI) + 360) % 360;
|
|
258
|
+
return e === "east" ? l = (l + 90) % 360 : e === "south" ? l = (l + 180) % 360 : e === "west" && (l = (l + 270) % 360), l;
|
|
259
|
+
}
|
|
260
|
+
drawPolylinePoint(t, e, i = "add") {
|
|
261
|
+
const s = t == null ? void 0 : t.paths[0], r = [];
|
|
262
|
+
for (let o = 0; o < s.length - 1; o++) {
|
|
263
|
+
const n = s[o];
|
|
264
|
+
r.push([...n]);
|
|
265
|
+
const a = {
|
|
266
|
+
x: n[0],
|
|
267
|
+
y: n[1]
|
|
268
|
+
};
|
|
269
|
+
if (o == 0) {
|
|
270
|
+
i == "update" && this.addOrUpdateMarkPoint("起点", a, `${e}-start`);
|
|
271
|
+
continue;
|
|
272
|
+
}
|
|
273
|
+
const h = `${e}-${o + 1}`, d = this.getPointLength(r, "meters");
|
|
274
|
+
this.addOrUpdateMarkPoint(`${d.toFixed(2)}米`, a, h);
|
|
275
|
+
}
|
|
276
|
+
if (i == "update" && s.length > 1) {
|
|
277
|
+
const o = this.getGeometryXY(
|
|
278
|
+
t,
|
|
279
|
+
s.length - 1
|
|
280
|
+
);
|
|
281
|
+
r.push([o.x, o.y]);
|
|
282
|
+
const n = this.getPointLength(r, "meters");
|
|
283
|
+
this.addOrUpdateMarkPoint(
|
|
284
|
+
`总长度:${n.toFixed(2)}米`,
|
|
285
|
+
o,
|
|
286
|
+
`${e}-end`
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
updatePolylinePoint(t) {
|
|
291
|
+
for (let e = 0; e < t.length; e++) {
|
|
292
|
+
console.log(t[e]);
|
|
293
|
+
const i = t[e].getAttribute("id"), s = p.webMercatorToGeographic(
|
|
294
|
+
t[e].geometry
|
|
295
|
+
);
|
|
296
|
+
this.drawPolylinePoint(s, i, "update");
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
deletePolylinePoint(t) {
|
|
300
|
+
var e;
|
|
301
|
+
for (let i = 0; i < t.length; i++) {
|
|
302
|
+
const s = t[i].getAttribute("id"), r = `${s}-start`, o = `${s}-end`, n = [r, o];
|
|
303
|
+
(e = t[i].geometry) == null || e.paths[0].map(
|
|
304
|
+
(a, h) => {
|
|
305
|
+
n.push(`${s}-${h + 1}`);
|
|
306
|
+
}
|
|
307
|
+
), n.map((a) => {
|
|
308
|
+
const h = this.drawPointGraphic.get(a);
|
|
309
|
+
h && (this.textGraphicsLayer.remove(h), this.drawPointGraphic.delete(a));
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
/**
|
|
314
|
+
* 添加或者更新标记点
|
|
315
|
+
*
|
|
316
|
+
* @param {string} text 标记点的文本
|
|
317
|
+
* @param {ITPoint} point 标记点的坐标
|
|
318
|
+
* @param {string} id 标记点的id
|
|
319
|
+
* @param {*} [attributes={}] 标记点的属性
|
|
320
|
+
* @returns
|
|
321
|
+
* @memberof sketchViewTool
|
|
322
|
+
*/
|
|
323
|
+
addOrUpdateMarkPoint(t, e, i, s = {}) {
|
|
324
|
+
if (this.drawPointGraphic.has(i)) {
|
|
325
|
+
const o = this.drawPointGraphic.get(i);
|
|
326
|
+
this.textGraphicsLayer.remove(o);
|
|
327
|
+
const n = this.createTextGraphic(t, e, {
|
|
328
|
+
...s,
|
|
329
|
+
id: i
|
|
330
|
+
});
|
|
331
|
+
this.drawPointGraphic.set(i, n), this.textGraphicsLayer.add(n);
|
|
332
|
+
return;
|
|
333
|
+
}
|
|
334
|
+
const r = this.createTextGraphic(t, e, {
|
|
335
|
+
...s,
|
|
336
|
+
id: i
|
|
337
|
+
});
|
|
338
|
+
this.drawPointGraphic.set(i, r), this.textGraphicsLayer.add(r);
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* 获取图形的点位
|
|
342
|
+
*
|
|
343
|
+
* @param {__esri.Geometry} geometry
|
|
344
|
+
* @returns
|
|
345
|
+
* @memberof sketchViewTool
|
|
346
|
+
*/
|
|
347
|
+
getGeometryXY(t, e = 0) {
|
|
348
|
+
const i = t == null ? void 0 : t.paths[0];
|
|
349
|
+
return {
|
|
350
|
+
x: i[e][0],
|
|
351
|
+
y: i[e][1]
|
|
352
|
+
};
|
|
353
|
+
}
|
|
354
|
+
/**
|
|
355
|
+
* 创建文本图形
|
|
356
|
+
*
|
|
357
|
+
* @param {string} text 文本
|
|
358
|
+
* @param {{ x: number; y: number }} point 坐标
|
|
359
|
+
* @param {*} [attributes={}] 属性
|
|
360
|
+
* @returns
|
|
361
|
+
* @memberof sketchViewTool
|
|
362
|
+
*/
|
|
363
|
+
createTextGraphic(t, e, i = {}) {
|
|
364
|
+
return new m({
|
|
365
|
+
geometry: {
|
|
366
|
+
//@ts-ignore
|
|
367
|
+
type: "point",
|
|
368
|
+
x: e.x,
|
|
369
|
+
y: e.y
|
|
370
|
+
},
|
|
371
|
+
symbol: {
|
|
372
|
+
//@ts-ignore
|
|
373
|
+
type: "text",
|
|
374
|
+
text: t,
|
|
375
|
+
color: "white",
|
|
376
|
+
haloColor: "black",
|
|
377
|
+
haloSize: "1px",
|
|
378
|
+
xoffset: 3,
|
|
379
|
+
yoffset: 3
|
|
380
|
+
},
|
|
381
|
+
attributes: {
|
|
382
|
+
...i
|
|
383
|
+
}
|
|
384
|
+
});
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* 获取当前绘制的图形的长度
|
|
388
|
+
* @returns
|
|
389
|
+
*/
|
|
390
|
+
getDrawGraphicLength() {
|
|
391
|
+
return this.drawStartGraphic ? this.calculateDistance(this.drawStartGraphic, "meters").toFixed(2) : 0;
|
|
392
|
+
}
|
|
393
|
+
/**
|
|
394
|
+
* 获取两点的角度
|
|
395
|
+
*
|
|
396
|
+
* @param {ITPoint} startPoint
|
|
397
|
+
* @param {ITPoint} endPoint
|
|
398
|
+
* @returns
|
|
399
|
+
* @memberof SketchView
|
|
400
|
+
*/
|
|
401
|
+
getAngle(t, e) {
|
|
402
|
+
const i = e.x - t.x, s = e.y - t.y;
|
|
403
|
+
return Math.atan2(s, i) * 180 / Math.PI;
|
|
404
|
+
}
|
|
405
|
+
/**
|
|
406
|
+
* 获取两点的方位角
|
|
407
|
+
*
|
|
408
|
+
* @param {ITPoint} startPoint
|
|
409
|
+
* @param {ITPoint} endPoint
|
|
410
|
+
* @returns
|
|
411
|
+
* @memberof sketchViewTool
|
|
412
|
+
*/
|
|
413
|
+
getBearing(t, e) {
|
|
414
|
+
return c.bearing(
|
|
415
|
+
c.point([t.x, t.y]),
|
|
416
|
+
c.point([e.x, e.y])
|
|
417
|
+
);
|
|
418
|
+
}
|
|
419
|
+
/**
|
|
420
|
+
* 获取两点的距离
|
|
421
|
+
* @param startPoint
|
|
422
|
+
* @param endPoint
|
|
423
|
+
* @param units
|
|
424
|
+
* @returns
|
|
425
|
+
*/
|
|
426
|
+
getPointLength(t, e = "meters") {
|
|
427
|
+
const i = new g({
|
|
428
|
+
paths: [t]
|
|
429
|
+
});
|
|
430
|
+
return y.geodesicLength(i, e);
|
|
431
|
+
}
|
|
432
|
+
/**
|
|
433
|
+
* 获取多个点的中心点
|
|
434
|
+
*
|
|
435
|
+
* @param {ITPoint[]} points
|
|
436
|
+
* @returns
|
|
437
|
+
* @memberof sketchViewTool
|
|
438
|
+
*/
|
|
439
|
+
featureCollection(t) {
|
|
440
|
+
const e = c.featureCollection(
|
|
441
|
+
t.map((s) => c.point([s.x, s.y]))
|
|
442
|
+
);
|
|
443
|
+
return c.center(e);
|
|
444
|
+
}
|
|
445
|
+
/**
|
|
446
|
+
* 获取两点的中心点
|
|
447
|
+
*
|
|
448
|
+
* @param {ITPoint} startPoint
|
|
449
|
+
* @param {ITPoint} endPoint
|
|
450
|
+
* @returns
|
|
451
|
+
* @memberof sketchViewTool
|
|
452
|
+
*/
|
|
453
|
+
midpoint(t, e) {
|
|
454
|
+
return c.midpoint(
|
|
455
|
+
c.point([t.x, t.y]),
|
|
456
|
+
c.point([e.x, e.y])
|
|
457
|
+
);
|
|
458
|
+
}
|
|
459
|
+
/**
|
|
460
|
+
* 获取方向
|
|
461
|
+
*
|
|
462
|
+
* @param {ITPoint} startPoint 起点
|
|
463
|
+
* @param {ITPoint} endPoint 终点
|
|
464
|
+
* @returns
|
|
465
|
+
* @memberof SketchView
|
|
466
|
+
*/
|
|
467
|
+
getDirection(t, e) {
|
|
468
|
+
const i = e.x - t.x, s = e.y - t.y, o = Math.atan2(s, i) * 180 / Math.PI;
|
|
469
|
+
return o >= -45 && o <= 45 ? 0 : o > 45 && o <= 135 ? 1 : o > 135 || o <= -135 ? 2 : 3;
|
|
470
|
+
}
|
|
471
|
+
findLayerById(t) {
|
|
472
|
+
return this.viewer.map.findLayerById(t);
|
|
473
|
+
}
|
|
474
|
+
/**
|
|
475
|
+
* 开启图层捕捉
|
|
476
|
+
*/
|
|
477
|
+
turnOnLayerSnap() {
|
|
478
|
+
this.sketchViewModel.snappingOptions.enabled = !0;
|
|
479
|
+
}
|
|
480
|
+
/**
|
|
481
|
+
* 关闭图层捕捉
|
|
482
|
+
*/
|
|
483
|
+
turnOffLayerSnap() {
|
|
484
|
+
this.sketchViewModel.snappingOptions.enabled = !1;
|
|
485
|
+
}
|
|
486
|
+
setDimensionType(t) {
|
|
487
|
+
this.dimensionType = t;
|
|
488
|
+
}
|
|
489
|
+
/**
|
|
490
|
+
* 删除指定的图形
|
|
491
|
+
* @param graphic 删除指定的图形
|
|
492
|
+
*/
|
|
493
|
+
remove(t) {
|
|
494
|
+
this.graphicsLayer.remove(t);
|
|
495
|
+
}
|
|
496
|
+
destroy() {
|
|
497
|
+
var t, e;
|
|
498
|
+
this.viewer.map.remove(this.graphicsLayer), this.viewer.map.remove(this.textGraphicsLayer), (t = this.sketch) == null || t.destroy(), (e = this.sketchViewModel) == null || e.destroy();
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
export {
|
|
502
|
+
$ as default
|
|
503
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { default as OlMap } from 'ol/Map';
|
|
2
|
+
import type { EventsKey } from 'ol/events';
|
|
3
|
+
import { ILayerVisibleParams, ISetMapCameraParams, ISetMapCenterParams, IShowSignalCrossParams } from '../types';
|
|
4
|
+
import OlMapInitializer from './utils/ol-map-initializer';
|
|
5
|
+
import SignalCrossController from './utils/signal-control/signal-cross-controller';
|
|
6
|
+
declare const _sfc_main: import("vue").DefineComponent<{
|
|
7
|
+
config: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
required: true;
|
|
10
|
+
};
|
|
11
|
+
assetsRoot: {
|
|
12
|
+
type: StringConstructor;
|
|
13
|
+
required: false;
|
|
14
|
+
};
|
|
15
|
+
}, {
|
|
16
|
+
mapContainer: import("vue").Ref<any>;
|
|
17
|
+
mapInitializer: OlMapInitializer;
|
|
18
|
+
map: OlMap;
|
|
19
|
+
viewEventKeys: EventsKey[];
|
|
20
|
+
lastEmittedZoomInt: number | null;
|
|
21
|
+
emitZoomIfChanged: (z: number) => void;
|
|
22
|
+
signalCrossController: SignalCrossController;
|
|
23
|
+
setMapCenter: (params: ISetMapCenterParams) => Promise<import("../types").IResult>;
|
|
24
|
+
setMapCamera: (params: ISetMapCameraParams) => Promise<import("../types").IResult>;
|
|
25
|
+
setLayerVisibility: (params: ILayerVisibleParams) => Promise<import("../types").IResult>;
|
|
26
|
+
setMapZoom: (zoom: number) => import("../types").IResult;
|
|
27
|
+
showSignalCross: (params: IShowSignalCrossParams) => import("../types").IResult;
|
|
28
|
+
changeSignalCrossShowName: (showName: 'detail' | 'crossName' | 'signalId') => void | {
|
|
29
|
+
success: boolean;
|
|
30
|
+
message: string;
|
|
31
|
+
};
|
|
32
|
+
clearSignalCross: () => void;
|
|
33
|
+
props: any;
|
|
34
|
+
emit: (event: "mapLoaded" | "markerClick" | "mapClick" | "update:zoom", ...args: any[]) => void;
|
|
35
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mapLoaded" | "markerClick" | "mapClick" | "update:zoom")[], "mapLoaded" | "markerClick" | "mapClick" | "update:zoom", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
36
|
+
config: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
required: true;
|
|
39
|
+
};
|
|
40
|
+
assetsRoot: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
required: false;
|
|
43
|
+
};
|
|
44
|
+
}>> & {
|
|
45
|
+
onMapLoaded?: ((...args: any[]) => any) | undefined;
|
|
46
|
+
onMarkerClick?: ((...args: any[]) => any) | undefined;
|
|
47
|
+
onMapClick?: ((...args: any[]) => any) | undefined;
|
|
48
|
+
"onUpdate:zoom"?: ((...args: any[]) => any) | undefined;
|
|
49
|
+
}, {}, {}>;
|
|
50
|
+
export default _sfc_main;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { defineComponent as x, ref as z, onMounted as E, getCurrentInstance as I, onBeforeUnmount as V, openBlock as B, createElementBlock as L, createElementVNode as N } from "vue";
|
|
2
|
+
import { unByKey as R } from "ol/Observable";
|
|
3
|
+
import { registerStore as K } from "../stores/index.mjs";
|
|
4
|
+
import j from "./utils/ol-map-initializer.mjs";
|
|
5
|
+
import A from "./utils/signal-control/signal-cross-controller.mjs";
|
|
6
|
+
const F = { class: "gis-viewer" }, D = /* @__PURE__ */ x({
|
|
7
|
+
__name: "gis-map-ol",
|
|
8
|
+
props: {
|
|
9
|
+
config: {},
|
|
10
|
+
assetsRoot: {}
|
|
11
|
+
},
|
|
12
|
+
emits: ["mapLoaded", "markerClick", "mapClick", "update:zoom"],
|
|
13
|
+
setup(C, { expose: u, emit: f }) {
|
|
14
|
+
const i = z(null);
|
|
15
|
+
let o, n, a = [], l = null;
|
|
16
|
+
const c = (e) => {
|
|
17
|
+
if (!Number.isFinite(e))
|
|
18
|
+
return;
|
|
19
|
+
const s = Math.round(e);
|
|
20
|
+
s !== l && (l = s, r("update:zoom", s));
|
|
21
|
+
};
|
|
22
|
+
let t;
|
|
23
|
+
E(async () => {
|
|
24
|
+
K();
|
|
25
|
+
const e = I(), { $gisviewerAssetsRoot: s } = e.appContext.config.globalProperties, p = await (await fetch(m.config)).json();
|
|
26
|
+
p.assetsRoot = m.assetsRoot || s, o = new j(), n = o.initialize({
|
|
27
|
+
container: i.value,
|
|
28
|
+
mapConfig: p,
|
|
29
|
+
markerClickCallback: (S, _, Z, b) => {
|
|
30
|
+
r("markerClick", S, _, Z, b);
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
const g = n.getView();
|
|
34
|
+
a.push(
|
|
35
|
+
g.on("change:resolution", () => {
|
|
36
|
+
c(g.getZoom());
|
|
37
|
+
})
|
|
38
|
+
), c(n.getView().getZoom()), r("mapLoaded");
|
|
39
|
+
});
|
|
40
|
+
const d = async (e) => await o.setMapCenter(e), w = async (e) => await o.setMapCamera(e), h = async (e) => await o.setLayerVisibility(e), y = (e) => o.setMapZoom({ zoom: e }), k = (e) => (t || (t = new A(n)), t.showSignalCross(e)), v = (e) => t ? t.changeShowName(e) : { success: !1, message: "SignalCrossController未初始化" }, M = () => {
|
|
41
|
+
t && t.clearSignalCross();
|
|
42
|
+
};
|
|
43
|
+
V(() => {
|
|
44
|
+
a.forEach((e) => R(e)), a = [];
|
|
45
|
+
});
|
|
46
|
+
const m = C, r = f;
|
|
47
|
+
return u({
|
|
48
|
+
setMapCenter: d,
|
|
49
|
+
setMapCamera: w,
|
|
50
|
+
setMapZoom: y,
|
|
51
|
+
setLayerVisibility: h,
|
|
52
|
+
showSignalCross: k,
|
|
53
|
+
clearSignalCross: M,
|
|
54
|
+
changeSignalCrossShowName: v
|
|
55
|
+
}), (e, s) => (B(), L("div", F, [
|
|
56
|
+
N("div", {
|
|
57
|
+
id: "divCMap",
|
|
58
|
+
class: "gis-viewer-main",
|
|
59
|
+
ref_key: "mapContainer",
|
|
60
|
+
ref: i
|
|
61
|
+
}, null, 512)
|
|
62
|
+
]));
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
export {
|
|
66
|
+
D as default
|
|
67
|
+
};
|
|
@@ -1,2 +1,45 @@
|
|
|
1
|
-
export declare const GisMapOl:
|
|
1
|
+
export declare const GisMapOl: import("@easyest/utils/dist/lib/withinstall").SFCWithInstall<import("vue").DefineComponent<{
|
|
2
|
+
config: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
assetsRoot: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
required: false;
|
|
9
|
+
};
|
|
10
|
+
}, {
|
|
11
|
+
mapContainer: import("vue").Ref<any>;
|
|
12
|
+
mapInitializer: import("./utils/ol-map-initializer").default;
|
|
13
|
+
map: import("ol/Map").default;
|
|
14
|
+
viewEventKeys: import("ol/events").EventsKey[];
|
|
15
|
+
lastEmittedZoomInt: number | null;
|
|
16
|
+
emitZoomIfChanged: (z: number) => void;
|
|
17
|
+
signalCrossController: import("./utils/signal-control/signal-cross-controller").default;
|
|
18
|
+
setMapCenter: (params: import("../types").ISetMapCenterParams) => Promise<import("../types").IResult>;
|
|
19
|
+
setMapCamera: (params: import("../types").ISetMapCameraParams) => Promise<import("../types").IResult>;
|
|
20
|
+
setLayerVisibility: (params: import("../types").ILayerVisibleParams) => Promise<import("../types").IResult>;
|
|
21
|
+
setMapZoom: (zoom: number) => import("../types").IResult;
|
|
22
|
+
showSignalCross: (params: import("../types").IShowSignalCrossParams) => import("../types").IResult;
|
|
23
|
+
changeSignalCrossShowName: (showName: "detail" | "crossName" | "signalId") => void | {
|
|
24
|
+
success: boolean;
|
|
25
|
+
message: string;
|
|
26
|
+
};
|
|
27
|
+
clearSignalCross: () => void;
|
|
28
|
+
props: any;
|
|
29
|
+
emit: (event: "mapLoaded" | "markerClick" | "mapClick" | "update:zoom", ...args: any[]) => void;
|
|
30
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mapLoaded" | "markerClick" | "mapClick" | "update:zoom")[], "mapLoaded" | "markerClick" | "mapClick" | "update:zoom", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
31
|
+
config: {
|
|
32
|
+
type: StringConstructor;
|
|
33
|
+
required: true;
|
|
34
|
+
};
|
|
35
|
+
assetsRoot: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
required: false;
|
|
38
|
+
};
|
|
39
|
+
}>> & {
|
|
40
|
+
onMapLoaded?: ((...args: any[]) => any) | undefined;
|
|
41
|
+
onMarkerClick?: ((...args: any[]) => any) | undefined;
|
|
42
|
+
onMapClick?: ((...args: any[]) => any) | undefined;
|
|
43
|
+
"onUpdate:zoom"?: ((...args: any[]) => any) | undefined;
|
|
44
|
+
}, {}, {}>>;
|
|
2
45
|
export default GisMapOl;
|