update...

潘钊
1 parent 7821e6c0
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
src/main/resources/static/real_control_v2/mapmonitor/fragments/map_infowindow.html
src/main/resources/static/real_control_v2/mapmonitor/js/config.js
src/main/resources/static/real_control_v2/mapmonitor/js/map/iMap.js
src/main/resources/static/real_control_v2/mapmonitor/js/map/platform/baidu.js
src/main/resources/static/real_control_v2/mapmonitor/js/map/platform/gaode.js
@@ -305,4 +305,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
+}
+
+#tcWrap.maplibTc{
+    display: none;
 }
 \ No newline at end of file
@@ -4,9 +4,9 @@
             <div class="uk-form-row">
                 <span class="uk-form-label">图层</span>
                 <div class="uk-form-controls">
-                    <label><input type="radio" name="map_type" {{if map_type=='baidu'}}checked{{/if}}> 百度</label>
-                    <label><input type="radio" name="map_type" {{if map_type=='gaode'}}checked{{/if}}> 高德</label>
-                    <label><input type="checkbox" name="map_type" {{if traffic}}checked{{/if}}> 实时路况</label>
+                    <label><input type="radio" value="baidu" name="map_type" {{if map_type=='baidu'}}checked{{/if}}> 百度</label>
+                    <label><input type="radio" value="gaode" name="map_type" {{if map_type=='gaode'}}checked{{/if}}> 高德</label>
+                    <label><input type="checkbox" name="traffic" {{if traffic}}checked{{/if}}> 实时路况</label>
                 </div>
             </div>
@@ -42,21 +42,21 @@
                     <div class="color_block">
                         上行
                         <div class="sp-placeholder">
-                            <div class="sp-placeholder-color" style="background: {{carIcon.color.up}}"></div>
+                            <div class="sp-placeholder-color" data-name="carIcon.color.up" style="background: {{carIcon.color.up}}"></div>
                         </div>
                     </div>
                     <div class="color_block">
                         下行
                         <div class="sp-placeholder">
-                            <div class="sp-placeholder-color" style="background: {{carIcon.color.down}}"></div>
+                            <div class="sp-placeholder-color" data-name="carIcon.color.down" style="background: {{carIcon.color.down}}"></div>
                         </div>
                     </div>
                     <div class="color_block">
                         非营运
                         <div class="sp-placeholder">
-                            <div class="sp-placeholder-color" style="background: {{carIcon.color.nonOperation}}"></div>
+                            <div class="sp-placeholder-color" data-name="carIcon.color.nonOperation" style="background: {{carIcon.color.nonOperation}}"></div>
                         </div>
                     </div>
                 </div>
@@ -68,14 +68,14 @@
                     <div class="color_block">
                         上行
                         <div class="sp-placeholder">
-                            <div class="sp-placeholder-color" style="background: {{section.color.up}}"></div>
+                            <div class="sp-placeholder-color" data-name="section.color.up" style="background: {{section.color.up}}"></div>
                         </div>
                     </div>
                     <div class="color_block">
                         下行
                         <div class="sp-placeholder">
-                            <div class="sp-placeholder-color" style="background: {{section.color.down}}"></div>
+                            <div class="sp-placeholder-color" data-name="section.color.down" style="background: {{section.color.down}}"></div>
                         </div>
                     </div>
                 </div>
@@ -84,4 +84,4 @@
             <br>
         </form>
     </script>
 -</div>
+</div>
 \ No newline at end of file
 <div>
     <script id="map-win-gps-detail-temp" type="text/html">
-        <div class="gps_info_win">
-            <h5 style="color:#0E6AF9;">
-                {{if stationName!=null}}
+        <div class="gps_info_win" >
+            <h4>{{nbbm}}</h4>
+            <h5>
+                {{lineName}}
+                ({{if stationName!=null}}
                 {{stationName}}
                 {{else}}
                 未知站点
-                {{/if}}
+                {{/if}})
             </h5>
-            <h4 style="margin: 5px 0 5px 0;">
-                <span style="color: #0E6AF9;">{{nbbm}}</span>
-            </h4>
-            <p>
-                营运状态：{{if state==0}}营运{{else}}非营运{{/if}}
-            </p>
-            <p>
-                走向：{{if upDown==0}}上行{{else if upDown==1}}下行{{else}}未知走向{{/if}}
-            </p>
             <p>速度：{{speed}}</p>
+            <p>角度：{{direction}}</p>
             <p>经度：{{lon}}</p>
             <p>纬度：{{lat}}</p>
-            <!--<p style="color: gray;">{{fromNow}} 更新</p>-->
+            <p class="date-str">{{dateStr}}</p>
             <hr>
-            <p>
-                {{if currSch!=null}}
-                路牌：{{currSch.lpName}}
-                {{/if}}
-            </p>
-            <p class="banci-info">
-                {{if currSch!=null}}开往 {{currSch.zdzName}}{{/if}}
-            </p>
-            <p class="banci-info">
-                {{if nextSch!=null}}
-                下一班{{nextSch.qdzName}} {{nextSch.fcsj}} 发车
-                {{/if}}
-            </p>
-            <a href="javascript:lineGroup.toPlayBack('{{nbbm}}', '{{lineId}}')" class="link_to_pback"
-               style="color:#006600;font-size:12px;">轨迹回放</a>
+            {{if expectStopTime!=null}}
+                <a href="javascript:;" style="color: #07D;margin-right: 7px;">预计 {{expectStopTime}} 分钟到达终点</a>
+            {{/if}}
+            <a href="javascript:;" style="float: right;">轨迹回放</a>
         </div>
     </script>
 -</div>
+</div>
 \ No newline at end of file
@@ -78,19 +78,36 @@ var gb_map_config=(function () {
         if(!name)
             return;
-        handler[name] && handler[name](val);
+        handler[name] && handler[name].call(this, val);
     };
     var handler={
-        map_type: changeMapType
+        map_type: changeMapType,
+        traffic: trafficSwitch
     };
     //切换地图类型
     function changeMapType(val) {
+        //修改配置项
+        set('map_type', val);
+
         gb_map_imap.changeMap(val, function () {
+            //重绘覆盖物
             gb_map_overlay_mge.reDraw();
+            setTimeout(function () {
+                //实时路况为打开状态
+                if(defaultConfig.traffic)
+                    gb_map_imap.call('traffic', true);
+            }, 1000);
         });
     }
+    
+    //实时路况
+    function trafficSwitch(val) {
+        //修改配置项
+        set('traffic', this.checked);
+        gb_map_imap.call('traffic', this.checked);
+    }
     function recursion_get_attr(data, attr){
         var ats = attr.split('.'),
@@ -124,6 +141,10 @@ var gb_map_config=(function () {
         });
     }
+    function set(name, val){
+        defaultConfig[name]=val;
+    }
+
     return {
         getConfig: function () {
             return defaultConfig;
@@ -24,20 +24,17 @@ var gb_map_imap = (function () {
                 var oldMap = maps[currentMap].instance;
                 oldMap.destroy && oldMap.destroy();
                 //新地图 INIT
-                var text = maps[mapName].text;
+                //var text = maps[mapName].text;
                 //layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0});
                 var newMap = maps[mapName].instance;
-                newMap.init(cb);
                 currentMap = mapName;
+                newMap.init(cb);
             } else
                 alertErr('不存在的地图实例' + mapName);
         },
         createCarIcon: createCarIcon,
         call: function (f, opts) {
-            if (f == 'init')
-                setText(maps[currentMap].text);
-
             var instance = maps[currentMap].instance;
             if (instance[f])
                 instance[f](opts);
@@ -11,6 +11,8 @@ var gb_map_baidu = (function(){
 	var polylines={};
 	var buffAreas = {};
+
+	var ctrl;
 	var baiduInstance = {
 		//初始化
 		init: function(cb){
@@ -20,18 +22,17 @@ var gb_map_baidu = (function(){
 			}
 			map = new BMap.Map($(gb_map_consts.mapContainer)[0]);
 			//中心点和缩放级别
-			map.centerAndZoom(new BMap.Point(gb_map_consts.center_point.lng, gb_map_consts.center_point.lat), 12);
+			map.centerAndZoom(new BMap.Point(gb_map_consts.center_point.lng, gb_map_consts.center_point.lat), 13);
 			map.enableScrollWheelZoom();
-
-
+			cb && cb();
 			//window.localStorage.setItem('real_map', 'baidu');
 			// 路况控件
-/*			var ctrl = new BMapLib.TrafficControl();
+			ctrl = new BMapLib.TrafficControl();
 			map.addControl(ctrl);
-			$(gb_map_consts.trafficBtn).on('click', function() {
+			/*$(gb_map_consts.trafficBtn).on('click', function() {
 				if (traffVisible) {
 					ctrl.hide();
 					traffVisible = false;
@@ -78,8 +79,16 @@ var gb_map_baidu = (function(){
 			if(opt.hide)
 				polyline.hide();
 			map.addOverlay(polyline);
-			//居中
-			//centerToPolyline(polyline);
+
+			//延迟居中，避免多次调用时抖动
+			delayToCenter(pos[parseInt(pos.length / 2)]);
+			//map.panTo(pos[parseInt(pos.length / 2)]);
+		},
+		traffic: function (enable) {
+			if(enable)
+				ctrl.show();
+			else
+				ctrl.hide();
 		},
 		//根据id 显示polyline
 		refreshPolyline: function (opt) {
@@ -212,9 +221,9 @@ var gb_map_baidu = (function(){
 	}
 	var bd_gps_info_win_opts = {
-	  		width : 190,
+			width : 0,
 	  		height: 255,
-	  		enableMessage:true
+			enableMessage:false
 	};
 	function createBDMarkerByGps(gpsData){
@@ -239,7 +248,7 @@ var gb_map_baidu = (function(){
 	}
 	//隐藏线路线条
-	function hideLinePolyline(){
+/*	function hideLinePolyline(){
 		if(!linePolyline || linePolyline.length == 0)
 			return;
@@ -258,7 +267,7 @@ var gb_map_baidu = (function(){
 		$.each(linePolyline, function(){
 			this.setStrokeOpacity(0.5);
 		});
-	}
+	}*/
 	function moveMarker(m, gps){
 		m.setPosition(new BMap.Point(gps.bd_lon, gps.bd_lat));
@@ -297,6 +306,15 @@ var gb_map_baidu = (function(){
 		map.panTo(pos[parseInt(pos.length / 2)]);
 	}*/
+
+	var c_delay = 300, c_point;
+	function delayToCenter(point) {
+		c_point = point;
+		setTimeout(function () {
+			map.panTo(c_point);
+		}, c_delay);
+	}
+
   //文件载入完毕
   mapmonitor_load_ep.emitLater('load_baidu');
@@ -19,6 +19,7 @@ var gb_map_gaode = (function() {
 	var polylines={};
 	//实时路况是否显示
 	var traffVisible;
+	var trafficLayer;
 	var gaodeInstance = {
 		init : function(cb) {
 			var $mapCon = $(gb_map_consts.mapContainer);
@@ -28,7 +29,7 @@ var gb_map_gaode = (function() {
 			map = new AMap.Map($mapCon[0]);
 			// 地图中心和缩放级别
-			map.setZoomAndCenter(14, [ gb_map_consts.center_point.lng, gb_map_consts.center_point.lat ]);
+			map.setZoomAndCenter(13, [ gb_map_consts.center_point.lng, gb_map_consts.center_point.lat ]);
 			// 加载完成
 			AMap.event.addListener(map, 'complete', function() {
 				//window.localStorage.setItem('real_map', 'gaode');
@@ -38,11 +39,11 @@ var gb_map_gaode = (function() {
 			});
 			// 实时路况图层
-			/*var trafficLayer = new AMap.TileLayer.Traffic();
+			trafficLayer = new AMap.TileLayer.Traffic();
 			trafficLayer.setMap(map);
 			trafficLayer.hide();
-			$(gb_map_consts.trafficBtn).on('click', function() {
+			/*$(gb_map_consts.trafficBtn).on('click', function() {
 				if (traffVisible) {
 					trafficLayer.hide();
 					traffVisible = false;
@@ -67,6 +68,12 @@ var gb_map_gaode = (function() {
 			$('.mapTools').removeClass('gaode');
 			$('.leftUtils').removeClass('gaode');
 		},
+		traffic: function (enable) {
+			if(enable)
+				trafficLayer.show();
+			else
+				trafficLayer.hide();
+		},
 		clearAll: function () {
 			realMarkers = {};
 			polylines={};
@@ -88,7 +95,6 @@ var gb_map_gaode = (function() {
 			});
 			opt.style.path=pos;
-			console.log('opt.style', opt.style);
 			var polyline = new AMap.Polyline(opt.style);
 			//根据ID保存映射
 			polylines[opt.id]=polyline;