gisviewer-vue3-arcgis 1.0.166 → 1.0.168
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/src/gis-map/gis-map.vue.d.ts +24 -4
- package/es/src/gis-map/gis-map.vue.mjs +144 -138
- package/es/src/gis-map/index.d.ts +24 -4
- package/es/src/gis-map/utils/common-utils.mjs +9 -9
- package/es/src/gis-map/utils/holo-flow/index.mjs +37 -36
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts +17 -1
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.mjs +2 -2
- package/es/src/gis-map/utils/holo-flow/signal-countdown-panel.vue2.mjs +41 -39
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.d.ts +3 -0
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.mjs +117 -71
- package/es/src/gis-map/utils/holo-flow/signal-holo-flow.mjs +6 -5
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts +2 -1
- package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs +10 -9
- package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs +6 -5
- package/es/src/gis-map/utils/map-initializer.d.ts +1 -0
- package/es/src/gis-map/utils/map-initializer.mjs +121 -122
- package/es/src/gis-map/utils/signal-control-area-controller/index.d.ts +3 -1
- package/es/src/gis-map/utils/signal-control-area-controller/index.mjs +169 -67
- package/es/src/types/index.d.ts +2 -0
- package/es/style.css +1 -1
- package/lib/src/gis-map/gis-map.vue.d.ts +24 -4
- package/lib/src/gis-map/gis-map.vue.js +1 -1
- package/lib/src/gis-map/index.d.ts +24 -4
- package/lib/src/gis-map/utils/common-utils.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/index.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts +17 -1
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue2.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.d.ts +3 -0
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow-lsr.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/signal-holo-flow.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts +2 -1
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js +1 -1
- package/lib/src/gis-map/utils/holo-flow/trace-renderer-layer.js +1 -1
- package/lib/src/gis-map/utils/map-initializer.d.ts +1 -0
- package/lib/src/gis-map/utils/map-initializer.js +1 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/index.d.ts +3 -1
- package/lib/src/gis-map/utils/signal-control-area-controller/index.js +1 -1
- package/lib/src/types/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../types/index.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),t=require("../../../types/index.js"),s=require("../../stores/index.js"),n=require("./signal-holo-flow.js"),c=require("./signal-holo-flow-lsr.js"),r=require("./trace-holo-flow.js");class h{constructor(e){this.view=e}async init(){this.traceHoloFlow=new r.default(this.view),await this.traceHoloFlow.init()}handleVehicleTraceData(e){this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():this.traceHoloFlow.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():this.traceHoloFlow.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){this.traceHoloFlow.clearTrace()}toggleTrafficInfo(e){this.traceHoloFlow.toggleTrafficInfo(e)}togglePause(e){this.traceHoloFlow.togglePause(e)}updatePanelContent(e){let o=t.EVehiclePlateState.None;switch(e){case"none":o=t.EVehiclePlateState.None;break;case"plateNumber":o=t.EVehiclePlateState.PlateNumber;break;case"vehicleId":o=t.EVehiclePlateState.Id;break;case"mix":o=t.EVehiclePlateState.Mix;break}this.traceHoloFlow.updatePanelContent(o)}async handleSignalData(e){var o,l;if(!this.signalHoloFlow){const a=s.default.useAppDataStore;((l=(o=i.toRaw(a.mapConfig).holoFlow)==null?void 0:o.signal)==null?void 0:l.style)==="LSR"?this.signalHoloFlow=new c.default(this.view):this.signalHoloFlow=new n.default(this.view),await this.signalHoloFlow.initializeLayer()}await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){var e;(e=this.signalHoloFlow)==null||e.clearSignal()}setInterpolate(e){this.traceHoloFlow.setInterpolate(e)}downloadTrackLog(){this.traceHoloFlow.downloadLog()}}exports.default=h;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
declare const _sfc_main: import("vue").DefineComponent<{
|
|
2
|
+
displayMode: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
2
6
|
crossId: {
|
|
3
7
|
type: StringConstructor;
|
|
4
8
|
required: true;
|
|
@@ -15,6 +19,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
|
|
|
15
19
|
type: ArrayConstructor;
|
|
16
20
|
required: true;
|
|
17
21
|
};
|
|
22
|
+
scale: {
|
|
23
|
+
type: NumberConstructor;
|
|
24
|
+
required: true;
|
|
25
|
+
};
|
|
18
26
|
position: {
|
|
19
27
|
type: ObjectConstructor;
|
|
20
28
|
required: true;
|
|
@@ -51,8 +59,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
|
|
|
51
59
|
rNumberStyle: import("vue").ComputedRef<{
|
|
52
60
|
color: string;
|
|
53
61
|
}>;
|
|
54
|
-
getColorString: (color: string | undefined) => "red" | "
|
|
62
|
+
getColorString: (color: string | undefined) => "red" | "rgb(255, 192, 2)" | "lime" | "white";
|
|
55
63
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
64
|
+
displayMode: {
|
|
65
|
+
type: StringConstructor;
|
|
66
|
+
required: true;
|
|
67
|
+
};
|
|
56
68
|
crossId: {
|
|
57
69
|
type: StringConstructor;
|
|
58
70
|
required: true;
|
|
@@ -69,6 +81,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
|
|
|
69
81
|
type: ArrayConstructor;
|
|
70
82
|
required: true;
|
|
71
83
|
};
|
|
84
|
+
scale: {
|
|
85
|
+
type: NumberConstructor;
|
|
86
|
+
required: true;
|
|
87
|
+
};
|
|
72
88
|
position: {
|
|
73
89
|
type: ObjectConstructor;
|
|
74
90
|
required: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./signal-countdown-panel.vue2.js");require("./signal-countdown-panel.vue3.js");const t=require("../../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./signal-countdown-panel.vue2.js");require("./signal-countdown-panel.vue3.js");const t=require("../../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-f1172941"]]);exports.default=u;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g={key:0,class:"signal-countdown-container"},S=["src"],v={key:1,class:"signal-countdown-container"},y=["src"],N={key:2,class:"signal-countdown-container"},h=["src"],w={key:3,class:"signal-countdown-container"},V=["src"],C=e.defineComponent({__name:"signal-countdown-panel",props:{crossId:{},roadId:{},mapPoint:{},stopLine:{},position:{},rotation:{},lampStatus:{}},setup(n){const t=n,s=e.computed(()=>({top:`${t.position.top}px`,left:`${t.position.left}px`,"transform-origin":"bottom center",transform:`translateX(-50%) translateY(-100%) rotate(${t.rotation}deg)`})),a=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/u-${t.lampStatus.uColor}.png`),r=e.computed(()=>({color:l(t.lampStatus.uColor)})),c=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/l-${t.lampStatus.lColor}.png`),i=e.computed(()=>({color:l(t.lampStatus.lColor)})),m=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/s-${t.lampStatus.sColor}.png`),u=e.computed(()=>({color:l(t.lampStatus.sColor)})),d=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/r-${t.lampStatus.rColor}.png`),p=e.computed(()=>({color:l(t.lampStatus.rColor)})),l=o=>{switch(o){case"red":return"red";case"yellow":return"
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g={key:0,class:"signal-countdown-container"},S=["src"],v={key:1,class:"signal-countdown-container"},y=["src"],N={key:2,class:"signal-countdown-container"},h=["src"],w={key:3,class:"signal-countdown-container"},V=["src"],C=e.defineComponent({__name:"signal-countdown-panel",props:{displayMode:{},crossId:{},roadId:{},mapPoint:{},stopLine:{},scale:{},position:{},rotation:{},lampStatus:{}},setup(n){const t=n,s=e.computed(()=>({top:`${t.position.top}px`,left:`${t.position.left}px`,"transform-origin":"bottom center",transform:`translateX(-50%) translateY(-100%) rotate(${t.rotation}deg) scale(${t.scale})`})),a=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/u-${t.lampStatus.uColor}.png`),r=e.computed(()=>({color:l(t.lampStatus.uColor)})),c=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/l-${t.lampStatus.lColor}.png`),i=e.computed(()=>({color:l(t.lampStatus.lColor)})),m=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/s-${t.lampStatus.sColor}.png`),u=e.computed(()=>({color:l(t.lampStatus.sColor)})),d=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/r-${t.lampStatus.rColor}.png`),p=e.computed(()=>({color:l(t.lampStatus.rColor)})),l=o=>{switch(o){case"red":return"red";case"yellow":return"rgb(255, 192, 2)";case"green":return"lime";default:return"white"}};return(o,E)=>(e.openBlock(),e.createElementBlock("div",{class:"signal-countdown-panel",style:e.normalizeStyle(s.value)},[o.lampStatus.uColor?(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(r.value)},e.toDisplayString(o.lampStatus.uNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:a.value,width:"20px",height:"20px"},null,8,S)])])):e.createCommentVNode("",!0),o.lampStatus.lColor?(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(i.value)},e.toDisplayString(o.lampStatus.lNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:c.value,width:"20px",height:"20px"},null,8,y)])])):e.createCommentVNode("",!0),o.lampStatus.sColor?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(u.value)},e.toDisplayString(o.lampStatus.sNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:m.value,width:"20px",height:"20px"},null,8,h)])])):e.createCommentVNode("",!0),o.lampStatus.rColor!==void 0?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(p.value)},e.toDisplayString(o.lampStatus.rNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:d.value,width:"20px",height:"20px"},null,8,V)])])):e.createCommentVNode("",!0)],4))}});exports.default=C;
|
|
@@ -2,9 +2,12 @@ import SignalHoloFlow from './signal-holo-flow';
|
|
|
2
2
|
export default class LSRSignalHoloFlow extends SignalHoloFlow {
|
|
3
3
|
private stopLineLayer;
|
|
4
4
|
private store;
|
|
5
|
+
private watchHandle;
|
|
5
6
|
constructor(view: __esri.MapView | __esri.SceneView);
|
|
6
7
|
private stopLineMap;
|
|
7
8
|
initializeLayer(): Promise<void>;
|
|
9
|
+
private currentPanelScale;
|
|
10
|
+
private getPanelScale;
|
|
8
11
|
handleSignalData(data: any): Promise<void>;
|
|
9
12
|
clearSignal(): void;
|
|
10
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("@arcgis/core/core/reactiveUtils"),d=require("@arcgis/core/geometry"),m=require("@arcgis/core/layers/GraphicsLayer"),w=require("@turf/bearing"),y=require("@turf/destination"),L=require("@turf/helpers"),S=require("../../stores/index.js"),v=require("../common-utils.js"),M=require("./signal-holo-flow.js");function g(f){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const o in f)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(f,o);Object.defineProperty(e,o,r.get?r:{enumerable:!0,get:()=>f[o]})}}return e.default=f,Object.freeze(e)}const b=g(P),h=g(L);class x extends M.default{constructor(e){super(e),this.stopLineLayer=new m,this.store=S.default.useAppDataStore,this.watchHandle=null,this.stopLineMap=new Map,this.view.map.add(this.stopLineLayer)}async initializeLayer(){var p,c;console.time("初始化停止线图层");let e=(c=(p=this.mapConfig.holoFlow)==null?void 0:p.signal)==null?void 0:c.stopLineLayer;if(!e)return;e=this.mapConfig.assetsRoot+"/"+e,(await(await fetch(e)).json()).features.forEach(t=>{const{roadId:s,nodeId:n,angle:i,destinationPoint:a}=t.properties,{coordinates:l}=t.geometry,u=this.stopLineMap.get(n);u?u.set(s,{coord:l,panelPoint:a,angle:i}):this.stopLineMap.set(n,new Map([[s,{coord:l,panelPoint:a,angle:i}]]))}),console.timeEnd("初始化停止线图层")}getPanelScale(){const e=this.view.scale;let o=1;return e<1e3?o=1:e<2e3?o=.8:o=.4,o}async handleSignalData(e){this.watchHandle||(this.watchHandle=b.watch(()=>this.view.extent,()=>{const t=this.getPanelScale();for(const s of this.store.countdownPanels){t!==this.currentPanelScale&&(s.scale=t);const{mapPoint:n}=s,i=this.view.toScreen({type:"point",x:n[0],y:n[1]});s.position.left=i.x,s.position.top=i.y}this.currentPanelScale=t}));const o=e.crossId,r=this.stopLineMap.get(o);if(!r){console.log(`没有找到路口${o}`);return}const p=e.phaseCountDownList,c=new Map;for(const t of p){let s="";for(let l of t.roadIdList)if(l.startsWith("-")&&(l=l.slice(1)),r.has(l)){s=l;break}if(!s){console.log(`没有找到对应的进口道${o}--${s}`);continue}let n=c.get(s);if(n||(n={},c.set(s,n)),!t.direction){console.log(`没有找到对应的方向${o}--${JSON.stringify(t)}`);continue}const i=t.direction.toLowerCase(),a=t.color===1?"red":t.color===2?"yellow":"green";i==="u"?(n.uNumber=t.leftTime,n.uColor=a):i==="l"?(n.lNumber=t.leftTime,n.lColor=a):i==="s"?(n.sNumber=t.leftTime,n.sColor=a):i==="r"&&(n.rNumber=t.leftTime,n.rColor=a)}c.forEach((t,s)=>{const n=r.get(s);if(!n)return;const i=this.store.countdownPanels.find(a=>a.crossId===o&&a.roadId===s);if(i)i.lampStatus=t;else{const a=n.panelPoint,l=this.view.toScreen({type:"point",x:a[0],y:a[1]}),u=this.getPanelRotation(n.coord);this.store.countdownPanels.push({displayMode:"complex",crossId:o,roadId:s,mapPoint:a,stopLine:n.coord,position:{left:l.x,top:l.y},rotation:u,scale:this.getPanelScale(),lampStatus:t})}})}clearSignal(){var e;this.stopLineLayer.removeAll(),this.store.countdownPanels=[],(e=this.watchHandle)==null||e.remove(),this.watchHandle=null}getPanelPoint(e){const o=v.default.getCenterPointInLine(e),r=e[0],p=e[e.length-1];let t=w(h.point(r),h.point(p))-90;return t<-180&&(t+=360),y(h.point(o),1,t,{units:"meters"}).geometry.coordinates}getPanelRotation(e){const o=e[0],r=new d.Point({x:o[0],y:o[1],spatialReference:this.view.spatialReference}),p=this.view.toScreen(r),c=e[e.length-1],t=new d.Point({x:c[0],y:c[1],spatialReference:this.view.spatialReference}),s=this.view.toScreen(t),n=s.x-p.x,i=s.y-p.y;return Math.atan2(i,n)*(180/Math.PI)}}exports.default=x;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("../../stores/index.js");function
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("vue"),y=require("../../stores/index.js");function w(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const f=w(d);class m{constructor(e){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=80,this.canvasHeight=40,this.view=(e.type==="2d",e);const t=y.default.useAppDataStore;this.mapConfig=g.toRaw(t.mapConfig)}async initializeLayer(){try{await this.initializePlateBackground()}catch(e){console.log("倒计时背景图片加载失败",e)}if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,s=(await(await fetch(e)).json()).features.map((n,i)=>({geometry:{type:"polyline",paths:[n.geometry.coordinates]},attributes:{ObjectID:i+1,id:n.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:s,geometryType:"polyline",objectIdField:"ObjectID",outFields:["*"],fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"color",alias:"color",type:"string"}],renderer:{type:"unique-value",field:"color",defaultSymbol:{type:"simple-line",color:"lightblue",width:"2px",style:"none"},uniqueValueInfos:[{value:"green",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[19,255,69,.8]},width:1,height:.5}]}},{value:"red",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[254,5,9,.8]},width:1,height:.5}]}},{value:"yellow",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[255,215,0,.8]},width:1,height:.5}]}}]}}),this.view.map.add(this.phaseLineLayer)}}async initializePlateBackground(){return new Promise((e,t)=>{const a=new Image;a.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,a.onload=()=>{this.plateBackground=a,e()},a.onerror=s=>{t(s)}})}async handleSignalData(e){const{crossId:t,lat:a,lon:s,rtStage:n,channelsConfig:i}=e;await this.updateCountdown(t,a,s,n),!(!this.phaseLineLayer||!i)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==n.stagePhase)&&await this.updatePhaseLine(t,n.channelsConfig,i),this.currentPhaseMap.set(t,n.stagePhase))}clearSignal(){this.phaseLineLayer&&(this.phaseLineLayer.visible=!1),this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(e=>{this.view.container.removeChild(e.backgroundCanvas),this.view.container.removeChild(e.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(e,t,a,s){if(this.isDeletingCanvas)return;const n=this.countdownCanvasMap.get(e);if(n)this.drawCountdownText(n.countdownCanvas,s);else try{const i=new u.Point({longitude:a,latitude:t,z:10}),o=this.view.toScreen(i),r=this.createCountdownCanvas();if(!r)return;const c=r[0],h=r[1];c.style.left=o.x+"px",c.style.top=o.y+"px",h.style.left=o.x+"px",h.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:i}),this.drawCountdownText(h,s)}catch(i){console.log("倒计时canvas创建失败",e,i)}this.countdownWatchHandel||(this.countdownWatchHandel=f.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(i=>{const o=this.view.toScreen(i.mapPoint);i.backgroundCanvas.style.left=o.x+"px",i.backgroundCanvas.style.top=o.y+"px",i.countdownCanvas.style.left=o.x+"px",i.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const a=e.getContext("2d");a.clearRect(0,0,e.width,e.height),a.font="24px Digital",a.textBaseline="middle",a.textAlign="center",a.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",a.fillText(`${t.stageID} ${t.stageRemainingTime.toFixed(0)}`,e.width/2,e.height/2)}drawCircle(e,t){console.log(t);const a=e.getContext("2d");a.clearRect(0,0,e.width,e.height),this.ctxDraw(a,"lime",e.width/2,e.height/2,20,-Math.PI/2,-Math.PI/2+2*.6*Math.PI)}ctxDraw(e,t,a,s,n,i,o){e.save,e.beginPath(),e.lineWidth=4,e.strokeStyle=t,e.arc(a,s,n,i,o),e.stroke(),e.closePath(),e.font="26px Digital",e.textBaseline="middle",e.textAlign="center",e.fillText("A",a,s),e.restore()}async updatePhaseLine(e,t,a){const s=this.phaseLineLayer.source.filter(n=>n.getAttribute("id").includes(e));s.forEach(n=>{const i=n.getAttribute("id");this.isLaneInChannels(i,t)?n.setAttribute("color","green"):this.isLaneInChannels(i,a)?n.setAttribute("color","red"):n.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:s})}isLaneInChannels(e,t){const a=e.split("+"),s=a[1],n=a[2];for(let i=0;i<t.length;i++)for(let o=0;o<t[i].laneSnList.length;o++){const r=t[i].laneSnList[o].toFixed(0);if(s===r[0]&&n===r[1])return!0}return!1}createCountdownCanvas(){const e=document.createElement("canvas");e.width=this.canvasWidth,e.height=this.canvasHeight,e.style.position="absolute",e.style.transform="translate(-50%, -50%)";const t=e.getContext("2d");this.plateBackground?t.drawImage(this.plateBackground,0,0,this.canvasWidth,this.canvasHeight):(t.strokeStyle="rgba(0, 255, 0, 1)",t.lineWidth=1,t.strokeRect(0,0,this.canvasWidth,this.canvasHeight),t.fillStyle="rgba(0, 0, 0, 1)",t.fillRect(0,0,this.canvasWidth,this.canvasHeight)),this.view.container.appendChild(e);const a=document.createElement("canvas");return a.width=this.canvasWidth-10,a.height=this.canvasHeight-10,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",this.view.container.appendChild(a),[e,a]}}exports.default=m;
|
|
@@ -16,7 +16,7 @@ export default class TraceRendererExternal implements ITraceRendererInterface {
|
|
|
16
16
|
/** 车身颜色材质 */
|
|
17
17
|
private materialMap;
|
|
18
18
|
private readonly view;
|
|
19
|
-
private
|
|
19
|
+
private assetsRoot;
|
|
20
20
|
private carModel;
|
|
21
21
|
private vanModel;
|
|
22
22
|
private truckModel;
|
|
@@ -39,6 +39,7 @@ export default class TraceRendererExternal implements ITraceRendererInterface {
|
|
|
39
39
|
private needInterpolate;
|
|
40
40
|
private updateModel;
|
|
41
41
|
private appDataStore;
|
|
42
|
+
private mapConfig;
|
|
42
43
|
/** 轨迹日志 */
|
|
43
44
|
private logTable;
|
|
44
45
|
constructor(view: __esri.SceneView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("@arcgis/core/core/promiseUtils.js"),y=require("@arcgis/core/core/reactiveUtils.js"),T=require("@arcgis/core/geometry/SpatialReference"),S=require("@arcgis/core/views/3d/externalRenderers"),C=require("three"),G=require("three/examples/jsm/loaders/GLTFLoader"),m=require("../../../types/index.js"),B=require("../../stores/index.js");function f(u){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return s.default=u,Object.freeze(s)}const x=f(v),V=f(y),w=f(S),o=f(C);class R{constructor(s){this.cameraHeightThreshold=1e3,this.roughness=.2,this.metalness=.8,this.defaultMaterial=new o.MeshPhongMaterial({color:16777215}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[9,this.createCarMaterial(2105376)],[10,this.createCarMaterial(9662683)],[99,this.createCarMaterial(6908265)]]),this.isInitialized=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.isPaused=!1,this.currentSpriteContent=m.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.needInterpolate=!0,this.updateModel=!1,this.appDataStore=B.default.useAppDataStore,this.logTable=[["ptcId","plateno","timestamp","localTimestamp","speed","longitude","latitude","ptcType","vehicleType","vehicleColor","plateColor","heading","fixAngle","roadLayer","step","receiveTimestamp","queueLength","status"]],this.assetsRoot=JSON.parse(JSON.stringify(this.appDataStore.mapConfig)).assetsRoot,this.view=s,V.watch(()=>this.view.camera.position.z,(e,t)=>{(t<=this.cameraHeightThreshold&&e>this.cameraHeightThreshold||t>this.cameraHeightThreshold&&e<=this.cameraHeightThreshold)&&(this.updateModel=!0)})}createCarMaterial(s){return new o.MeshPhongMaterial({color:s})}getLog(){return this.logTable}async init(){const s=new G.GLTFLoader;await x.eachAlways([new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/car.glb`,t=>{const i=t.scene,n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.carModel=new o.Object3D,this.carModel.rotation.x=o.MathUtils.degToRad(90),this.carModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/van.glb`,t=>{const i=t.scene,n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.vanModel=new o.Object3D,this.vanModel.rotation.x=o.MathUtils.degToRad(90),this.vanModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/truck.glb`,t=>{const i=t.scene;i.scale.set(1.2,1,1.5);const n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.truckModel=new o.Object3D,this.truckModel.rotation.x=o.MathUtils.degToRad(90),this.truckModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/bus.glb`,t=>{const i=t.scene,n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.busModel=new o.Object3D,this.busModel.rotation.x=o.MathUtils.degToRad(90),this.busModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/bicycle.glb`,t=>{this.bicycleModel=t.scene,this.bicycleModel.rotation.x=o.MathUtils.degToRad(90),this.bicycleModel.rotation.y=o.MathUtils.degToRad(180),e()})}),new Promise(e=>{this.bluePlateBG=new Image,this.bluePlateBG.src=`${this.assetsRoot}/Images/PlateBG/blue.png`,this.bluePlateBG.onload=()=>{e()}}),new Promise(e=>{this.yellowPlateBG=new Image,this.yellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/yellow.png`,this.yellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.whitePlateBG=new Image,this.whitePlateBG.src=`${this.assetsRoot}/Images/PlateBG/white.png`,this.whitePlateBG.onload=()=>{e()}}),new Promise(e=>{this.blackPlateBG=new Image,this.blackPlateBG.src=`${this.assetsRoot}/Images/PlateBG/black.png`,this.blackPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoYellowPlateBG=new Image,this.neoYellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_yellow.png`,this.neoYellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoGreenPlateBG=new Image,this.neoGreenPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_green.png`,this.neoGreenPlateBG.onload=()=>{e()}}),new Promise(e=>{this.greyPlateBG=new Image,this.greyPlateBG.src=`${this.assetsRoot}/Images/PlateBG/grey.png`,this.greyPlateBG.onload=()=>{e()}})]),this.isInitialized=!0}setInterpolate(s){this.clearVehicles(),this.needInterpolate=s}async setup(s){this.context=s,this.renderer=new o.WebGLRenderer({context:s.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!0,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setViewport(0,0,this.view.width,this.view.height),this.renderer.autoClearDepth=!1,this.renderer.autoClearStencil=!1,this.renderer.autoClearColor=!1;const e=this.renderer.setRenderTarget.bind(this.renderer);this.renderer.setRenderTarget=i=>{e(i),i==null&&s.bindRenderTarget()},this.scene=new o.Scene;const{camera:t}=s;this.camera=new o.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),this.ambient=new o.AmbientLight(16777215,2),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,2),this.scene.add(this.sun),s.resetWebGLState()}async render(s){var i;const e=s.camera;if(this.camera.position.set(e.eye[0],e.eye[1],e.eye[2]),this.camera.up.set(e.up[0],e.up[1],e.up[2]),this.camera.lookAt(new o.Vector3(e.center[0],e.center[1],e.center[2])),this.camera.projectionMatrix.fromArray(e.projectionMatrix),!this.isPaused&&this.needInterpolate)for(const a of this.vehicleObjectMap.keys()){const n=(i=this.vehicleObjectMap.get(a))==null?void 0:i.model;if(!n)continue;const r=this.computeVehiclePosition(a);if(r){const d=this.toRenderCoordinates(r);n.position.set(d[0],d[1],d[2]),n.rotation.y=o.MathUtils.degToRad(-r[3])}}const t=s.sunLight;this.sun.position.set(t.direction[0],t.direction[1],t.direction[2]),this.sun.intensity=t.diffuse.intensity,this.sun.color=new o.Color(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),this.ambient.intensity=t.ambient.intensity,this.ambient.color=new o.Color(t.ambient.color[0],t.ambient.color[1],t.ambient.color[2]),this.renderer.resetState(),s.bindRenderTarget(),this.renderer.render(this.scene,this.camera),w.requestRender(this.view),s.resetWebGLState()}async addVehicles(s){if(this.isPaused||!this.isInitialized)return;const e=Date.now();for(const t of s){this.appDataStore.saveTrackLog&&this.logTable.push([t.ptcId,t.plateNo,t.timestamp,t.localTimestamp,t.speed,t.x,t.y,t.ptcType,t.vehicleType,t.vehicleColor,t.plateColor,t.heading,t.fixAngle,t.roadLayer,t.step,e,0,0]);const{vehicleId:i,localTimestamp:a}=t,n=Number(t.x),r=Number(t.y),d=Number(t.heading);this.historyPositionMap.set(i,[{pos:[n,r,0],heading:d,time:a}]);const h=this.getVehicleModel(t);h.name=i,h.visible=!1;try{const l=await this.createPlateSprite(t);l&&(h.add(l),l.position.set(0,5,-4))}catch(l){console.log("createPlateSprite error:",l)}this.scene.add(h),this.vehicleObjectMap.set(i,{model:h,data:t,waitForDelete:!1,isMoving:!1})}}async updateVehicles(s){if(this.isPaused||!this.isInitialized)return;const e=[],t=Date.now();for(const i of s){const{vehicleId:a,localTimestamp:n}=i,r=Number(i.x),d=Number(i.y);let h=Number(i.heading);const l=this.vehicleObjectMap.get(a),p=this.historyPositionMap.get(a);if(!l||!p)e.push(i);else{if(this.appDataStore.saveTrackLog&&this.logTable.push([i.ptcId,i.plateNo,i.timestamp,i.localTimestamp,i.speed,i.x,i.y,i.ptcType,i.vehicleType,i.vehicleColor,i.plateColor,i.heading,i.fixAngle,i.roadLayer,i.step,t,p.length,1]),this.updateModel||l.data.vehicleColor!==i.vehicleColor||l.data.vehicleType!==i.vehicleType){this.scene.remove(l.model),this.disposeModel(l.model),l.model=this.getVehicleModel(i),l.model.visible=!0;const c=await this.createPlateSprite(i);c&&(l.model.add(c),c.position.set(0,5,-4)),this.scene.add(l.model)}if(l.data.showName!==i.showName||l.data.plateColor!==i.plateColor){const c=l.model.getObjectByName("VehiclePlate");c&&(l.model.remove(c),this.disposeModel(c));const g=await this.createPlateSprite(i);g&&(l.model.add(g),g.position.set(0,5,-4))}if(l.data=i,this.needInterpolate){const c=p[p.length-1];Math.abs(h-c.heading)>=180&&(h>c.heading?c.heading+=360:h+=360),p.push({pos:[r,d,0],heading:h,time:n})}else{this.historyPositionMap.set(a,[{pos:[r,d,0],heading:h,time:n}]);const c=this.toRenderCoordinates([r,d,0]);l.model.position.set(c[0],c[1],c[2]),l.model.rotation.y=o.MathUtils.degToRad(-h)}}}await this.addVehicles(e),this.updateModel=!1,this.needInterpolate||this.render(this.context)}toRenderCoordinates(s){const e=[0,0,0];return w.toRenderCoordinates(this.view,s,0,T.WGS84,e,0,1),e}deleteVehicles(s){if(this.isPaused)return;const e=Date.now();s.forEach(t=>{if(this.appDataStore.saveTrackLog){const a=this.historyPositionMap.get(t);this.logTable.push([t,"","","","","","","","","","","","","","",e,a?a.length:0,2])}const i=this.vehicleObjectMap.get(t);i&&(this.needInterpolate?i.isMoving?i.waitForDelete=!0:this.deleteVehicle(i):this.deleteVehicle(i))})}deleteVehicle(s){this.scene.remove(s.model),this.disposeModel(s.model);const e=s.data.vehicleId;this.vehicleObjectMap.delete(e),this.historyPositionMap.delete(e)}async toggleTrafficInfo(s){s.name==="vehiclePlate"&&(s.visible===!0&&this.currentSpriteContent===m.EVehiclePlateState.None?await this.updatePanelContent(m.EVehiclePlateState.PlateNumber):await this.updatePanelContent(s.visible?this.currentSpriteContent:m.EVehiclePlateState.None))}togglePause(s){this.isPaused=s}clearVehicles(){for(const s of this.vehicleObjectMap.keys()){const e=this.vehicleObjectMap.get(s);e&&(this.scene.remove(e.model),this.disposeModel(e.model))}this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}async updatePanelContent(s){if(s!==this.currentSpriteContent){this.currentSpriteContent=s;for(const e of this.vehicleObjectMap.keys()){const t=this.vehicleObjectMap.get(e);if(t){const i=t.model.getObjectByName("VehiclePlate");if(i&&(t.model.remove(i),this.disposeModel(i)),s!==m.EVehiclePlateState.None){const a=await this.createPlateSprite(t.data);a&&(t.model.add(a),a.position.set(0,5,-4))}}}}}toggleGroundVehicle(s){console.log("toggleGroundVehicle",s),this.showGroundVehicle=s}toggleElevatedVehicle(s){this.showElevatedVehicle=s}disposeModel(s){s.traverse(e=>{e instanceof o.Mesh&&(e.geometry.dispose(),e.material.dispose())})}computeVehiclePosition(s){const e=this.historyPositionMap.get(s),t=this.vehicleObjectMap.get(s);if(!t||!e||!t.isMoving&&e.length<=2)return;const i=Date.now();t.isMoving=!0,t.data.roadLayer==="1"?t.model.visible=this.showGroundVehicle:t.model.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=i,t.segmentTotalTime=e[1].time-e[0].time);const a=i-t.segmentStartTime,n=Math.min(a/t.segmentTotalTime,1);if(n===1)if(e.shift(),e.length===1){t.waitForDelete===!0?this.deleteVehicle(t):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0,t.model.visible=!1,t.isMoving=!1,console.log("hide vehicle",s));return}else{t.segmentStartTime=Date.now();const r=a-t.segmentTotalTime;return t.segmentTotalTime=e[1].time-e[0].time-r,(e[1].heading>=270&&e[0].heading<=90||e[1].heading<=90&&e[0].heading>=270)&&(e[1].heading>e[0].heading?e[0].heading+=360:e[1].heading+=360),e[0].pos.concat(e[0].heading)}else if(e.length>=2){const r=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*n,d=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*n,h=e[0].heading+(e[1].heading-e[0].heading)*n;return[r,d,0,h]}else return}getVehicleModel(s){if(this.view.camera.position.z>=this.cameraHeightThreshold){const e=new o.SphereGeometry(5,32,32),t=new o.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new o.Mesh(e,t)}else{let e;if(s.ptcType===2)e=this.bicycleModel.clone();else{switch(s.vehicleType){case 10:e=this.carModel.clone();break;case 20:e=this.vanModel.clone();break;case 25:e=this.truckModel.clone();break;case 50:e=this.busModel.clone();break;default:e=this.carModel.clone();break}const t=this.materialMap.get(s.vehicleColor)||this.defaultMaterial;let i=!1;e.traverse(a=>{!i&&a instanceof o.Mesh&&(a.material=t,i=!0)})}return e}}createCanvas(s,e,t){const i=document.createElement("canvas"),a=s.width,n=s.height;i.width=a,i.height=n;const r=i.getContext("2d");if(!r){console.log("canvas创建失败");return}return r.fillStyle="rgba(0,0,0,0.0)",r.fillRect(0,0,a,n),r.drawImage(s,0,0,a,n),r.beginPath(),r.translate(a/2,n/2),r.fillStyle=t,r.font="bold 32px 宋体",r.textBaseline="middle",r.textAlign="center",r.fillText(e,0,0),i}createPlateSprite(s){return new Promise((e,t)=>{var h,l;const i=!s.plateNo||s.plateNo==="0"||s.plateNo==="000000";if(this.currentSpriteContent===m.EVehiclePlateState.None||this.currentSpriteContent===m.EVehiclePlateState.PlateNumber&&i){e(void 0);return}let a=new Image,n="",r="";if(this.currentSpriteContent===m.EVehiclePlateState.PlateNumber||this.currentSpriteContent===m.EVehiclePlateState.Mix)if(i)a=this.greyPlateBG,n=s.ptcId,r="#ffffff";else switch(n=((h=s.showName)==null?void 0:h.substring(0,2))+"•"+((l=s.showName)==null?void 0:l.substring(2)),s.plateColor){case 1:a=this.bluePlateBG,r="#ffffff";break;case 2:a=this.yellowPlateBG,r="#000000";break;case 3:a=this.whitePlateBG,r="#000000";break;case 4:a=this.blackPlateBG,r="#ffffff";break;case 5:a=this.neoYellowPlateBG,r="#000000";break;case 6:a=this.neoGreenPlateBG,r="#000000";break;default:a=this.greyPlateBG,n=s.plateNo,r="#ffffff";break}else this.currentSpriteContent===m.EVehiclePlateState.Id&&(a=this.greyPlateBG,n=s.ptcId,r="#ffffff");const d=this.createCanvas(a,n,r);if(d){const p=new o.CanvasTexture(d),c=new o.SpriteMaterial({map:p,transparent:!1}),g=new o.Sprite(c),b=.05,M=d.width*b,P=d.height*b;g.scale.set(M,P,1),g.name="VehiclePlate",e(g)}else{t("canvas创建失败");return}a.onerror=p=>{console.log(`号牌背景加载失败: ${a.src}`,p),t(p)}})}}exports.default=R;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("@arcgis/core/core/promiseUtils.js"),y=require("@arcgis/core/core/reactiveUtils.js"),T=require("@arcgis/core/geometry/SpatialReference"),S=require("@arcgis/core/views/3d/externalRenderers"),C=require("three"),G=require("three/examples/jsm/loaders/GLTFLoader"),B=require("vue"),m=require("../../../types/index.js"),x=require("../../stores/index.js");function f(u){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return s.default=u,Object.freeze(s)}const R=f(v),V=f(y),b=f(S),o=f(C);class I{constructor(s){this.cameraHeightThreshold=1e3,this.roughness=.2,this.metalness=.8,this.defaultMaterial=new o.MeshPhongMaterial({color:16777215}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[9,this.createCarMaterial(2105376)],[10,this.createCarMaterial(9662683)],[99,this.createCarMaterial(6908265)]]),this.isInitialized=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.isPaused=!1,this.currentSpriteContent=m.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.needInterpolate=!0,this.updateModel=!1,this.appDataStore=x.default.useAppDataStore,this.logTable=[["ptcId","plateno","timestamp","localTimestamp","speed","longitude","latitude","ptcType","vehicleType","vehicleColor","plateColor","heading","fixAngle","roadLayer","step","receiveTimestamp","queueLength","status"]],this.view=s;const e=B.toRaw(this.appDataStore.mapConfig);this.assetsRoot=e.assetsRoot,V.watch(()=>this.view.camera.position.z,(t,i)=>{(i<=this.cameraHeightThreshold&&t>this.cameraHeightThreshold||i>this.cameraHeightThreshold&&t<=this.cameraHeightThreshold)&&(this.updateModel=!0)})}createCarMaterial(s){return new o.MeshPhongMaterial({color:s})}getLog(){return this.logTable}async init(){const s=new G.GLTFLoader;await R.eachAlways([new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/car.glb`,t=>{const i=t.scene,n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.carModel=new o.Object3D,this.carModel.rotation.x=o.MathUtils.degToRad(90),this.carModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/van.glb`,t=>{const i=t.scene,n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.vanModel=new o.Object3D,this.vanModel.rotation.x=o.MathUtils.degToRad(90),this.vanModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/truck.glb`,t=>{const i=t.scene;i.scale.set(1.2,1,1.5);const n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.truckModel=new o.Object3D,this.truckModel.rotation.x=o.MathUtils.degToRad(90),this.truckModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/bus.glb`,t=>{const i=t.scene,n=new o.Box3().setFromObject(i).getSize(new o.Vector3);this.busModel=new o.Object3D,this.busModel.rotation.x=o.MathUtils.degToRad(90),this.busModel.add(i),i.position.set(0,0,n.z/2),e()})}),new Promise(e=>{s.load(`${this.assetsRoot}/3DModels/bicycle.glb`,t=>{this.bicycleModel=t.scene,this.bicycleModel.rotation.x=o.MathUtils.degToRad(90),this.bicycleModel.rotation.y=o.MathUtils.degToRad(180),e()})}),new Promise(e=>{this.bluePlateBG=new Image,this.bluePlateBG.src=`${this.assetsRoot}/Images/PlateBG/blue.png`,this.bluePlateBG.onload=()=>{e()}}),new Promise(e=>{this.yellowPlateBG=new Image,this.yellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/yellow.png`,this.yellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.whitePlateBG=new Image,this.whitePlateBG.src=`${this.assetsRoot}/Images/PlateBG/white.png`,this.whitePlateBG.onload=()=>{e()}}),new Promise(e=>{this.blackPlateBG=new Image,this.blackPlateBG.src=`${this.assetsRoot}/Images/PlateBG/black.png`,this.blackPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoYellowPlateBG=new Image,this.neoYellowPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_yellow.png`,this.neoYellowPlateBG.onload=()=>{e()}}),new Promise(e=>{this.neoGreenPlateBG=new Image,this.neoGreenPlateBG.src=`${this.assetsRoot}/Images/PlateBG/neo_green.png`,this.neoGreenPlateBG.onload=()=>{e()}}),new Promise(e=>{this.greyPlateBG=new Image,this.greyPlateBG.src=`${this.assetsRoot}/Images/PlateBG/grey.png`,this.greyPlateBG.onload=()=>{e()}})]),this.isInitialized=!0}setInterpolate(s){this.clearVehicles(),this.needInterpolate=s}async setup(s){this.context=s,this.renderer=new o.WebGLRenderer({context:s.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!0,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setViewport(0,0,this.view.width,this.view.height),this.renderer.autoClearDepth=!1,this.renderer.autoClearStencil=!1,this.renderer.autoClearColor=!1;const e=this.renderer.setRenderTarget.bind(this.renderer);this.renderer.setRenderTarget=i=>{e(i),i==null&&s.bindRenderTarget()},this.scene=new o.Scene;const{camera:t}=s;this.camera=new o.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),this.ambient=new o.AmbientLight(16777215,2),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,2),this.scene.add(this.sun),s.resetWebGLState()}async render(s){var i;const e=s.camera;if(this.camera.position.set(e.eye[0],e.eye[1],e.eye[2]),this.camera.up.set(e.up[0],e.up[1],e.up[2]),this.camera.lookAt(new o.Vector3(e.center[0],e.center[1],e.center[2])),this.camera.projectionMatrix.fromArray(e.projectionMatrix),!this.isPaused&&this.needInterpolate)for(const a of this.vehicleObjectMap.keys()){const n=(i=this.vehicleObjectMap.get(a))==null?void 0:i.model;if(!n)continue;const r=this.computeVehiclePosition(a);if(r){const d=this.toRenderCoordinates(r);n.position.set(d[0],d[1],d[2]),n.rotation.y=o.MathUtils.degToRad(-r[3])}}const t=s.sunLight;this.sun.position.set(t.direction[0],t.direction[1],t.direction[2]),this.sun.intensity=t.diffuse.intensity,this.sun.color=new o.Color(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),this.ambient.intensity=t.ambient.intensity,this.ambient.color=new o.Color(t.ambient.color[0],t.ambient.color[1],t.ambient.color[2]),this.renderer.resetState(),s.bindRenderTarget(),this.renderer.render(this.scene,this.camera),b.requestRender(this.view),s.resetWebGLState()}async addVehicles(s){if(this.isPaused||!this.isInitialized)return;const e=Date.now();for(const t of s){this.appDataStore.saveTrackLog&&this.logTable.push([t.ptcId,t.plateNo,t.timestamp,t.localTimestamp,t.speed,t.x,t.y,t.ptcType,t.vehicleType,t.vehicleColor,t.plateColor,t.heading,t.fixAngle,t.roadLayer,t.step,e,0,0]);const{vehicleId:i,localTimestamp:a}=t,n=Number(t.x),r=Number(t.y),d=Number(t.heading);this.historyPositionMap.set(i,[{pos:[n,r,0],heading:d,time:a}]);const h=this.getVehicleModel(t);h.name=i,h.visible=!1;try{const l=await this.createPlateSprite(t);l&&(h.add(l),l.position.set(0,5,-4))}catch(l){console.log("createPlateSprite error:",l)}this.scene.add(h),this.vehicleObjectMap.set(i,{model:h,data:t,waitForDelete:!1,isMoving:!1})}}async updateVehicles(s){if(this.isPaused||!this.isInitialized)return;const e=[],t=Date.now();for(const i of s){const{vehicleId:a,localTimestamp:n}=i,r=Number(i.x),d=Number(i.y);let h=Number(i.heading);const l=this.vehicleObjectMap.get(a),p=this.historyPositionMap.get(a);if(!l||!p)e.push(i);else{if(this.appDataStore.saveTrackLog&&this.logTable.push([i.ptcId,i.plateNo,i.timestamp,i.localTimestamp,i.speed,i.x,i.y,i.ptcType,i.vehicleType,i.vehicleColor,i.plateColor,i.heading,i.fixAngle,i.roadLayer,i.step,t,p.length,1]),this.updateModel||l.data.vehicleColor!==i.vehicleColor||l.data.vehicleType!==i.vehicleType){this.scene.remove(l.model),this.disposeModel(l.model),l.model=this.getVehicleModel(i),l.model.visible=!0;const c=await this.createPlateSprite(i);c&&(l.model.add(c),c.position.set(0,5,-4)),this.scene.add(l.model)}if(l.data.showName!==i.showName||l.data.plateColor!==i.plateColor){const c=l.model.getObjectByName("VehiclePlate");c&&(l.model.remove(c),this.disposeModel(c));const g=await this.createPlateSprite(i);g&&(l.model.add(g),g.position.set(0,5,-4))}if(l.data=i,this.needInterpolate){const c=p[p.length-1];Math.abs(h-c.heading)>=180&&(h>c.heading?c.heading+=360:h+=360),p.push({pos:[r,d,0],heading:h,time:n})}else{this.historyPositionMap.set(a,[{pos:[r,d,0],heading:h,time:n}]);const c=this.toRenderCoordinates([r,d,0]);l.model.position.set(c[0],c[1],c[2]),l.model.rotation.y=o.MathUtils.degToRad(-h)}}}await this.addVehicles(e),this.updateModel=!1,this.needInterpolate||this.render(this.context)}toRenderCoordinates(s){const e=[0,0,0];return b.toRenderCoordinates(this.view,s,0,T.WGS84,e,0,1),e}deleteVehicles(s){if(this.isPaused)return;const e=Date.now();s.forEach(t=>{if(this.appDataStore.saveTrackLog){const a=this.historyPositionMap.get(t);this.logTable.push([t,"","","","","","","","","","","","","","",e,a?a.length:0,2])}const i=this.vehicleObjectMap.get(t);i&&(this.needInterpolate?i.isMoving?i.waitForDelete=!0:this.deleteVehicle(i):this.deleteVehicle(i))})}deleteVehicle(s){this.scene.remove(s.model),this.disposeModel(s.model);const e=s.data.vehicleId;this.vehicleObjectMap.delete(e),this.historyPositionMap.delete(e)}async toggleTrafficInfo(s){s.name==="vehiclePlate"&&(s.visible===!0&&this.currentSpriteContent===m.EVehiclePlateState.None?await this.updatePanelContent(m.EVehiclePlateState.PlateNumber):await this.updatePanelContent(s.visible?this.currentSpriteContent:m.EVehiclePlateState.None))}togglePause(s){this.isPaused=s}clearVehicles(){for(const s of this.vehicleObjectMap.keys()){const e=this.vehicleObjectMap.get(s);e&&(this.scene.remove(e.model),this.disposeModel(e.model))}this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}async updatePanelContent(s){if(s!==this.currentSpriteContent){this.currentSpriteContent=s;for(const e of this.vehicleObjectMap.keys()){const t=this.vehicleObjectMap.get(e);if(t){const i=t.model.getObjectByName("VehiclePlate");if(i&&(t.model.remove(i),this.disposeModel(i)),s!==m.EVehiclePlateState.None){const a=await this.createPlateSprite(t.data);a&&(t.model.add(a),a.position.set(0,5,-4))}}}}}toggleGroundVehicle(s){console.log("toggleGroundVehicle",s),this.showGroundVehicle=s}toggleElevatedVehicle(s){this.showElevatedVehicle=s}disposeModel(s){s.traverse(e=>{e instanceof o.Mesh&&(e.geometry.dispose(),e.material.dispose())})}computeVehiclePosition(s){const e=this.historyPositionMap.get(s),t=this.vehicleObjectMap.get(s);if(!t||!e||!t.isMoving&&e.length<=2)return;const i=Date.now();t.isMoving=!0,t.data.roadLayer==="1"?t.model.visible=this.showGroundVehicle:t.model.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=i,t.segmentTotalTime=e[1].time-e[0].time);const a=i-t.segmentStartTime,n=Math.min(a/t.segmentTotalTime,1);if(n===1)if(e.shift(),e.length===1){t.waitForDelete===!0?this.deleteVehicle(t):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0,t.model.visible=!1,t.isMoving=!1,console.log("hide vehicle",s));return}else{t.segmentStartTime=Date.now();const r=a-t.segmentTotalTime;return t.segmentTotalTime=e[1].time-e[0].time-r,(e[1].heading>=270&&e[0].heading<=90||e[1].heading<=90&&e[0].heading>=270)&&(e[1].heading>e[0].heading?e[0].heading+=360:e[1].heading+=360),e[0].pos.concat(e[0].heading)}else if(e.length>=2){const r=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*n,d=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*n,h=e[0].heading+(e[1].heading-e[0].heading)*n;return[r,d,0,h]}else return}getVehicleModel(s){if(this.view.camera.position.z>=this.cameraHeightThreshold){const e=new o.SphereGeometry(5,32,32),t=new o.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new o.Mesh(e,t)}else{let e;if(s.ptcType===2)e=this.bicycleModel.clone();else{switch(s.vehicleType){case 10:e=this.carModel.clone();break;case 20:e=this.vanModel.clone();break;case 25:e=this.truckModel.clone();break;case 50:e=this.busModel.clone();break;default:e=this.carModel.clone();break}const t=this.materialMap.get(s.vehicleColor)||this.defaultMaterial;let i=!1;e.traverse(a=>{!i&&a instanceof o.Mesh&&(a.material=t,i=!0)})}return e}}createCanvas(s,e,t){const i=document.createElement("canvas"),a=s.width,n=s.height;i.width=a,i.height=n;const r=i.getContext("2d");if(!r){console.log("canvas创建失败");return}return r.fillStyle="rgba(0,0,0,0.0)",r.fillRect(0,0,a,n),r.drawImage(s,0,0,a,n),r.beginPath(),r.translate(a/2,n/2),r.fillStyle=t,r.font="bold 32px 宋体",r.textBaseline="middle",r.textAlign="center",r.fillText(e,0,0),i}createPlateSprite(s){return new Promise((e,t)=>{var h,l;const i=!s.plateNo||s.plateNo==="0"||s.plateNo==="000000";if(this.currentSpriteContent===m.EVehiclePlateState.None||this.currentSpriteContent===m.EVehiclePlateState.PlateNumber&&i){e(void 0);return}let a=new Image,n="",r="";if(this.currentSpriteContent===m.EVehiclePlateState.PlateNumber||this.currentSpriteContent===m.EVehiclePlateState.Mix)if(i)a=this.greyPlateBG,n=s.ptcId,r="#ffffff";else switch(n=((h=s.showName)==null?void 0:h.substring(0,2))+"•"+((l=s.showName)==null?void 0:l.substring(2)),s.plateColor){case 1:a=this.bluePlateBG,r="#ffffff";break;case 2:a=this.yellowPlateBG,r="#000000";break;case 3:a=this.whitePlateBG,r="#000000";break;case 4:a=this.blackPlateBG,r="#ffffff";break;case 5:a=this.neoYellowPlateBG,r="#000000";break;case 6:a=this.neoGreenPlateBG,r="#000000";break;default:a=this.greyPlateBG,n=s.plateNo,r="#ffffff";break}else this.currentSpriteContent===m.EVehiclePlateState.Id&&(a=this.greyPlateBG,n=s.ptcId,r="#ffffff");const d=this.createCanvas(a,n,r);if(d){const p=new o.CanvasTexture(d),c=new o.SpriteMaterial({map:p,transparent:!1}),g=new o.Sprite(c),w=.05,M=d.width*w,P=d.height*w;g.scale.set(M,P,1),g.name="VehiclePlate",e(g)}else{t("canvas创建失败");return}a.onerror=p=>{console.log(`号牌背景加载失败: ${a.src}`,p),t(p)}})}}exports.default=I;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@arcgis/core/Graphic"),p=require("@arcgis/core/layers/GraphicsLayer"),g=require("../../stores/index.js");class
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@arcgis/core/Graphic"),p=require("@arcgis/core/layers/GraphicsLayer"),g=require("vue"),m=require("../../stores/index.js");class y{constructor(i){this.appDataStore=m.default.useAppDataStore,this.logTable=[["uuid","ptcId","plateno","timestamp","localTimestamp","timestamp_str","speed","laneNo","objHeight","objLength","latitude","longitude","ptcType","vehicleType","vehicleColor","plateColor","sbdm","heading","fixAngle","roadLayer","status","step","receiveTimestamp"]],this.needInterpolate=!0,this.isPaused=!1,this.showVehiclePlate=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.view=i,this.mapConfig=g.toRaw(this.appDataStore.mapConfig),this.vehicleLayer=new p({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer),this.rafSignal=requestAnimationFrame(()=>this.render())}getLog(){return this.logTable}async init(){}addVehicles(i){return new Promise(t=>{if(this.isPaused){t();return}const e=i.map(s=>{const{vehicleId:o,heading:a,localTimestamp:h}=s,l=Number(s.x),n=Number(s.y);this.historyPositionMap.set(o,[{pos:[l,n,0],heading:a,time:h}]);const r=new c({geometry:{type:"point",x:l,y:n},attributes:{...s,type:"trackVehicle"},symbol:this.createCIMSymbol(s)});return r.visible=!1,this.vehicleObjectMap.set(o,{graphic:r,data:s,waitForDelete:!1,isMoving:!1}),r});this.vehicleLayer.addMany(e),t()})}updateVehicles(i){return new Promise(t=>{if(this.isPaused){t();return}const e=[];i.forEach(s=>{const{vehicleId:o,heading:a,localTimestamp:h}=s,l=Number(s.x),n=Number(s.y),r=this.vehicleObjectMap.get(o);r?(r.data=s,r.graphic.attributes={...s,type:"trackVehicle"},this.historyPositionMap.get(o).push({pos:[l,n,0],heading:a,time:h})):e.push(s)}),this.addVehicles(e),t()})}deleteVehicles(i){this.isPaused||i.forEach(t=>{const e=this.vehicleObjectMap.get(t);e&&(e.waitForDelete=!0)})}clearVehicles(){this.vehicleLayer.removeAll(),this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}toggleGroundVehicle(i){this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}toggleTrafficInfo(i){i.name==="vehiclePlate"&&(this.showVehiclePlate=i.visible)}togglePause(i){this.isPaused=i,this.isPaused?cancelAnimationFrame(this.rafSignal):this.rafSignal=requestAnimationFrame(()=>this.render())}updatePanelContent(i){console.log(i)}setInterpolate(i){this.needInterpolate=i}render(){this.isPaused||this.vehicleObjectMap.forEach((i,t)=>{this.updatePosition(t)}),this.rafSignal=requestAnimationFrame(()=>this.render())}updatePosition(i){const t=this.historyPositionMap.get(i),e=this.vehicleObjectMap.get(i);if(!t||!e||!e.isMoving&&t.length<=2)return;e.isMoving=!0,(e.graphic.getAttribute("roadLayer")||"1")==="1"?e.graphic.visible=this.showGroundVehicle:e.graphic.visible=this.showElevatedVehicle,e.segmentStartTime||(e.segmentStartTime=Date.now(),e.segmentTotalTime=t[1].time-t[0].time);const o=Date.now()-e.segmentStartTime,a=Math.min(1,o/e.segmentTotalTime);if(a===1)if(t.shift(),t.length===1){e.waitForDelete?(this.vehicleLayer.remove(e.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(e.segmentStartTime=void 0,e.segmentTotalTime=void 0,e.graphic.visible=!1,e.isMoving=!1);return}else e.segmentStartTime=Date.now(),e.segmentTotalTime=t[1].time-t[0].time,(t[1].heading>=270&&t[0].heading<=90||t[1].heading<=90&&t[0].heading>=270)&&(t[1].heading>t[0].heading?t[0].heading+=360:t[1].heading+=360),e.graphic.geometry={type:"point",x:t[0].pos[0],y:t[0].pos[1]};else{const h=t[0].pos[0]+(t[1].pos[0]-t[0].pos[0])*a,l=t[0].pos[1]+(t[1].pos[1]-t[0].pos[1])*a,n=t[0].heading+(t[1].heading-t[0].heading)*a;e.graphic.geometry={type:"point",x:h,y:l},e.data.heading=n,e.graphic.symbol=this.createCIMSymbol(e.data)}}createCIMSymbol(i){const t=this.getPlateFontColor(i.plateColor),e=this.getCarPic(i.vehicleColor,i.speed);return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.showName",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:this.showVehiclePlate,size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-8,ymin:-8,xmax:8,ymax:8},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:4,horizontalAlignment:"Center",offsetX:0,offsetY:8,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:t.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:t.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:e.size,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/${e.pic}`}]}}}}getCarPic(i,t){if(this.view.scale>=1e3){let e="point_green.png";return t&&(t<=4.2?e="point_red.png":t<=8.4?e="point_yellow.png":e="point_green.png"),{pic:e,size:15}}else{let e="grey";switch(typeof i=="string"&&(i=i.toLowerCase()),i){case"a":case 1:e="white";break;case"b":case 2:e="grey";break;case"c":case 3:e="yellow";break;case"d":case 4:e="pink";break;case"e":case 5:e="red";break;case"f":case 10:e="purple";break;case"g":case 6:e="green";break;case"h":case 7:e="blue";break;case"i":case 8:e="brown";break;case"j":case 9:e="black";break}return{pic:"/car/"+e+".png",size:30}}}getPlateFontColor(i){let t=[255,255,255,255],e=[169,169,169,255];switch(i){case 0:t=[0,0,0,255],e=[255,255,255,255];break;case 1:t=[0,0,0,255],e=[244,164,96,255];break;case 2:t=[255,255,255,255],e=[65,105,225,255];break;case 3:t=[255,255,255,255],e=[0,0,0,255];break;case 15:t=[244,164,96,255],e=[0,250,154,255];break;case 16:t=[0,0,0,255],e=[0,250,154,255];break}return{fillColor:t,backgroundColor:e}}}exports.default=y;
|
|
@@ -11,6 +11,7 @@ export default class MapInitializer {
|
|
|
11
11
|
*/
|
|
12
12
|
initialize(params: {
|
|
13
13
|
container: HTMLElement;
|
|
14
|
+
mapConfig: any;
|
|
14
15
|
markerClickCallback?: (type: string, id: string, detail: any, event?: any) => void;
|
|
15
16
|
mapClickCallback?: (mapPoint: number[], screenPoint: number[], event?: any) => void;
|
|
16
17
|
}): Promise<MapView | SceneView>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("@arcgis/core/Basemap"),d=require("@arcgis/core/config"),z=require("@arcgis/core/core/reactiveUtils"),g=require("@arcgis/core/geometry"),L=require("@arcgis/core/geometry/support/webMercatorUtils"),W=require("@arcgis/core/layers/GeoJSONLayer"),O=require("@arcgis/core/layers/MapImageLayer"),x=require("@arcgis/core/layers/TileLayer"),I=require("@arcgis/core/layers/WebTileLayer"),S=require("@arcgis/core/Map"),R=require("@arcgis/core/views/MapView"),H=require("@arcgis/core/views/SceneView"),_=require("@turf/destination"),G=require("@turf/helpers"),j=require("./custom-layer/custom-wmts-layer.js");function b(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const T=b(z),m=b(L),B=b(G);function q(r,e){return r&&(r.startsWith("http://")||r.startsWith("https://")?r:e+r)}class N{constructor(){this.mapConfig={},this.watchHandleMap=new Map,this.handleIndex=0,this.zoomWatchHandle=null}async initialize(e){var u,y,v,M;this.mapConfig=e.mapConfig;const{container:t,markerClickCallback:s,mapClickCallback:o}=e;d.assetsPath=`${this.mapConfig.assetsRoot}/ArcgisAssets`,d.fontsUrl=`${this.mapConfig.assetsRoot}/fonts`,d.apiKey="AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";const n=new S;if(((u=this.mapConfig)==null?void 0:u.mapOptions.mode.toLowerCase())==="2d"?this.view=new R({map:n,container:t,...this.mapConfig.mapOptions}):this.view=new H({map:n,container:t,environment:{atmosphereEnabled:!0,lighting:{type:"virtual"}},...(y=this.mapConfig)==null?void 0:y.mapOptions}),this.view.popup.visibleElements={closeButton:!0,collapseButton:!1,actionBar:!1,featureNavigation:!1},this.view.popup.dockOptions={buttonEnabled:!1,breakpoint:!1},this.view.on("click",async i=>{var C,P;if(o){let a=i.mapPoint;a.spatialReference.isWebMercator&&(a=m.webMercatorToGeographic(a)),o([a.x,a.y],[i.screenPoint.x,i.screenPoint.y],i)}if(this.view.type==="3d"){const a=this.view.camera;if(this.view.spatialReference.isWebMercator){const p=m.webMercatorToGeographic(a.position),f={heading:a.heading,tilt:a.tilt,position:p.toJSON()};console.log(f),(C=navigator.clipboard)==null||C.writeText(JSON.stringify(f))}else console.log(a.toJSON());console.log(this.view.zoom,this.view.scale)}else{let a=this.view.center;this.view.spatialReference.isWebMercator&&(a=m.webMercatorToGeographic(a)),console.log({center:a.toJSON(),zoom:this.view.zoom,scale:this.view.scale})}const c=(P=(await this.view.hitTest(i)).results)==null?void 0:P.filter(a=>a.type==="graphic");c.length>0&&c.forEach(a=>{var f;const p=a.graphic;(f=p.attributes)!=null&&f.type&&s&&s(p.attributes.type,p.attributes.id,p.attributes,i)})}),(v=this.mapConfig)!=null&&v.baseLayers?this.mapConfig.baseLayers.forEach(i=>{const l=q(i.url,this.mapConfig.assetsRoot);switch(i.type.toLowerCase()){case"webTile".toLowerCase():{const c=new I({urlTemplate:l,...i.options});n.add(c);break}case"tile":{const c=new x({url:l,...i.options});n.add(c);break}case"customWMTS".toLowerCase():{const c=new j.default({urlTemplate:l,...i.options});n.add(c);break}case"mapImage".toLowerCase():{const c=new O({url:l,...i.options});n.add(c);break}case"arcgis":{const c=new k(i.options);n.basemap=c;break}}}):n.basemap=new k({style:{id:"arcgis/light-gray",language:"zh-CN"}}),(M=this.mapConfig)!=null&&M.hdLayers){const i=this.mapConfig.hdLayers.map(l=>new W({url:q(l.url,this.mapConfig.assetsRoot),...l.options,title:l.options.id}));n.addMany(i)}this.view.ui.remove("attribution"),await this.view.when();const w=this.mapConfig.camera;let h;if(this.view.type==="2d"){let i=this.view.center;this.view.spatialReference.isWebMercator&&(i=m.webMercatorToGeographic(i)),h={center:[i.x,i.y],zoom:this.view.zoom}}else{let i=this.view.camera.position;this.view.spatialReference.isWebMercator&&(i=m.webMercatorToGeographic(i)),h={position:i,heading:this.view.camera.heading,tilt:this.view.camera.tilt}}return w?w.home=h:this.mapConfig.camera={home:h},this.view}setLayerVisibility(e){const{id:t,visible:s}=e,o=this.view.map.findLayerById(t);return o?(o.visible=s,{status:0,message:"ok"}):{status:-1,message:"未找到图层"}}async setMapCenter(e){var t;if(!this.view)return{status:-1,message:"未初始化"};if(e.center||e.target){switch((t=e.target)==null?void 0:t.type){case"point":e.target=new g.Point(e.target);break;case"polyline":e.target=new g.Polyline(e.target);break;case"polygon":e.target=new g.Polygon(e.target);break}await this.view.goTo(e,{duration:(e.duration||0)*1e3})}return{status:0,message:"成功"}}async lookAt(e){if(this.view.type==="2d")return;const t=e.tilt||0,s=e.heading||0;if(t===0)await this.view.goTo({position:{x:e.center[0],y:e.center[1],z:e.height},heading:s,tilt:0},{duration:(e.duration||2)*1e3});else{const o=Math.tan(t*Math.PI/180)*e.height,n=_(B.point(e.center),o,s+180,{units:"meters"});await this.view.goTo({position:{x:n.geometry.coordinates[0],y:n.geometry.coordinates[1],z:e.height},heading:s,tilt:t},{duration:(e.duration||2)*1e3})}}async setMapCamera(e){if(!this.view)return{status:-1,message:"未初始化"};const{name:t,duration:s=0}=e,{camera:o}=this.mapConfig;if(!o)return{status:-1,message:"未配置camera"};const n=o[t];return n?(await this.view.goTo(n,{duration:s*1e3}),{status:0,message:"成功"}):{status:-1,message:"未配置camera"}}requestCoordinateTransform(e,t){let s=0;const n=1e3/30,w=T.watch(()=>this.view.center,()=>{const h=this.transformPoints(e),u=Date.now();u-s>n&&(t(h),s=u)});return this.handleIndex++,this.watchHandleMap.set(this.handleIndex,w),{handle:this.handleIndex,points:this.transformPoints(e)}}transformPoints(e){return e.map(t=>{const s=new g.Point({x:t[0],y:t[1]}),o=this.view.toScreen(s);return[o.x,o.y]})}cancelCoordinateTransform(e){const t=this.watchHandleMap.get(e);t&&(t.remove(),this.watchHandleMap.delete(e))}setMapZoomRange(e){const{min:t,max:s}=e;!t&&!s||(this.zoomWatchHandle&&this.zoomWatchHandle.remove(),this.zoomWatchHandle=T.watch(()=>this.view.zoom,o=>{t&&o<=t&&(this.view.zoom=t),s&&o>=s&&(this.view.zoom=s)}))}}exports.default=N;
|
|
@@ -13,11 +13,12 @@ export default class SignalControlAreaController {
|
|
|
13
13
|
locateSignalControlArea(params: {
|
|
14
14
|
id: string;
|
|
15
15
|
}): Promise<IResult>;
|
|
16
|
-
private showPopup;
|
|
17
16
|
highlightSignalControlArea(params: {
|
|
18
17
|
id: string;
|
|
19
18
|
}): Promise<IResult>;
|
|
20
19
|
resetHighlight(): IResult;
|
|
20
|
+
showSubSignalControlArea(params: any): IResult;
|
|
21
|
+
editSubSignalArea(): IResult;
|
|
21
22
|
/**
|
|
22
23
|
* 在区控\子区\路口图层中查找对应的graphic
|
|
23
24
|
* @param id
|
|
@@ -31,6 +32,7 @@ export default class SignalControlAreaController {
|
|
|
31
32
|
* @returns
|
|
32
33
|
*/
|
|
33
34
|
private drawArea;
|
|
35
|
+
private getCrossGraphicInSubDistrict;
|
|
34
36
|
/**
|
|
35
37
|
* 生成路口点符号。在不同比例尺下，使用不同的符号
|
|
36
38
|
* @param attributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils.js"),y=require("@arcgis/core/Graphic"),h=require("@arcgis/core/layers/GraphicsLayer"),b=require("@turf/buffer"),f=require("@turf/convex"),C=require("@turf/helpers"),v=require("concaveman"),L=require("./district-controller.js");function m(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const S=m(d),l=m(C);class I{constructor(e){this.crossScale=5e3,this.view=e,this.districtControllerLayer=new h({id:"districtControllerLayer"}),this.subDistrictControllerLayer=new h({id:"subDistrictControllerLayer",visible:!1}),this.crossLayer=new h({id:"crossLayer",visible:!1}),this.highlightLayer=new h({id:"highlightLayer"}),this.view.map.addMany([this.districtControllerLayer,this.subDistrictControllerLayer,this.crossLayer,this.highlightLayer])}showSignalControlArea(e){this.districtControllerLayer.removeAll(),this.subDistrictControllerLayer.removeAll(),this.crossLayer.removeAll(),this.highlightLayer.removeAll(),this.districtControllerLayer.visible=!0;for(const t of e){const r=new L.default(t);this.drawArea(r,!0)}return this.watchHandle=S.watch(()=>this.view.scale,(t,r)=>{t>this.crossScale&&r<=this.crossScale?(this.crossLayer.graphics.forEach(s=>{s.symbol=this.getCrossGraphicSymbol(s.attributes,"marker")}),this.highlightLayer.graphics.forEach(s=>{s.getAttribute("type")==="cross"&&(s.symbol=this.getCrossGraphicSymbol(s.attributes,"marker"))})):t<=this.crossScale&&r>this.crossScale&&(this.crossLayer.graphics.forEach(s=>{s.symbol=this.getCrossGraphicSymbol(s.attributes,"picture")}),this.highlightLayer.graphics.forEach(s=>{s.getAttribute("type")==="cross"&&(s.symbol=this.getCrossGraphicSymbol(s.attributes,"picture"))}))}),{status:0,message:"ok"}}clearSignalControlArea(){var e;return this.districtControllerLayer.removeAll(),this.subDistrictControllerLayer.removeAll(),this.crossLayer.removeAll(),this.highlightLayer.removeAll(),(e=this.watchHandle)==null||e.remove(),this.view.closePopup(),{status:0,message:"ok"}}async locateSignalControlArea(e){const t=this.findAreaGraphic(e.id);return t?(t.attributes.type==="cross"?await this.view.goTo({target:t.geometry,scale:1500}):await this.view.goTo(t.geometry),{status:0,message:"ok"}):{status:1,message:"未找到"}}async highlightSignalControlArea(e){if(!e.id||e.id==="")return{status:1,message:"请输入id"};this.highlightLayer.removeAll(),this.districtControllerLayer.visible=!1;const t=this.districtControllerLayer.graphics.filter(i=>i.getAttribute("id")===e.id).toArray().map(i=>i.clone()),r=this.subDistrictControllerLayer.graphics.filter(i=>i.getAttribute("id")===e.id||i.getAttribute("parentId")===e.id).toArray().map(i=>i.clone()),s=this.crossLayer.graphics.filter(i=>i.getAttribute("id")===e.id||i.getAttribute("districtId")===e.id||i.getAttribute("subDistrictId")===e.id).toArray().map(i=>i.clone());if(t.length>0&&this.highlightLayer.addMany(t),r.length>0&&this.highlightLayer.addMany(r),s.length>0&&this.highlightLayer.addMany(s),this.highlightLayer.graphics.length===0)return{status:1,message:"未找到"};if(t.length>0)await this.view.goTo(t);else if(r.length>0){const i=r[0].geometry.centroid;await this.view.goTo({target:i,scale:this.crossScale-500})}else s.length>1?await this.view.goTo(s):await this.view.goTo({target:s[0].geometry,scale:1500});return{status:0,message:"ok"}}resetHighlight(){return this.highlightLayer.removeAll(),this.view.closePopup(),this.districtControllerLayer.visible=!0,{status:0,message:"ok"}}showSubSignalControlArea(e){const t=e.children;console.log(t);const r=t.map(s=>new y({geometry:{type:"point",x:s.longitude,y:s.latitude},symbol:this.getCrossGraphicInSubDistrict(),attributes:{id:s.id,name:s.name,signalId:s.signalId}}));return this.crossLayer.addMany(r),this.view.goTo(r),{status:0,message:"ok"}}editSubSignalArea(){return{status:0,message:"ok"}}findAreaGraphic(e){let t=this.districtControllerLayer.graphics.find(r=>r.attributes.id===e);return t||(t=this.subDistrictControllerLayer.graphics.find(r=>r.attributes.id===e)),t||(t=this.crossLayer.graphics.find(r=>r.attributes.id===e)),t}drawArea(e,t){const r=e.getAllCrossCoordinates();if(r.length>=2){let i=null;if(r.length===2)i=l.lineString(r);else{if(t){const c=l.featureCollection(r.map(p=>l.point(p)));i=f(c)}else{const c=v(r,.5);c.length>=4&&(i=l.polygon([c]))}i||(i=l.lineString(r))}const n=b(i.geometry,t?200:30,{units:"meters"});let o;t?o=[{fieldName:"id",label:"区控编号"},{fieldName:"crossCount",label:"路口数量"},{fieldName:"subDistrictCount",label:"子区数量"}]:o=[{fieldName:"parentName",label:"所属区控"},{fieldName:"crossCount",label:"路口数量"}];const g={type:"signalControlArea",id:e.id,name:e.name,parentId:e.parentId,parentName:e.parentName,crossCount:e.crossCount,subDistrictCount:e.subDistrictCount},u=new y({geometry:{type:"polygon",rings:n.geometry.coordinates},symbol:{type:"simple-fill",color:[...e.areaColor,.2],outline:{color:e.areaColor,width:3,style:t?"solid":"long-dash"}},attributes:g,popupTemplate:{title:`${t?"区控":"子区"} ${e.name}`,content:[{type:"fields",fieldInfos:o}]}});t?this.districtControllerLayer.add(u):this.subDistrictControllerLayer.add(u)}for(const i of e.subDistricts)this.drawArea(i,!1);const s=[];e.crosses.forEach(i=>{const n={type:"cross",id:i.id,name:i.name,color:e.areaColor,signalId:i.signalId,districtId:t?e.id:e.parentId,districtName:t?e.name:e.parentName,subDistrictId:t?"":e.id,subDistrictName:t?"":e.name,isKey:i.isKey},o=new y({geometry:{type:"point",x:i.longitude,y:i.latitude},symbol:this.getCrossGraphicSymbol(n,"marker"),attributes:n,popupTemplate:{title:i.name,content:[{type:"fields",fieldInfos:[{fieldName:"districtName",label:"区控名称"},{fieldName:"subDistrictName",label:"子区名称"},{fieldName:"id",label:"路口编号"},{fieldName:"signalId",label:"信号机编号"}]}]}});s.push(o)}),this.crossLayer.addMany(s)}getCrossGraphicInSubDistrict(){return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:'Replace($feature.name, "与", "/") + " " + $feature.signalId',returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:20,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[0,0,0,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:20,rotateClockwise:!0,textureFilter:"Picture",url:"/GisViewerAssets/Images/gis_lkcz_xz.png"}]}}}}getCrossGraphicSymbol(e,t){const{isKey:r,color:s}=e;if(t==="marker")return r?{type:"picture-marker",url:"/GisViewerAssets/Images/icon_star.png",width:"30px",height:"30px"}:{type:"simple-marker",style:"circle",color:s,size:8,outline:{color:"white",width:1}};if(t==="picture")return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:'Replace($feature.name, "与", "/") + " " + $feature.signalId',returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:r?50:40,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[0,0,0,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:r?45:30,rotateClockwise:!0,textureFilter:"Picture",url:`/GisViewerAssets/Images/xhj_${r?4:1}.png`,offsetY:r?22:15}]}}}}}exports.default=I;
|
package/lib/src/types/index.d.ts
CHANGED
|
@@ -248,6 +248,7 @@ export interface IJunctionTableData {
|
|
|
248
248
|
factoryCode?: string;
|
|
249
249
|
}
|
|
250
250
|
export interface ISignalCountdownProps {
|
|
251
|
+
displayMode: string;
|
|
251
252
|
crossId: string;
|
|
252
253
|
roadId: string;
|
|
253
254
|
mapPoint: number[];
|
|
@@ -257,6 +258,7 @@ export interface ISignalCountdownProps {
|
|
|
257
258
|
top: number;
|
|
258
259
|
};
|
|
259
260
|
rotation: number;
|
|
261
|
+
scale: number;
|
|
260
262
|
lampStatus: {
|
|
261
263
|
uNumber?: number;
|
|
262
264
|
uColor?: string;
|