gisviewer-vue3-arcgis 1.0.212 → 1.0.213
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as L from "@arcgis/core/geometry/geometryEngine.js";
|
|
2
|
+
import G from "@arcgis/core/geometry/Polygon";
|
|
3
|
+
import P from "@arcgis/core/geometry/Polyline";
|
|
2
4
|
import * as g from "@arcgis/core/geometry/support/webMercatorUtils.js";
|
|
3
5
|
import l from "@arcgis/core/Graphic";
|
|
4
6
|
import f from "@arcgis/core/layers/GraphicsLayer";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import S from "@arcgis/core/geometry/Polygon.js";
|
|
8
|
-
import k from "@arcgis/core/geometry/Polyline.js";
|
|
7
|
+
import k from "@arcgis/core/widgets/Sketch";
|
|
8
|
+
import S from "@arcgis/core/widgets/Sketch/SketchViewModel";
|
|
9
9
|
import * as d from "@turf/helpers";
|
|
10
10
|
import b from "@turf/intersect";
|
|
11
11
|
import { v4 as M } from "uuid";
|
|
@@ -56,10 +56,30 @@ class C {
|
|
|
56
56
|
this.viewer = t, this.options = {
|
|
57
57
|
...x,
|
|
58
58
|
...e
|
|
59
|
-
}, this.graphicsLayer = new f({ ...this.options.GraphicsLayer }), this.TextGraphicsLayer = new f(), this.viewer.map.
|
|
59
|
+
}, this.graphicsLayer = new f({ ...this.options.GraphicsLayer }), this.TextGraphicsLayer = new f(), this.viewer.map.addMany([this.graphicsLayer, this.TextGraphicsLayer]), this.init();
|
|
60
|
+
}
|
|
61
|
+
updateSketch(t) {
|
|
62
|
+
const e = new l({
|
|
63
|
+
geometry: {
|
|
64
|
+
type: "polygon",
|
|
65
|
+
rings: [t]
|
|
66
|
+
},
|
|
67
|
+
symbol: {
|
|
68
|
+
type: "simple-fill",
|
|
69
|
+
color: [227, 139, 79, 0.4],
|
|
70
|
+
outline: {
|
|
71
|
+
color: [255, 255, 255],
|
|
72
|
+
width: 1
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
this.graphicsLayer.add(e), this.sketchViewModel.update([e], {
|
|
77
|
+
tool: "reshape",
|
|
78
|
+
enableRotation: !0
|
|
79
|
+
});
|
|
60
80
|
}
|
|
61
81
|
init() {
|
|
62
|
-
this.sketchViewModel = new
|
|
82
|
+
this.sketchViewModel = new S({
|
|
63
83
|
layer: this.graphicsLayer,
|
|
64
84
|
view: this.viewer,
|
|
65
85
|
updateOnGraphicClick: !0,
|
|
@@ -68,7 +88,7 @@ class C {
|
|
|
68
88
|
...this.options.sketchViewModelItemSymbol
|
|
69
89
|
});
|
|
70
90
|
const t = this.findLayerById("TrafficMarkings"), e = [];
|
|
71
|
-
t && e.push({ layer: t, enabled: !0 }), this.sketch = new
|
|
91
|
+
t && e.push({ layer: t, enabled: !0 }), this.sketch = new k({
|
|
72
92
|
view: this.viewer,
|
|
73
93
|
viewModel: this.sketchViewModel,
|
|
74
94
|
layer: this.graphicsLayer,
|
|
@@ -159,7 +179,7 @@ class C {
|
|
|
159
179
|
}), i;
|
|
160
180
|
}
|
|
161
181
|
createPolylineGraphic(t, e, i) {
|
|
162
|
-
const s = new
|
|
182
|
+
const s = new P({
|
|
163
183
|
paths: t
|
|
164
184
|
}), r = g.geographicToWebMercator(s);
|
|
165
185
|
return new l({
|
|
@@ -171,7 +191,7 @@ class C {
|
|
|
171
191
|
});
|
|
172
192
|
}
|
|
173
193
|
createPolygonGraphic(t, e, i) {
|
|
174
|
-
const s = new
|
|
194
|
+
const s = new G({
|
|
175
195
|
rings: t
|
|
176
196
|
}), r = g.geographicToWebMercator(s);
|
|
177
197
|
return new l({
|
|
@@ -208,7 +228,7 @@ class C {
|
|
|
208
228
|
t && t("update", o, i);
|
|
209
229
|
}
|
|
210
230
|
}), this.sketchViewModel.on("delete", function(i) {
|
|
211
|
-
if (console.log("delete", i
|
|
231
|
+
if (console.log("delete", i), i.graphics.length > 0) {
|
|
212
232
|
const r = i.graphics[0].geometry, o = e.getGraphicPoint(r);
|
|
213
233
|
t && t("delete", o, i);
|
|
214
234
|
}
|
|
@@ -332,7 +352,7 @@ class C {
|
|
|
332
352
|
* @returns
|
|
333
353
|
* @memberof SketchView
|
|
334
354
|
*/
|
|
335
|
-
getGraphicPoint(t, e = !
|
|
355
|
+
getGraphicPoint(t, e = !1) {
|
|
336
356
|
let i = t;
|
|
337
357
|
this.viewer.spatialReference.isWebMercator && (i = g.webMercatorToGeographic(t));
|
|
338
358
|
let s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@arcgis/core/geometry/geometryEngine.js"),P=require("@arcgis/core/geometry/
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@arcgis/core/geometry/geometryEngine.js"),P=require("@arcgis/core/geometry/Polygon"),G=require("@arcgis/core/geometry/Polyline"),S=require("@arcgis/core/geometry/support/webMercatorUtils.js"),l=require("@arcgis/core/Graphic"),d=require("@arcgis/core/layers/GraphicsLayer"),k=require("@arcgis/core/widgets/Sketch"),M=require("@arcgis/core/widgets/Sketch/SketchViewModel"),A=require("@turf/helpers"),x=require("@turf/intersect"),v=require("uuid"),E=require("../stores/index.js");function f(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const V=f(b),g=f(S),u=f(A);function w(a,e=[]){if(a===null||typeof a!="object")return a;if(Object.prototype.toString.call(a)==="[object Date]")return new Date(a);if(Object.prototype.toString.call(a)==="[object RegExp]")return new RegExp(a);if(Object.prototype.toString.call(a)==="[object Error]")return new Error(a);const t=e.filter(s=>s.original===a)[0];if(t)return t.copy;const i=Array.isArray(a)?[]:{};return e.push({original:a,copy:i}),Object.keys(a).forEach(s=>{i[s]=w(a[s],e)}),i}const O={maxAllowedGraphics:0,GraphicsLayer:{},sketchVisibleElements:{},sketchPosition:"top-right",defaultSketchVisible:!0,sketchViewModelItemSymbol:{}},m={type:"simple-line",color:"#556DEA",width:2},y={type:"simple-fill",color:[227,139,79,.4],outline:{color:[255,255,255],width:1}};class D{constructor(e,t){this.viewer=e,this.options={...O,...t},this.graphicsLayer=new d({...this.options.GraphicsLayer}),this.TextGraphicsLayer=new d,this.viewer.map.addMany([this.graphicsLayer,this.TextGraphicsLayer]),this.init()}updateSketch(e){const t=new l({geometry:{type:"polygon",rings:[e]},symbol:{type:"simple-fill",color:[227,139,79,.4],outline:{color:[255,255,255],width:1}}});this.graphicsLayer.add(t),this.sketchViewModel.update([t],{tool:"reshape",enableRotation:!0})}init(){this.sketchViewModel=new M({layer:this.graphicsLayer,view:this.viewer,updateOnGraphicClick:!0,polylineSymbol:m,polygonSymbol:y,...this.options.sketchViewModelItemSymbol});const e=this.findLayerById("TrafficMarkings"),t=[];e&&t.push({layer:e,enabled:!0}),this.sketch=new k({view:this.viewer,viewModel:this.sketchViewModel,layer:this.graphicsLayer,visible:this.options.defaultSketchVisible,creationMode:this.options.creationMode||"single",snappingOptions:{enabled:!0,featureSources:t}}),this.sketch.visibleElements={...this.options.sketchVisibleElements},this.viewer.ui.add(this.sketch,this.options.sketchPosition);const i=E.default.useAppDataStore;this.sketch.on("create",s=>{s.state==="complete"?i.isSketching=!1:s.state==="start"&&(i.isSketching=!0)})}initPoint(e,t="all",i=!1){if(!e)return;const{crossArea:s,sectionArea:r}=e;if(s&&(t=="crossArea"||t=="all")){const o=this.initCrossArea(s);this.graphicsLayer.add(o)}if(r&&(t=="sectionArea"||t=="all")){const o=this.initSectionArea(r,i);this.graphicsLayer.addMany(o)}}initEntranceFusionZone(e){const t=[];e.map(i=>{t.push(this.createPolygonGraphic(i,y,{}))}),this.graphicsLayer.addMany(t)}initCrossArea(e){return this.createPolygonGraphic(e,y,{})}initSectionArea(e,t=!1){const i=[],s={type:"simple-line",color:[0,0,255],width:2};return Object.keys(e).map(r=>{const o=e[r][0],c=e[r][1];t&&(o.reverse(),c.reverse());const n=v.v4(),h=this.createPolylineGraphic(o,m,{type:"draw",id:n}),p=this.createPolylineGraphic(c,s,{type:"shiftLine",id:n});i.push(h,p)}),i}createPolylineGraphic(e,t,i){const s=new G({paths:e}),r=g.geographicToWebMercator(s);return new l({geometry:r,symbol:t,attributes:i})}createPolygonGraphic(e,t,i){const s=new P({rings:e}),r=g.geographicToWebMercator(s);return new l({geometry:r,symbol:t,attributes:i})}on(e){const t=this;this.sketchViewModel.on("create",function(i){var r,o,c;const s=t.graphicsLayer.graphics;if((r=t.options)!=null&&r.maxAllowedGraphics&&s.length>((o=t.options)==null?void 0:o.maxAllowedGraphics)){t.graphicsLayer.remove(i.graphic),console.log("已达到最大图形数量，无法继续绘制！");return}if(i.state==="complete"&&((c=i.graphic)!=null&&c.geometry)){const n=i.graphic.geometry;i.graphic.setAttribute("type","draw"),i.graphic.setAttribute("id",new Date().getTime());const h=t.getGraphicPoint(n);e&&e("create",h,i)}}),this.sketchViewModel.on("update",function(i){if(i.aborted){const s=i.graphics[0];t.graphicsLayer.remove(s);return}if(i.state==="complete"&&i.graphics.length>0){const r=i.graphics[0].geometry,o=t.getGraphicPoint(r);e&&e("update",o,i)}}),this.sketchViewModel.on("delete",function(i){if(console.log("delete",i),i.graphics.length>0){const r=i.graphics[0].geometry,o=t.getGraphicPoint(r);e&&e("delete",o,i)}})}graphicPoint(){const e=[];return this.graphicsLayer.graphics.map(t=>{var r;const i=t.geometry,s=this.getGraphicPoint(i);e.push({point:s,type:(r=t.attributes)==null?void 0:r.type,attributes:t.attributes})}),e}getEntranceRoad(){const e={},t=this.graphicPoint().filter(n=>n.point.type==="polyline");if(console.log("🚀 ~ file: sketchView.ts:378 ~ SketchView ~ getEntranceRoad ~ graphics:",t),!t.length)return!1;const i=t.filter(n=>n.type=="draw"),s=t.filter(n=>n.type=="shiftLine");if(s.length==0)throw"未绘制平移！";if(i.length!=s.length)throw"绘制的线和平移的线数量不一致！";const r=i.sort((n,h)=>n.point.angle-h.point.angle),o=r.findIndex(n=>n.point.angle>135);return[...r.slice(o),...r.slice(0,o).reverse()].map((n,h)=>{const p=s.find(L=>L.attributes.id==n.attributes.id);if(!p)throw"绘制的线和平移的线不匹配！";console.log("🚀 ~ file: sketchView.ts:393 ~ SketchView ~ getEntranceRoad ~ m:",n,p),e[h+1]={0:[n.point.paths[0],n.point.paths[n.point.paths.length-1]],1:[p.point.paths[0],p.point.paths[p.point.paths.length-1]]}}),e}getEntranceFusionZone(e){const t=[],i={};this.graphicsLayer.graphics.map(r=>{var n;const o=r.geometry,c=this.getGraphicPoint(o,!1);t.push({point:c,type:(n=r.attributes)==null?void 0:n.type,attributes:r.attributes})});const s=t;return e.map((r,o)=>{i[r]=t[o]}),{graphics:i,rawData:s}}getIntersectionArea(e,t){const i=Object.keys(e);let s=!1;for(let r=0;r<i.length;r++){const o=i[r],c=e[o];if(x(u.polygon(t),u.polygon(c))){s=o;break}}return s}filterData(e){const t=w(e);return t.length>0&&t[0][0]===t[t.length-1][0]&&t[0][1]===t[t.length-1][1]&&t.pop(),t}getGraphicPoint(e,t=!1){let i=e;this.viewer.spatialReference.isWebMercator&&(i=g.webMercatorToGeographic(e));let s;if(e.type==="point")s={type:e.type,x:i.x,y:i.y};else if(e.type==="polyline"){s={type:e.type,paths:[]},i.paths.forEach(n=>{let h=n;t&&(h=this.filterData(n)),h.forEach(p=>{s.paths.push(p)})});const r={x:s.paths[0][0],y:s.paths[0][1]},o={x:s.paths[s.paths.length-1][0],y:s.paths[s.paths.length-1][1]},c=this.getAngle(r,o);s.angle=c}else e.type==="polygon"&&(s={type:e.type,rings:[]},i.rings.forEach(r=>{let o=r;t&&(o=this.filterData(r)),o.forEach(c=>{s.rings.push(c)})}));return s}close(){this.sketch.visible=!1}show(){this.sketch.visible=!0}removeAll(){this.graphicsLayer.removeAll()}getAngle(e,t){const i=t.x-e.x,s=t.y-e.y;return Math.atan2(s,i)*180/Math.PI}getShiftLine(e,t,i="meters"){const s=e,r=-t;return V.offset(s,r,i)}setShiftLine(e,t="meters",i){i||(i={type:"simple-line",color:[0,0,255],width:2}),this.removeShiftLine(),this.graphicsLayer.graphics.map(s=>{const r=s.geometry,o=s.attributes;if((r==null?void 0:r.type)==="polyline"&&(o==null?void 0:o.type)==="draw"){const c=o.id,n=this.getShiftLine(r,e,t),h=new l({geometry:n,symbol:i,attributes:{type:"shiftLine",id:c}});this.graphicsLayer.add(h)}})}removeShiftLine(){const e=[];this.graphicsLayer.graphics.map(t=>{const i=t.attributes;(i==null?void 0:i.type)==="shiftLine"&&e.push(t)}),this.graphicsLayer.removeMany(e)}removeDraw(){const e=[];this.graphicsLayer.graphics.map(t=>{const i=t.attributes;(i==null?void 0:i.type)==="draw"&&e.push(t)}),this.graphicsLayer.removeMany(e)}addGraphic(e,t={type:"simple-line",color:[0,0,255],width:2},i){const s=new l({geometry:e,symbol:t,attributes:i});this.graphicsLayer.add(s)}getDirection(e,t){const i=t.x-e.x,s=t.y-e.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(e){return this.viewer.map.findLayerById(e)}findShiftLineGraphicsById(e){return this.graphicsLayer.graphics.find(i=>i.attributes.id===e&&i.attributes.type==="shiftLine")}remove(e){this.graphicsLayer.remove(e)}setMaxAllowedGraphics(e){this.options.maxAllowedGraphics=e===0?void 0:e}destroy(){var e,t;this.viewer.map.remove(this.graphicsLayer),this.viewer.map.remove(this.TextGraphicsLayer),(e=this.sketch)==null||e.destroy(),(t=this.sketchViewModel)==null||t.destroy()}}exports.default=D;
|