yzCctvHelm/assets/shipHisMap.js

var _this, dataObj = [], baseTok = null;
var map;
var pathSimplifierIns;
var pathSimplifierInsta = false;
var navg0 = null, lineArr = [], routeInfo= [];
new Vue({
	el: '#app',
	data: function() {
		return {
			shipLi: [],
			nowTab: {},
			userForm: {},
			queryParams: {
				key: "643a63b2f21104345c47104702061afe",
				mmsi: "",
				start: "",
				end: ""
			},
			startDay: "",
			endDay: "",
			lengSli: 0,
			dataMax: 10,
			speedSli: 5,
			animating: 0,
			nowHis: {}
		}
	},
	created() {
		_this = this;
		baseTok = getCookie("Admin-Token") != "null" && getCookie("Admin-Token") != null ? getCookie("Admin-Token") : "";
		_this.userForm = JSON.parse(getCookie("Admin-User"));
		_this.startDay = parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00:00';
		_this.endDay = parseTime(new Date(), '{y}-{m}-{d} {h}:{d}:{s}');
		_this.initAjax();
	},
	mounted(){
		map = new AMap.Map("areaMap", {
			center: [113.5556, 22.9422],
			zoom: 14
		});
		window.addEventListener('message',(data)=>{
			if(data.data != _this.nowTab.sn){
				_this.changTab(data.data);
			}
		})
	},
	methods: {
		initAjax(){
			const loading = this.$loading({
				background: 'rgba(0, 0, 0, 0.4)'
			})
			let _opts = {
				url: baseUrl + "/SelCctvListByUserId",
				type:"GET"
			};
			let _data = {
				"user_id": _this.userForm.userId
			};
			let _hea = {
				"Authorization": "Bearer " + baseTok
			};
			getAxios(_opts,_data,_hea).then((res) => {
				if(res.code == 200&&res.data.length){
					_this.shipLi = res.data;
					let _sn = JSON.parse(localStorage.getItem("nowShip"));
					if(_sn !=null && _sn != "null"){
						let _ind = _this.shipLi.findIndex((i,ind) => {return i.sn == _sn.sn});
						if(_ind != -1){
							_sn = _this.shipLi[_ind];
						}else{
							_sn = _this.shipLi[0];
						}
					}else{
						_sn = _this.shipLi[0];
					}
					_this.nowTab = _sn;
				}else{
					_this.shipLi = [];
				}
				loading.close();
			})
		},
		changTab(id){
			let ind = _this.shipLi.findIndex((it,ind) => {return id == it.sn});
			if(ind != -1){
				_this.nowTab = _this.shipLi[ind];
				_this.getAjaxHisMap();
				window.parent.postMessage({ id: _this.nowTab.sn },staticUrl+ "/");
			}
		},
		getAjaxHisMap(){
			if(isNaN(Date.parse(_this.endDay))||isNaN(Date.parse(_this.startDay))){
				_this.$message({
					message: '请选择时间！',
					type: 'warning'
				});
				return;
			}
			if(_this.nowTab.mmsi != ""){
				_this.queryParams.mmsi = _this.nowTab.mmsi;
				_this.queryParams.start = new Date(_this.startDay).getTime();
				_this.queryParams.end = new Date(_this.endDay).getTime();
				getHisMap(_this.queryParams, function(_res){
					lineArr = [];
					routeInfo = [];
					_this.nowHis = {}
					if(_res[_this.queryParams.mmsi].length){
						let _obj = _res[_this.queryParams.mmsi];
						_obj.forEach(item => {
							item["stime"] = parseTime(new Date(parseInt(item.createdAt)), '{y}-{m}-{d} {h}:{d}:{s}');
							let _newpo = GpsToGd(Number(item.lat), Number(item.lon));
							lineArr.push([_newpo.lon,_newpo.lat]);
						})
						routeInfo = _obj;
						_this.renderTrace(lineArr, 5000);
					}else{
						if (pathSimplifierInsta){
							pathSimplifierIns.setData([]);
						}
						_this.$message({
							message: '该时间段暂无历史轨迹！',
							type: 'warning'
						});
						return;
					};
					
				})
			}
		},
		renderTrace(Path,speed) {
			//判断是否已有轨迹，进行清除!!!注意，就是在此处清除了轨迹
			if (pathSimplifierInsta) {
				pathSimplifierIns.setData([]);
			}
			AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
				if (!PathSimplifier.supportCanvas) {
					alert('当前环境不支持 Canvas！');
					return;
				}
				_this.dataMax = lineArr.length;
				map.setFeatures(['bg', 'point', 'building']);
				map.setFitView();
				map.setCenter(lineArr[0]);
				pathSimplifierIns = new PathSimplifier({
					zIndex: 100,
					//autoSetFitView:false,
					map: map, //所属的地图实例
					getPath: function(pathData, pathIndex) {
						return pathData.path;
					},
					getHoverTitle: function(pathData, pathIndex, pointIndex) {
						if (pointIndex >= 0) {
							return pathData.path[pointIndex][0]+ ',' + pathData.path[pointIndex][1];
						}
						return pathData.name + '历史轨迹';
					},
					renderOptions: {
						renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
					}
				});
				pathSimplifierInsta = true;
				//设置数据
				pathSimplifierIns.setData([{
					name: _this.nowTab.dev_name,
					path: Path //传入的轨迹数据
				}]);
				//对第一条线路（即索引 0）创建一个巡航器
				navg0 = pathSimplifierIns.createPathNavigator(0, {
					loop: false, //循环播放
					speed: _this.speedSli*1000 //巡航速度，单位千米/小时
				});
				navg0.on("move", function(data,position) {
					let idx = position.dataItem.pointIndex;
					_this.lengSli = idx;
					_this.nowHis = routeInfo[idx];
					map.setCenter(navg0.getPosition());
					if (navg0.isCursorAtPathEnd()) {
						_this.animating = 0;
					}
				})
				map.setFitView(); //根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层
			});
		},
		startMove(){
			if(navg0 == null){
				_this.$message({
					message: '该时间段暂无历史轨迹！',
					type: 'warning'
				});
				return;
			}
			_this.lengSli = 0;
			_this.animating = 2;
			navg0.start();
		},
		stopMove(){
			navg0.pause();
			_this.animating = 1;
		},
		continueMove(){
			navg0.resume();
			_this.animating = 2;
		},
		changeSpeed(e){
			navg0.setSpeed(e*1000);
		}
	}
})