|
//제거시 타이마 해제 function Pipe_NetworkDateClear(){ clearInterval(NetworkLink_AnimationTimer); AccidentLayer.setStyle(null); AccidentLayer.getSource().clear(); .... } //arrow animation효과로 타이머에 'change' 이벤트 발생 NetworkLink_Animation = 1.0; AccidentLayer.setStyle(NetworkLink_StyleFunction); NetworkLink_AnimationTimer = setInterval(function(){ var _level = Math.floor(map.getView().getZoom()); if(_level >= 16){ NetworkLink_Animation++; if(NetworkLink_Animation > 9)NetworkLink_Animation = 0; AccidentLayer.getSource().dispatchEvent('change'); } }, 500); |
//Style Function, 해상도에 따른 간격으로 마커를 그린다 화살표시 각도와 흐름을 위한 선분 위의 등가 위치 계산 function NetworkLink_StyleFunction(Feature, res){ var _Value = Feature.values_[NetworkLink_FieldName]; var _ColorIdx = _MaxCount - Math.min(parseInt((Math.abs(_Value)-NetworkLink_MinX)/NetworkLink_diffX), _MaxCount); var _hexColor = Main_ColorList[_ColorIdx]; var style_simple1 = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255, 255, 255, 1)', lineCap: 'butt', lineJoin: 'miter', width: 8 }) }); var style_simple2 = new ol.style.Style({ stroke: new ol.style.Stroke({ color: _hexColor, lineCap: 'butt', lineJoin: 'miter', width: 6 }) }); /////////////////////////// var _styles = [style_simple1, style_simple2]; var _level = Math.floor(map.getView().getZoom()); if(_level >= 16){ var trackLine = Feature.getGeometry().getLineString(); let length = trackLine.getLength(); let stpes=20; if(_level<=16)stpes = stpes/Math.pow(2,17-_level); stpes = stpes*res; let arrowsNum=parseInt(length/stpes); var Re_arraw_coor = trackLine.getCoordinateAt(0); for(let i=0;i<=arrowsNum;i++){ var addCoodInx = ((1/arrowsNum)*(NetworkLink_Animation/10)); if(_Value < 0) addCoodInx = -addCoodInx; let arraw_coor = trackLine.getCoordinateAt(i/arrowsNum + addCoodInx); var dx = arraw_coor[0] - Re_arraw_coor[0]; var dy = arraw_coor[1] - Re_arraw_coor[1]; Re_arraw_coor = arraw_coor; let arrow_rotation = -Math.atan2(dy, dx) - (90*Math.PI/180); if(_Value < 0) arrow_rotation += (Math.PI); _styles.push(new ol.style.Style({ geometry: new ol.geom.Point(arraw_coor), image: new ol.style.Icon({ src: '../images/down.png', rotateWithView: true, rotation: arrow_rotation }) })); } } return _styles; } |
|