123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- 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);
- }
- }
- })
|