Commit 50520c7f9aae9393d086e7c6833cd0445e17ec2b
1 parent
7821e6c0
update...
Showing
7 changed files
with
90 additions
and
59 deletions
src/main/resources/static/real_control_v2/mapmonitor/css/real.css
src/main/resources/static/real_control_v2/mapmonitor/fragments/map_config.html
| ... | ... | @@ -4,9 +4,9 @@ |
| 4 | 4 | <div class="uk-form-row"> |
| 5 | 5 | <span class="uk-form-label">图层</span> |
| 6 | 6 | <div class="uk-form-controls"> |
| 7 | - <label><input type="radio" name="map_type" {{if map_type=='baidu'}}checked{{/if}}> 百度</label> | |
| 8 | - <label><input type="radio" name="map_type" {{if map_type=='gaode'}}checked{{/if}}> 高德</label> | |
| 9 | - <label><input type="checkbox" name="map_type" {{if traffic}}checked{{/if}}> 实时路况</label> | |
| 7 | + <label><input type="radio" value="baidu" name="map_type" {{if map_type=='baidu'}}checked{{/if}}> 百度</label> | |
| 8 | + <label><input type="radio" value="gaode" name="map_type" {{if map_type=='gaode'}}checked{{/if}}> 高德</label> | |
| 9 | + <label><input type="checkbox" name="traffic" {{if traffic}}checked{{/if}}> 实时路况</label> | |
| 10 | 10 | </div> |
| 11 | 11 | </div> |
| 12 | 12 | |
| ... | ... | @@ -42,21 +42,21 @@ |
| 42 | 42 | <div class="color_block"> |
| 43 | 43 | 上行 |
| 44 | 44 | <div class="sp-placeholder"> |
| 45 | - <div class="sp-placeholder-color" style="background: {{carIcon.color.up}}"></div> | |
| 45 | + <div class="sp-placeholder-color" data-name="carIcon.color.up" style="background: {{carIcon.color.up}}"></div> | |
| 46 | 46 | </div> |
| 47 | 47 | </div> |
| 48 | 48 | |
| 49 | 49 | <div class="color_block"> |
| 50 | 50 | 下行 |
| 51 | 51 | <div class="sp-placeholder"> |
| 52 | - <div class="sp-placeholder-color" style="background: {{carIcon.color.down}}"></div> | |
| 52 | + <div class="sp-placeholder-color" data-name="carIcon.color.down" style="background: {{carIcon.color.down}}"></div> | |
| 53 | 53 | </div> |
| 54 | 54 | </div> |
| 55 | 55 | |
| 56 | 56 | <div class="color_block"> |
| 57 | 57 | 非营运 |
| 58 | 58 | <div class="sp-placeholder"> |
| 59 | - <div class="sp-placeholder-color" style="background: {{carIcon.color.nonOperation}}"></div> | |
| 59 | + <div class="sp-placeholder-color" data-name="carIcon.color.nonOperation" style="background: {{carIcon.color.nonOperation}}"></div> | |
| 60 | 60 | </div> |
| 61 | 61 | </div> |
| 62 | 62 | </div> |
| ... | ... | @@ -68,14 +68,14 @@ |
| 68 | 68 | <div class="color_block"> |
| 69 | 69 | 上行 |
| 70 | 70 | <div class="sp-placeholder"> |
| 71 | - <div class="sp-placeholder-color" style="background: {{section.color.up}}"></div> | |
| 71 | + <div class="sp-placeholder-color" data-name="section.color.up" style="background: {{section.color.up}}"></div> | |
| 72 | 72 | </div> |
| 73 | 73 | </div> |
| 74 | 74 | |
| 75 | 75 | <div class="color_block"> |
| 76 | 76 | 下行 |
| 77 | 77 | <div class="sp-placeholder"> |
| 78 | - <div class="sp-placeholder-color" style="background: {{section.color.down}}"></div> | |
| 78 | + <div class="sp-placeholder-color" data-name="section.color.down" style="background: {{section.color.down}}"></div> | |
| 79 | 79 | </div> |
| 80 | 80 | </div> |
| 81 | 81 | </div> |
| ... | ... | @@ -84,4 +84,4 @@ |
| 84 | 84 | <br> |
| 85 | 85 | </form> |
| 86 | 86 | </script> |
| 87 | 87 | -</div> |
| 88 | +</div> | |
| 88 | 89 | \ No newline at end of file | ... | ... |
src/main/resources/static/real_control_v2/mapmonitor/fragments/map_infowindow.html
| 1 | 1 | <div> |
| 2 | 2 | <script id="map-win-gps-detail-temp" type="text/html"> |
| 3 | - <div class="gps_info_win"> | |
| 4 | - <h5 style="color:#0E6AF9;"> | |
| 5 | - {{if stationName!=null}} | |
| 3 | + <div class="gps_info_win" > | |
| 4 | + <h4>{{nbbm}}</h4> | |
| 5 | + <h5> | |
| 6 | + {{lineName}} | |
| 7 | + ({{if stationName!=null}} | |
| 6 | 8 | {{stationName}} |
| 7 | 9 | {{else}} |
| 8 | 10 | 未知站点 |
| 9 | - {{/if}} | |
| 11 | + {{/if}}) | |
| 10 | 12 | </h5> |
| 11 | - <h4 style="margin: 5px 0 5px 0;"> | |
| 12 | - <span style="color: #0E6AF9;">{{nbbm}}</span> | |
| 13 | - </h4> | |
| 14 | - <p> | |
| 15 | - 营运状态:{{if state==0}}营运{{else}}非营运{{/if}} | |
| 16 | - </p> | |
| 17 | - <p> | |
| 18 | - 走向:{{if upDown==0}}上行{{else if upDown==1}}下行{{else}}未知走向{{/if}} | |
| 19 | - </p> | |
| 20 | 13 | <p>速度:{{speed}}</p> |
| 14 | + <p>角度:{{direction}}</p> | |
| 21 | 15 | <p>经度:{{lon}}</p> |
| 22 | 16 | <p>纬度:{{lat}}</p> |
| 23 | 17 | |
| 24 | - <!--<p style="color: gray;">{{fromNow}} 更新</p>--> | |
| 18 | + <p class="date-str">{{dateStr}}</p> | |
| 25 | 19 | <hr> |
| 26 | - <p> | |
| 27 | - {{if currSch!=null}} | |
| 28 | - 路牌:{{currSch.lpName}} | |
| 29 | - {{/if}} | |
| 30 | - </p> | |
| 31 | - <p class="banci-info"> | |
| 32 | - {{if currSch!=null}}开往 {{currSch.zdzName}}{{/if}} | |
| 33 | - </p> | |
| 34 | - <p class="banci-info"> | |
| 35 | - {{if nextSch!=null}} | |
| 36 | - 下一班{{nextSch.qdzName}} {{nextSch.fcsj}} 发车 | |
| 37 | - {{/if}} | |
| 38 | - </p> | |
| 39 | - <a href="javascript:lineGroup.toPlayBack('{{nbbm}}', '{{lineId}}')" class="link_to_pback" | |
| 40 | - style="color:#006600;font-size:12px;">轨迹回放</a> | |
| 20 | + {{if expectStopTime!=null}} | |
| 21 | + <a href="javascript:;" style="color: #07D;margin-right: 7px;">预计 {{expectStopTime}} 分钟到达终点</a> | |
| 22 | + {{/if}} | |
| 23 | + <a href="javascript:;" style="float: right;">轨迹回放</a> | |
| 41 | 24 | </div> |
| 42 | 25 | </script> |
| 43 | 26 | -</div> |
| 27 | +</div> | |
| 44 | 28 | \ No newline at end of file | ... | ... |
src/main/resources/static/real_control_v2/mapmonitor/js/config.js
| ... | ... | @@ -78,19 +78,36 @@ var gb_map_config=(function () { |
| 78 | 78 | if(!name) |
| 79 | 79 | return; |
| 80 | 80 | |
| 81 | - handler[name] && handler[name](val); | |
| 81 | + handler[name] && handler[name].call(this, val); | |
| 82 | 82 | }; |
| 83 | 83 | |
| 84 | 84 | var handler={ |
| 85 | - map_type: changeMapType | |
| 85 | + map_type: changeMapType, | |
| 86 | + traffic: trafficSwitch | |
| 86 | 87 | }; |
| 87 | 88 | |
| 88 | 89 | //切换地图类型 |
| 89 | 90 | function changeMapType(val) { |
| 91 | + //修改配置项 | |
| 92 | + set('map_type', val); | |
| 93 | + | |
| 90 | 94 | gb_map_imap.changeMap(val, function () { |
| 95 | + //重绘覆盖物 | |
| 91 | 96 | gb_map_overlay_mge.reDraw(); |
| 97 | + setTimeout(function () { | |
| 98 | + //实时路况为打开状态 | |
| 99 | + if(defaultConfig.traffic) | |
| 100 | + gb_map_imap.call('traffic', true); | |
| 101 | + }, 1000); | |
| 92 | 102 | }); |
| 93 | 103 | } |
| 104 | + | |
| 105 | + //实时路况 | |
| 106 | + function trafficSwitch(val) { | |
| 107 | + //修改配置项 | |
| 108 | + set('traffic', this.checked); | |
| 109 | + gb_map_imap.call('traffic', this.checked); | |
| 110 | + } | |
| 94 | 111 | |
| 95 | 112 | function recursion_get_attr(data, attr){ |
| 96 | 113 | var ats = attr.split('.'), |
| ... | ... | @@ -124,6 +141,10 @@ var gb_map_config=(function () { |
| 124 | 141 | }); |
| 125 | 142 | } |
| 126 | 143 | |
| 144 | + function set(name, val){ | |
| 145 | + defaultConfig[name]=val; | |
| 146 | + } | |
| 147 | + | |
| 127 | 148 | return { |
| 128 | 149 | getConfig: function () { |
| 129 | 150 | return defaultConfig; | ... | ... |
src/main/resources/static/real_control_v2/mapmonitor/js/map/iMap.js
| ... | ... | @@ -24,20 +24,17 @@ var gb_map_imap = (function () { |
| 24 | 24 | var oldMap = maps[currentMap].instance; |
| 25 | 25 | oldMap.destroy && oldMap.destroy(); |
| 26 | 26 | //新地图 INIT |
| 27 | - var text = maps[mapName].text; | |
| 27 | + //var text = maps[mapName].text; | |
| 28 | 28 | //layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0}); |
| 29 | 29 | var newMap = maps[mapName].instance; |
| 30 | - newMap.init(cb); | |
| 31 | 30 | |
| 32 | 31 | currentMap = mapName; |
| 32 | + newMap.init(cb); | |
| 33 | 33 | } else |
| 34 | 34 | alertErr('不存在的地图实例' + mapName); |
| 35 | 35 | }, |
| 36 | 36 | createCarIcon: createCarIcon, |
| 37 | 37 | call: function (f, opts) { |
| 38 | - if (f == 'init') | |
| 39 | - setText(maps[currentMap].text); | |
| 40 | - | |
| 41 | 38 | var instance = maps[currentMap].instance; |
| 42 | 39 | if (instance[f]) |
| 43 | 40 | instance[f](opts); | ... | ... |
src/main/resources/static/real_control_v2/mapmonitor/js/map/platform/baidu.js
| ... | ... | @@ -11,6 +11,8 @@ var gb_map_baidu = (function(){ |
| 11 | 11 | |
| 12 | 12 | var polylines={}; |
| 13 | 13 | var buffAreas = {}; |
| 14 | + | |
| 15 | + var ctrl; | |
| 14 | 16 | var baiduInstance = { |
| 15 | 17 | //初始化 |
| 16 | 18 | init: function(cb){ |
| ... | ... | @@ -20,18 +22,17 @@ var gb_map_baidu = (function(){ |
| 20 | 22 | } |
| 21 | 23 | map = new BMap.Map($(gb_map_consts.mapContainer)[0]); |
| 22 | 24 | //中心点和缩放级别 |
| 23 | - map.centerAndZoom(new BMap.Point(gb_map_consts.center_point.lng, gb_map_consts.center_point.lat), 12); | |
| 25 | + map.centerAndZoom(new BMap.Point(gb_map_consts.center_point.lng, gb_map_consts.center_point.lat), 13); | |
| 24 | 26 | map.enableScrollWheelZoom(); |
| 25 | 27 | |
| 26 | - | |
| 27 | - | |
| 28 | + cb && cb(); | |
| 28 | 29 | //window.localStorage.setItem('real_map', 'baidu'); |
| 29 | 30 | |
| 30 | 31 | // 路况控件 |
| 31 | -/* var ctrl = new BMapLib.TrafficControl(); | |
| 32 | + ctrl = new BMapLib.TrafficControl(); | |
| 32 | 33 | map.addControl(ctrl); |
| 33 | 34 | |
| 34 | - $(gb_map_consts.trafficBtn).on('click', function() { | |
| 35 | + /*$(gb_map_consts.trafficBtn).on('click', function() { | |
| 35 | 36 | if (traffVisible) { |
| 36 | 37 | ctrl.hide(); |
| 37 | 38 | traffVisible = false; |
| ... | ... | @@ -78,8 +79,16 @@ var gb_map_baidu = (function(){ |
| 78 | 79 | if(opt.hide) |
| 79 | 80 | polyline.hide(); |
| 80 | 81 | map.addOverlay(polyline); |
| 81 | - //居中 | |
| 82 | - //centerToPolyline(polyline); | |
| 82 | + | |
| 83 | + //延迟居中,避免多次调用时抖动 | |
| 84 | + delayToCenter(pos[parseInt(pos.length / 2)]); | |
| 85 | + //map.panTo(pos[parseInt(pos.length / 2)]); | |
| 86 | + }, | |
| 87 | + traffic: function (enable) { | |
| 88 | + if(enable) | |
| 89 | + ctrl.show(); | |
| 90 | + else | |
| 91 | + ctrl.hide(); | |
| 83 | 92 | }, |
| 84 | 93 | //根据id 显示polyline |
| 85 | 94 | refreshPolyline: function (opt) { |
| ... | ... | @@ -212,9 +221,9 @@ var gb_map_baidu = (function(){ |
| 212 | 221 | } |
| 213 | 222 | |
| 214 | 223 | var bd_gps_info_win_opts = { |
| 215 | - width : 190, | |
| 224 | + width : 0, | |
| 216 | 225 | height: 255, |
| 217 | - enableMessage:true | |
| 226 | + enableMessage:false | |
| 218 | 227 | }; |
| 219 | 228 | function createBDMarkerByGps(gpsData){ |
| 220 | 229 | |
| ... | ... | @@ -239,7 +248,7 @@ var gb_map_baidu = (function(){ |
| 239 | 248 | } |
| 240 | 249 | |
| 241 | 250 | //隐藏线路线条 |
| 242 | - function hideLinePolyline(){ | |
| 251 | +/* function hideLinePolyline(){ | |
| 243 | 252 | if(!linePolyline || linePolyline.length == 0) |
| 244 | 253 | return; |
| 245 | 254 | |
| ... | ... | @@ -258,7 +267,7 @@ var gb_map_baidu = (function(){ |
| 258 | 267 | $.each(linePolyline, function(){ |
| 259 | 268 | this.setStrokeOpacity(0.5); |
| 260 | 269 | }); |
| 261 | - } | |
| 270 | + }*/ | |
| 262 | 271 | |
| 263 | 272 | function moveMarker(m, gps){ |
| 264 | 273 | m.setPosition(new BMap.Point(gps.bd_lon, gps.bd_lat)); |
| ... | ... | @@ -297,6 +306,15 @@ var gb_map_baidu = (function(){ |
| 297 | 306 | map.panTo(pos[parseInt(pos.length / 2)]); |
| 298 | 307 | }*/ |
| 299 | 308 | |
| 309 | + | |
| 310 | + var c_delay = 300, c_point; | |
| 311 | + function delayToCenter(point) { | |
| 312 | + c_point = point; | |
| 313 | + setTimeout(function () { | |
| 314 | + map.panTo(c_point); | |
| 315 | + }, c_delay); | |
| 316 | + } | |
| 317 | + | |
| 300 | 318 | //文件载入完毕 |
| 301 | 319 | mapmonitor_load_ep.emitLater('load_baidu'); |
| 302 | 320 | ... | ... |
src/main/resources/static/real_control_v2/mapmonitor/js/map/platform/gaode.js
| ... | ... | @@ -19,6 +19,7 @@ var gb_map_gaode = (function() { |
| 19 | 19 | var polylines={}; |
| 20 | 20 | //实时路况是否显示 |
| 21 | 21 | var traffVisible; |
| 22 | + var trafficLayer; | |
| 22 | 23 | var gaodeInstance = { |
| 23 | 24 | init : function(cb) { |
| 24 | 25 | var $mapCon = $(gb_map_consts.mapContainer); |
| ... | ... | @@ -28,7 +29,7 @@ var gb_map_gaode = (function() { |
| 28 | 29 | |
| 29 | 30 | map = new AMap.Map($mapCon[0]); |
| 30 | 31 | // 地图中心和缩放级别 |
| 31 | - map.setZoomAndCenter(14, [ gb_map_consts.center_point.lng, gb_map_consts.center_point.lat ]); | |
| 32 | + map.setZoomAndCenter(13, [ gb_map_consts.center_point.lng, gb_map_consts.center_point.lat ]); | |
| 32 | 33 | // 加载完成 |
| 33 | 34 | AMap.event.addListener(map, 'complete', function() { |
| 34 | 35 | //window.localStorage.setItem('real_map', 'gaode'); |
| ... | ... | @@ -38,11 +39,11 @@ var gb_map_gaode = (function() { |
| 38 | 39 | }); |
| 39 | 40 | |
| 40 | 41 | // 实时路况图层 |
| 41 | - /*var trafficLayer = new AMap.TileLayer.Traffic(); | |
| 42 | + trafficLayer = new AMap.TileLayer.Traffic(); | |
| 42 | 43 | trafficLayer.setMap(map); |
| 43 | 44 | trafficLayer.hide(); |
| 44 | 45 | |
| 45 | - $(gb_map_consts.trafficBtn).on('click', function() { | |
| 46 | + /*$(gb_map_consts.trafficBtn).on('click', function() { | |
| 46 | 47 | if (traffVisible) { |
| 47 | 48 | trafficLayer.hide(); |
| 48 | 49 | traffVisible = false; |
| ... | ... | @@ -67,6 +68,12 @@ var gb_map_gaode = (function() { |
| 67 | 68 | $('.mapTools').removeClass('gaode'); |
| 68 | 69 | $('.leftUtils').removeClass('gaode'); |
| 69 | 70 | }, |
| 71 | + traffic: function (enable) { | |
| 72 | + if(enable) | |
| 73 | + trafficLayer.show(); | |
| 74 | + else | |
| 75 | + trafficLayer.hide(); | |
| 76 | + }, | |
| 70 | 77 | clearAll: function () { |
| 71 | 78 | realMarkers = {}; |
| 72 | 79 | polylines={}; |
| ... | ... | @@ -88,7 +95,6 @@ var gb_map_gaode = (function() { |
| 88 | 95 | }); |
| 89 | 96 | |
| 90 | 97 | opt.style.path=pos; |
| 91 | - console.log('opt.style', opt.style); | |
| 92 | 98 | var polyline = new AMap.Polyline(opt.style); |
| 93 | 99 | //根据ID保存映射 |
| 94 | 100 | polylines[opt.id]=polyline; | ... | ... |