|
@@ -21,11 +21,12 @@ let _isBlur = false;
|
|
|
let _rollingNum;
|
|
|
let _visualNum;
|
|
|
let _liNum;
|
|
|
-const _arrowSize = new Array();
|
|
|
-const _lineSize = new Array();
|
|
|
-const _strokeWidth = new Array();
|
|
|
-const _imgSize = new Array();
|
|
|
+const _arrowSize = [];
|
|
|
+const _lineSize = [];
|
|
|
+const _strokeWidth = [];
|
|
|
+const _imgSize = [];
|
|
|
const drctMap = new Map();
|
|
|
+
|
|
|
drctMap.set(1, 0);
|
|
|
drctMap.set(2, 90);
|
|
|
drctMap.set(3, 180);
|
|
@@ -35,18 +36,22 @@ drctMap.set(6, 135);
|
|
|
drctMap.set(7, 225);
|
|
|
drctMap.set(8, 315);
|
|
|
|
|
|
-_arrowSize[16] = 8;
|
|
|
-_arrowSize[17] = 12;
|
|
|
-_arrowSize[18] = 24;
|
|
|
+_arrowSize[15] = 6;
|
|
|
+_arrowSize[16] = 6;
|
|
|
+_arrowSize[17] = 10;
|
|
|
+_arrowSize[18] = 18;
|
|
|
|
|
|
+_lineSize[15] = 3;
|
|
|
_lineSize[16] = 3;
|
|
|
_lineSize[17] = 5;
|
|
|
_lineSize[18] = 8;
|
|
|
|
|
|
+_strokeWidth[15] = 3;
|
|
|
_strokeWidth[16] = 3;
|
|
|
_strokeWidth[17] = 5;
|
|
|
-_strokeWidth[18] = 10;
|
|
|
+_strokeWidth[18] = 8;
|
|
|
|
|
|
+_imgSize[15] = 55;
|
|
|
_imgSize[16] = 55;
|
|
|
_imgSize[17] = 90;
|
|
|
_imgSize[18] = 175;
|
|
@@ -68,16 +73,34 @@ _signalLyr = new ol.layer.VectorImage({
|
|
|
zIndex : 99,
|
|
|
visible : false,
|
|
|
});
|
|
|
+// _dotLyr = new ol.layer.Vector({
|
|
|
+// source: new ol.source.Vector({
|
|
|
+// features: [],
|
|
|
+// }),
|
|
|
+// style: function (feature, res) {
|
|
|
+// return getDotStyle(feature, res);
|
|
|
+// },
|
|
|
+// zIndex: 99,
|
|
|
+// visible: false,
|
|
|
+// } );
|
|
|
_dotLyr = new ol.layer.Vector({
|
|
|
source: new ol.source.Vector({
|
|
|
features: [],
|
|
|
}),
|
|
|
- style: function(feature, res){
|
|
|
- return getDotStyle(feature, res)
|
|
|
+ style: function (feature, res) {
|
|
|
+ return getDotLineStyle(feature, res);
|
|
|
},
|
|
|
- zIndex : 99,
|
|
|
- visible : false,
|
|
|
+ zIndex: 99,
|
|
|
+ visible: false,
|
|
|
});
|
|
|
+function getDotLineStyle(feature, res) {
|
|
|
+ let zoom = _mapManager.map.getView().getZoom();
|
|
|
+ let style = new ol.style.Style({
|
|
|
+ fill: new ol.style.Fill({ color: "yellow", weight: _lineSize[zoom] }),
|
|
|
+ stroke: new ol.style.Stroke({ color: "yellow", width: _lineSize[zoom] }),
|
|
|
+ });
|
|
|
+ return style;
|
|
|
+}
|
|
|
class SigDrawer {
|
|
|
constructor(sig, obj) {
|
|
|
this.cntl_mode = sig.cntl_mode;
|
|
@@ -90,8 +113,8 @@ class SigDrawer {
|
|
|
this.dir_b = sig.dir_b ;
|
|
|
this.posA = null;
|
|
|
this.posB = null;
|
|
|
- this.coordAPointArr = new Array();
|
|
|
- this.coordBPointArr = new Array();
|
|
|
+ this.coordAPointArr = [];
|
|
|
+ this.coordBPointArr = [];
|
|
|
this.sgnl_ixr_nmbr = sig.sgnl_ixr_nmbr;
|
|
|
this.spcl_cntl = sig.spcl_cntl;
|
|
|
this.endArrawA = false;
|
|
@@ -129,8 +152,8 @@ class SigDrawer {
|
|
|
obj : this,
|
|
|
});
|
|
|
_circleLayer.getSource().addFeature(feature);
|
|
|
- if (this.spcl_cntl === 1 &&
|
|
|
- _mapManager.layerArr[LayerIndex.Sig].objMap.size > 0 &&
|
|
|
+ if (this.spcl_cntl === 1 &&
|
|
|
+ _mapManager.layerArr[LayerIndex.Sig].objMap.size > 0 &&
|
|
|
$('.itsSIG')[0].src.indexOf('btnSIGOn.png') > -1) {
|
|
|
let div = $('<div id="marker_' + _mapManager.map.getView().getZoom() +'"></div>')
|
|
|
$('body').append(div);
|
|
@@ -166,45 +189,61 @@ class SigDrawer {
|
|
|
let gapAngle;
|
|
|
this.initDraw();
|
|
|
if (a === 1 || a === 2) { // 직진, 좌회전
|
|
|
- gapAngle = (a === 1) ? 270 : 90;
|
|
|
+ //gapAngle = (a === 1) ? 270 : 90;
|
|
|
+ gapAngle = (a === 2) ? 270 : 90; //for 평택
|
|
|
Adeg = ai + gapAngle;
|
|
|
if (Adeg >= 360) Adeg = Adeg - 360;
|
|
|
- this.posA = getDestinationPoint(this.coordinates[1], this.coordinates[0], Adeg, 8);
|
|
|
+ this.posA = getDestinationPoint(this.coordinates[1], this.coordinates[0], Adeg, 8);
|
|
|
this.endArrawA = true;
|
|
|
}
|
|
|
else if (a === 5) {
|
|
|
// 보행신호
|
|
|
- Adeg = ai + 270;
|
|
|
+ // Adeg = ai + 270;
|
|
|
+ // if (Adeg >= 360) Adeg = Adeg - 360;
|
|
|
+ // this.posA = getDestinationPoint(this.coordinates[1], this.coordinates[0], Adeg, 8);
|
|
|
+ gapAngle = 90; // FOR 평택
|
|
|
+ Adeg = ai + gapAngle;
|
|
|
if (Adeg >= 360) Adeg = Adeg - 360;
|
|
|
this.posA = getDestinationPoint(this.coordinates[1], this.coordinates[0], Adeg, 8);
|
|
|
}
|
|
|
this.coordAPointArr.push(getDestinationPoint(this.posA[1], this.posA[0], ai, 24));
|
|
|
this.coordAPointArr.push(this.posA);
|
|
|
- this.coordAPointArr.push(getDestinationPoint(this.posA[1], this.posA[0], ao, 24));
|
|
|
+ this.coordAPointArr.push(getDestinationPoint(this.posA[1], this.posA[0], ao, 22));
|
|
|
|
|
|
if (b === 1 || b === 2) {
|
|
|
- gapAngle = (b === 1) ? 270 : 90;
|
|
|
+ //gapAngle = (b === 1) ? 270 : 90;
|
|
|
+ gapAngle = (b === 2) ? 270 : 90; // for 평택
|
|
|
Bdeg = bi + gapAngle;
|
|
|
if (Bdeg >= 360) Bdeg = Bdeg - 360;
|
|
|
this.posB = getDestinationPoint(this.coordinates[1], this.coordinates[0], Bdeg, 8);
|
|
|
this.endArrawB = true;
|
|
|
}
|
|
|
- else if (a === 5) {
|
|
|
- Bdeg = bi + 270;
|
|
|
+ else if (b === 5) {
|
|
|
+ // Bdeg = bi + 270;
|
|
|
+ // if (Bdeg >= 360) Bdeg = Bdeg - 360;
|
|
|
+ // this.posB = getDestinationPoint(this.coordinates[1], this.coordinates[0], Bdeg, 8);
|
|
|
+ gapAngle = 270; // FOR 평택
|
|
|
+ Bdeg = bi + gapAngle;
|
|
|
if (Bdeg >= 360) Bdeg = Bdeg - 360;
|
|
|
this.posB = getDestinationPoint(this.coordinates[1], this.coordinates[0], Bdeg, 8);
|
|
|
}
|
|
|
- this.coordBPointArr.push(getDestinationPoint(this.posB[1], this.posB[0], bi, 24));
|
|
|
- this.coordBPointArr.push(this.posB);
|
|
|
- this.coordBPointArr.push(getDestinationPoint(this.posB[1], this.posB[0], bo, 24));
|
|
|
-
|
|
|
+ if (a === 5 && b === 5) {
|
|
|
+ this.coordBPointArr = this.coordAPointArr;
|
|
|
+ } else {
|
|
|
+ this.coordBPointArr.push(getDestinationPoint(this.posB[1], this.posB[0], bi, 24));
|
|
|
+ this.coordBPointArr.push(this.posB);
|
|
|
+ this.coordBPointArr.push(getDestinationPoint(this.posB[1], this.posB[0], bo, 24));
|
|
|
+ }
|
|
|
if (ai != 0 && ao != 0 && bi != 0 && bo != 0) {
|
|
|
- this.drawSignalMap(ai, ao, bi, bo);
|
|
|
+ this.drawSignalMap();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
drawSignalMap() {
|
|
|
- if (this.aCode != 0) {
|
|
|
+ if (this.spcl_cntl === 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.coordAPointArr.length !== 0) {
|
|
|
if (this.endArrawA) {
|
|
|
const feature = new ol.Feature({
|
|
|
geometry : new ol.geom.LineString([this.coordAPointArr[0], this.coordAPointArr[1], this.coordAPointArr[2]]),
|
|
@@ -214,18 +253,25 @@ class SigDrawer {
|
|
|
this.lineAFeatrue = feature;
|
|
|
}
|
|
|
else {
|
|
|
- this.coordAPointArr.map((item)=>{
|
|
|
- const circle1 = new ol.geom.Circle(ol.proj.transform(item, "EPSG:4326", "EPSG:3857"), 4).transform("EPSG:3857", "EPSG:4326");
|
|
|
+ // this.coordAPointArr.map((item)=>{
|
|
|
+ // let circle1 = new ol.geom.Circle(ol.proj.transform(item, "EPSG:4326", "EPSG:3857"), 4).transform("EPSG:3857", "EPSG:4326");
|
|
|
+ // let doteFeature = new ol.Feature({
|
|
|
+ // geometry: circle1,
|
|
|
+ // });
|
|
|
+ // _dotLyr.getSource().addFeature(doteFeature);
|
|
|
+ // });
|
|
|
+ if (this.coordAPointArr.length === 3) {
|
|
|
const feature = new ol.Feature({
|
|
|
- geometry: circle1,
|
|
|
+ geometry: new ol.geom.LineString([this.coordAPointArr[0], this.coordAPointArr[1], this.coordAPointArr[2]]),
|
|
|
+ obj: this,
|
|
|
});
|
|
|
- _dotLyr.getSource().addFeature(feature);
|
|
|
+ _dotLyr.getSource().addFeature( feature );
|
|
|
this.lineAdote = feature;
|
|
|
- })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- if (this.bCode != 0) {
|
|
|
+ if (this.coordBPointArr.length !== 0) {
|
|
|
if (this.endArrawB) {
|
|
|
const feature = new ol.Feature({
|
|
|
geometry : new ol.geom.LineString([this.coordBPointArr[0], this.coordBPointArr[1], this.coordBPointArr[2]]),
|
|
@@ -235,14 +281,21 @@ class SigDrawer {
|
|
|
this.lineBFeatrue = feature;
|
|
|
}
|
|
|
else {
|
|
|
- this.coordBPointArr.map((item)=>{
|
|
|
- const circle1 = new ol.geom.Circle(ol.proj.transform(item, "EPSG:4326", "EPSG:3857"), 4).transform("EPSG:3857", "EPSG:4326");
|
|
|
+ // this.coordBPointArr.map((item)=>{
|
|
|
+ // let circle1 = new ol.geom.Circle(ol.proj.transform(item, "EPSG:4326", "EPSG:3857"), 4).transform("EPSG:3857", "EPSG:4326");
|
|
|
+ // let doteFeature = new ol.Feature({
|
|
|
+ // geometry: circle1,
|
|
|
+ // });
|
|
|
+ // _dotLyr.getSource().addFeature(doteFeature);
|
|
|
+ // });
|
|
|
+ if (this.coordBPointArr.length === 3) {
|
|
|
const feature = new ol.Feature({
|
|
|
- geometry: circle1,
|
|
|
+ geometry: new ol.geom.LineString([this.coordBPointArr[0], this.coordBPointArr[1], this.coordBPointArr[2]]),
|
|
|
+ obj: this,
|
|
|
});
|
|
|
- _dotLyr.getSource().addFeature(feature);
|
|
|
+ _dotLyr.getSource().addFeature( feature );
|
|
|
this.lineBdote = feature;
|
|
|
- });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -258,13 +311,13 @@ class SigDrawer {
|
|
|
* 신호 현시 선 색상
|
|
|
* @param {*} spcl 0 없음, 1 점멸, 2 소등, 3 수동, 4 감응
|
|
|
* @param {*} cntl 0 온라인, 1 오프라인, 2 트랜스, 3 통신장애
|
|
|
- * @returns
|
|
|
+ * @returns
|
|
|
*/
|
|
|
setStrokeColor(spcl, cntl) {
|
|
|
//제어 상태에 따른 선 색상 구분
|
|
|
//기본값 #0000FF, 3 - 통신장애 #FF0000
|
|
|
-
|
|
|
- //특수 제어에 따른 선 색상 구분
|
|
|
+
|
|
|
+ //특수 제어에 따른 선 색상 구분
|
|
|
//기본값 #0000FF, 2 - 소등 #000000, 4 - 감응 #FF0000, 시차제 #FF00FF TODO 코드값 확인
|
|
|
let strokeColor = '#0000FF'; //일반
|
|
|
if (spcl === 2) {
|
|
@@ -368,7 +421,16 @@ function getStyle(feature, res) {
|
|
|
flowStyle.setArrowSize([_arrowSize[zoom], _arrowSize[zoom]]);
|
|
|
return flowStyle;
|
|
|
}
|
|
|
-
|
|
|
+function getLineStyle(feature, res) {
|
|
|
+ let zoom = _mapManager.map.getView().getZoom();
|
|
|
+ let style = new ol.style.Style({
|
|
|
+ stroke: new ol.style.Stroke({
|
|
|
+ color: 'yellow',
|
|
|
+ width: _lineSize[zoom],
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ return style;
|
|
|
+}
|
|
|
function getDotStyle(feature, res) {
|
|
|
let style = new ol.style.Style({
|
|
|
image: new ol.style.Circle({
|
|
@@ -480,13 +542,22 @@ function onSocketReceived(AClientType, AMessage) {
|
|
|
// VMS 메시지 생성 저장
|
|
|
}
|
|
|
else if (command === "sigPhaseStts") {
|
|
|
+ const start = new Date();
|
|
|
initLayer();
|
|
|
+ const end1 = new Date();
|
|
|
jsonData.map((sig)=>{
|
|
|
- let obj = new SigDrawer(sig, _mapManager.layerArr[LayerIndex.Sig].objMap.get(sig.sgnl_ixr_nmbr));
|
|
|
- obj.setCircle();
|
|
|
- obj.setArrow();
|
|
|
- _sigDrawerArr.push(obj);
|
|
|
- })
|
|
|
+ const sigObj = _mapManager.layerArr[LayerIndex.Sig].objMap.get(sig.sgnl_ixr_nmbr);
|
|
|
+ if (sigObj !== undefined) {
|
|
|
+ let obj = new SigDrawer(sig, sigObj);
|
|
|
+ _sigDrawerArr.push(obj);
|
|
|
+ obj.setCircle();
|
|
|
+ if (obj.spcl_cntl !== 1 && obj.cntl_stts != 3) {
|
|
|
+ obj.setArrow();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const end = new Date();
|
|
|
+ console.log(end1 - start, end - start);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -536,11 +607,13 @@ export function doMap() {
|
|
|
|
|
|
function onMapMoveEndFunc(AZoom, ACenterX, ACenterY, ALeft, ABottom, ARight, ATop) {
|
|
|
if ($('.itsSIG').prop('src').indexOf('btnSIGOn.png') > -1) {
|
|
|
- let stts = AZoom >= 16;
|
|
|
+ let stts = AZoom >= 15;
|
|
|
_mapManager.showFacilityLayer('신호제어기', !stts);
|
|
|
- _circleLayer.setVisible(stts);
|
|
|
- _signalLyr.setVisible(stts);
|
|
|
- _dotLyr.setVisible(stts);
|
|
|
+ if (_circleLayer.getVisible() !== stts) {
|
|
|
+ _circleLayer.setVisible(stts);
|
|
|
+ _signalLyr.setVisible(stts);
|
|
|
+ _dotLyr.setVisible(stts);
|
|
|
+ }
|
|
|
let display = stts ? 'block' : 'none';
|
|
|
$('.sig-img').css('display', display);
|
|
|
if (_markerArr.length > 0) {
|
|
@@ -570,6 +643,7 @@ function onMouseClickFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
fetchVmsDsplMsg(obj.NMBR, obj.NAME, obj.LAT, obj.LNG);
|
|
|
} else if (ALyrName === "CCTV" || ALyrName === '웹카메라' || ALyrName === '교차로카메라') {
|
|
|
//cctvMarkerClick(obj.NAME, obj.strmRtmpAddr, obj.LAT, obj.LNG); // 실무용
|
|
|
+ //console.log(X, Y);
|
|
|
//cctvMarkerClick(obj.ID, obj.NAME, obj.rtc_id, obj.rtc_svr_ip, obj.rtc_svr_port, obj.LAT, obj.LNG); //개발용
|
|
|
cctvMarkerClick(obj.ID, obj.NAME, obj.rtc_id, obj.rtc_svr_ip, obj.rtc_svr_port, X, Y); //개발용
|
|
|
}
|
|
@@ -1584,6 +1658,8 @@ function openCCTV(RTC_ID, RTC_SVR_IP, RTC_SVR_PORT, ID) {
|
|
|
const cctvBox = $('.' + ID);
|
|
|
videoBox.on('dblclick', function (){
|
|
|
let video = $('#video_' + ID)[0];
|
|
|
+ console.log(video.width);
|
|
|
+ console.log(cctvBox);
|
|
|
if (video.width === 300) {
|
|
|
cctvBox.css('width', 614);
|
|
|
cctvBox.css('height', 550);
|
|
@@ -1637,7 +1713,7 @@ function calcCCtvDisplayTime(x, y) {
|
|
|
BIS._cctvOverlay.setPosition(undefined);
|
|
|
videojsCheck.Stop();
|
|
|
clearCctvInterval();
|
|
|
- videojsCheck = null;
|
|
|
+ //videojsCheck = null;
|
|
|
}
|
|
|
});
|
|
|
}
|