var me = new Vue({
|
el: '#mapVue',
|
data: {
|
map: null, //map
|
// getdata: null,
|
marker: null,
|
layuiLayer: null,
|
nowIndex: null,
|
|
LXdhStart: null,
|
LXdhEnd: null,
|
LxdhLine: null,
|
|
activeName: 'first',
|
|
// move: null, //存放移动实例
|
|
//存放实时坐标
|
lat: "",
|
lng: "",
|
seedata: '',
|
nowPosition: '',
|
shipingPopupShow: false,
|
shipingM3u8Url: '',
|
resultFeedbackPopupShow: false,
|
popupDisplay: "none",
|
|
haveShishiweizhi: 1,
|
isFromJQ: false,
|
chulijieguo: '',
|
wentifankui: '',
|
oldlat: '',
|
oldlng: '',
|
haveJDWD: true,
|
data: {}
|
// {
|
// type: 0,
|
// city: "南昌市",
|
// content: "按路线巡逻",
|
// district: "青山湖区",
|
// id: 5,
|
// integral: "14",
|
// jnum: 2,
|
// line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
|
// num: 0,
|
// province: "江西省",
|
// raddress: null,
|
// rname: "巡逻任务",
|
// rtype: "0",
|
// serid: null,
|
// time: "2021-11-17 00:00:00",
|
// url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
|
// }
|
},
|
methods: {
|
openAPP(type) {
|
// console.log(type)
|
let that = this;
|
if (type != 1) {
|
//反馈
|
uni.navigateTo({
|
url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data)
|
});
|
} else {
|
this.$confirm('是否参与活动：' + this.data.rname + "?", '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'success',
|
center: true,
|
customClass: "customClass"
|
}).then(() => {
|
let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
|
dataAppend = that.data;
|
axios.post(url, dataAppend).then(res => {
|
// console.log(res);
|
if (res.data.msg == "抢单成功") {
|
that.data.type = 0;
|
that.$message({
|
message: res.data.msg,
|
type: 'success'
|
});
|
return;
|
}
|
that.$message({
|
message: res.data.msg,
|
type: 'warning'
|
});
|
})
|
}).catch(() => {
|
// this.$message({
|
// type: 'info',
|
// message: '已取消删除'
|
// });
|
});
|
// return;
|
//抢单
|
// console.log(this.data)
|
// let up = this.data.appenUrl == '/api' ? "http://192.168.0.107:85" : this.data.appenUrl;
|
// let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
|
// dataAppend = this.data;
|
// axios.post(url, dataAppend).then(res => {
|
// console.log(res);
|
// if (res.data.msg == "抢单成功") {
|
// this.data.type = 0;
|
// this.$message({
|
// message: res.data.msg,
|
// type: 'success'
|
// });
|
// return;
|
// }
|
// this.$message({
|
// message: res.data.msg,
|
// type: 'warning'
|
// });
|
// })
|
}
|
},
|
getDataList() {
|
var that = this;
|
that.beginCome();
|
},
|
beginCome() {
|
var data = {
|
city: "无数据",
|
content: "无数据",
|
district: "无数据",
|
id: 5,
|
integral: "14",
|
jnum: 2,
|
line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
|
num: 2,
|
province: "无数据",
|
raddress: "",
|
rname: "无数据",
|
rtype: "0",
|
serid: "1123598821738675201,",
|
time: "无数据",
|
url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
|
buttype: "0",
|
type:'1'
|
}
|
//url解码
|
this.data = this.getQueryVariable('data') || data;
|
// this.getdata = data;
|
// this.changeDom(this.getdata[0]);//改变地图高度
|
// console.log(this.getdata[0]);
|
let lines = this.data.line
|
let position = lines.slice(lines.indexOf("(") + 1, lines.indexOf(",")).split(" ");
|
// console.log(position)
|
// return
|
this.map = this.beginMap(this.map, position); //创建并接受map
|
// this.move = new myDomMove('#seedata', '.title', '#map');
|
this.map.invalidateSize(true); //应用地图高度
|
// this.move.followFinger(this.map, 'down');
|
// this.lat = data[0].wd;
|
// this.lng = data[0].jd;
|
// this.oldlat = data[0].wd;
|
// this.oldlng = data[0].jd;
|
// this.oldlat = this.getdata[0].wd;
|
// this.oldlng = this.getdata[0].jd;
|
},
|
changeDom(data) {
|
// console.log(data, 'changeDom');
|
|
function changeDoms(dom, item) {
|
$(dom).empty();
|
$(dom).append(item);
|
}
|
changeDoms('#um-m-t-bz', data.bz);
|
changeDoms('#um-m-t-dz', data.place);
|
$("#um-m-t-rw").find('span:eq(0)').text(data.alarmType + "-");
|
// console.log(data.jtype, data.securityId, '11111111111')
|
if (data.jtype == 1 && data.securityId != '') {
|
changeDoms('#um-m-t-states', '处理中');
|
$('#jieshou').hide();
|
$('#wanchen').show();
|
} else if (data.jtype == 2) {
|
changeDoms('#um-m-t-states', '已处理');
|
} else if (data.securityId == null || data.securityId == '') {
|
changeDoms('#um-m-t-states', '未处理');
|
$('#jieshou').show();
|
$('#wanchen').hide();
|
}
|
|
},
|
//url解码
|
getQueryVariable(variable) {
|
var that = this;
|
var query = window.location.search.substring(1);
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
if (pair[0] == variable) {
|
that.isFromJQ = true; //确认是警情进来
|
return JSON.parse(decodeURI(pair[1]));
|
} //解码url 和 JSON
|
}
|
return (false);
|
},
|
beginMap(map, data) {
|
var that = this,
|
center = data.reverse();
|
// console.log(center)
|
// desc = "+proj=longlat +datum=WGS84 +no_defs ",
|
// crs = new L.CRS("EPSG:4326", desc, {});
|
// center = [data[0].wd, data[0].jd],
|
// url = `http://223.82.109.183:2082/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
|
// url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
|
// this.nowPosition = center;
|
// axios.post(url).then((res) => {
|
// if (res.data.data.length != 0) {
|
// var dat = res.data.data[0];
|
// for (var key in dat) {
|
// if (dat[key] == null || dat[key] == '') {
|
// dat[key] = '暂无'
|
// }
|
// }
|
// this.seedata = dat;
|
|
// } else {
|
// this.seedata = data[0];
|
// }
|
// })
|
|
var createMap = () => {
|
map = L.map('map', { //初始化地图
|
center: center,
|
zoom: 14,
|
// crs: crs,
|
minZoom: 2,
|
maxZoom: 17,
|
attributionControl: false, //去掉右下角
|
zoomControl: false, //去掉缩放
|
});
|
L.tileLayer( //添加切片图层
|
// "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", { //顺丰地图
|
// "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", { //顺丰地图
|
"https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {}
|
).addTo(map);
|
}
|
createMap();
|
var markers = L.markerClusterGroup();
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [50, 30], // 图标尺寸
|
}
|
});
|
var carIcon = new transportIcon({ //引入图标
|
iconUrl: './img/gray.png'
|
}),
|
planeIcon = new transportIcon({
|
iconUrl: './img/zd.png'
|
}),
|
busIcon = new transportIcon({
|
iconUrl: './img/red.png'
|
});
|
var setData = (a) => { //定义图标
|
marker = L.marker(a, {
|
icon: planeIcon,
|
// icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
|
// title: title,
|
myData: { //自定义数据
|
...a
|
}
|
});
|
}
|
// for (var i = 0; i < data.length; i++) {
|
var a = center;
|
// if (a.jd == '' || a.wd == '') {
|
// console.log('没有坐标', i);
|
// that.haveJDWD = false;
|
// } else {
|
// setData(a);
|
// }
|
// }
|
// if (that.haveJDWD) {
|
// markers.addLayer(marker);
|
// map.addLayer(markers);
|
|
// // }
|
// var i = 0;
|
// markers.on('click', function(a) {
|
// if (i == 0) {
|
// // console.log(that.getdata)
|
|
// console.log(a)
|
// } else if (i == 1) {
|
// i = -1
|
// }
|
// i++
|
// });
|
// console.log(markers)
|
this.nowPosition = center;
|
this.addlines(map);
|
return map; //抛出map
|
},
|
Submit() {
|
var data = this.getdata[0];
|
// console.log(data)
|
// receives() {// 接受任务
|
var url = data.url,
|
Pid = data.id,
|
id = data.userid, //警察id
|
name = data.username, //警察id
|
datas = {
|
id: Pid,
|
securityId: id,
|
alarmPeople: name
|
};
|
// console.log(datas);
|
axios({
|
url: url +
|
`?securityId=${datas.securityId}&id=${datas.id}&alarmPeople=datas.alarmPeople`,
|
// data: datas,
|
header: {
|
"content-type": "application/x-www-form-urlencoded"
|
},
|
method: 'POST',
|
|
}).then(res => {
|
// console.log(res, 123);
|
|
$('#loding').show();
|
var time = setTimeout(() => {
|
$('#loding').hide();
|
}, 1000)
|
$('#jieshou').hide();
|
$('#wanchen').show();
|
$('#um-m-t-states').empty();
|
$('#um-m-t-states').append('处理中');
|
})
|
// console.log( 123);
|
|
},
|
SubmitDown() {
|
// $('#SubmitDown').show();
|
// console.log(uni.navigateTo)
|
uni.navigateTo({
|
url: '/pages/poput/mapJQtijiao/mapJQtijiao/mapJQtijiao?id=' + this.getdata[0].id
|
});
|
},
|
SubmitSD() {
|
console.log(this.chulijieguo, 'chulijieguo')
|
console.log(this.wentifankui, 'wentifankui')
|
},
|
|
showPolyLine(xy) {
|
var that = this;
|
that.LxdhLine = L.polyline(xy, {
|
color: 'red'
|
}).addTo(that.map);
|
|
// zoom the map to the polyline
|
that.map.fitBounds(that.LxdhLine.getBounds())
|
},
|
//定位警情位置
|
// titleClick() {
|
// this.map.setView(this.nowPosition, 20);
|
// },
|
//定位当前位置
|
locationMap() {
|
// console.log([this.lat, this.lng])
|
this.map.setView([this.lat, this.lng], 20);
|
},
|
toJQposition() {
|
this.map.setView([this.oldlat, this.oldlng], 20);
|
},
|
// 获取实时位置
|
getLocationData() {
|
|
var that = this;
|
var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
|
var positionNum = 0;
|
var options = {
|
timeout: 1000
|
};
|
|
function showPosition(position) {
|
var adCode = position.adCode; //邮政编码
|
var nation = position.nation; //中国
|
var city = position.city; //城市
|
var addr = position.addr; //详细地址
|
that.lat = position.lat; //
|
that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑
|
that.haveShishiweizhi++; //控制只执行一次
|
// console.log(that.haveShishiweizhi)
|
if (that.haveShishiweizhi == 2) {
|
// console.log(position)
|
if (that.LXdhStart == null) {
|
//点位
|
var position = [that.lat, that.lng];
|
|
//把map定位到点位上，13为地图的级别，也可以直接marker.getLatLng()
|
that.map.setView(position, 15);
|
console.log(position, 'position')
|
|
} else {
|
that.map.removeLayer(that.LXdhStart);
|
}
|
//绘制起点和终点
|
that.LXdhStart = L.markerClusterGroup();
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [50, 50], // 图标尺寸
|
}
|
});
|
|
var qd = new transportIcon({
|
iconUrl: './img/dingw.gif'
|
});
|
|
that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
|
icon: qd,
|
}));
|
if (that.haveJDWD == false) {
|
that.map.setView([that.lat, that.lng], 20);
|
}
|
|
that.map.addLayer(that.LXdhStart);
|
that.getDHLine(+that.oldlng, +that.oldlat)
|
// console.log(that.lat, that.lng);
|
// console.log(+that.oldlat, +that.oldlng);
|
|
};
|
};
|
|
function showErr() {
|
//TODO 如果出错了调用此方法
|
// console.log(15)
|
};
|
|
geolocation.getLocation(showPosition, showErr, options);
|
// console.log(geolocation);
|
},
|
getDHLine(x, y) {
|
|
var that = this;
|
|
//获取导航信息
|
axios({
|
method: "get",
|
url: `https://web.byisf.com/sf/rp/v2/api`,
|
params: {
|
ak: "1986afc8a5744263971b7f2482253dfc",
|
x1: that.lng,
|
y1: that.lat,
|
x2: x,
|
y2: y,
|
type: "1",
|
strategy: "0",
|
opt: "sf2"
|
},
|
}).then((res) => {
|
if (res.data.result.coords == undefined) {
|
// console.log('目标太远 或不存在路径')
|
} else {
|
|
var resdata = res.data.result.coords;
|
// console.log(res)
|
var data = [];
|
for (var i = 0; i < resdata.length; i++) {
|
var xy = [];
|
xy.push(resdata[i][1]);
|
xy.push(resdata[i][0]);
|
data.push(xy);
|
}
|
// var w = resdata[0][0] - resdata[resdata.length - 1][0];
|
// w = Math.abs(w);
|
// w = w / 0.00000899;
|
// w = w.toFixed(2);
|
// console.log(w);
|
$('#t-mi').empty();
|
$('#t-mi').append(res.data.result.dist + '米');
|
$('#t-fz').empty();
|
$('#t-fz').append(res.data.result.flen + '分钟');
|
|
if (that.LXdhEnd != null) {
|
that.map.removeLayer(that.LXdhEnd);
|
}
|
if (that.LxdhLine != null) {
|
that.map.removeLayer(that.LxdhLine);
|
}
|
|
//绘制起点和终点
|
that.LXdhEnd = L.markerClusterGroup();
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [56, 32], // 图标尺寸
|
}
|
});
|
|
var zd = new transportIcon({
|
iconUrl: './img/zd2.png'
|
});
|
// var qd = new transportIcon({
|
// iconUrl: './img/qd.png'
|
// });
|
|
var qdzb = res.data.result.query;
|
|
var x = resdata[resdata.length - 1][0];
|
var y = resdata[resdata.length - 1][1];
|
|
// that.LXdhEnd.addLayer(L.marker([y, x], {//不要图标
|
// icon: zd,
|
// }));
|
// markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
|
// icon: qd,
|
// }));
|
|
that.map.addLayer(that.LXdhEnd);
|
|
that.showPolyLine(data);
|
}
|
});
|
},
|
showPolyLine(xy) {
|
var that = this;
|
that.LxdhLine = L.polyline(xy, {
|
color: '#169BD5'
|
}).addTo(that.map);
|
that.map.fitBounds(that.LxdhLine.getBounds())
|
},
|
refreshMap() {
|
console.log('shuaxin')
|
|
},
|
addlines(map) {
|
let line = this.data.line;
|
line = line.slice(line.indexOf('(') + 1, line.indexOf(')')).split(",");
|
for (let k in line) {
|
line[k] = line[k].split(" ").reverse();
|
}
|
// console.log(line)
|
|
// var latlngs = [
|
// ['28.67705200351289', '115.88518439579809'],
|
// ['28.68755200354289', '115.88518439574809'],
|
// ['28.68755200354289', '115.85518439574809'],
|
// ]
|
// var polygon = L.polygon(latlngs, {
|
// color: '#000eff',
|
// fillColor: '#0000ed',
|
// weight: 2
|
// });
|
var polyline = L.polyline(line, {
|
color: '#FC5E20'
|
})
|
// let point = L.circle([28.67705200351289,115.88518439579809],{color:'#FF0000',fillColor:'#FF0000',radius:1000000,fillOpacity:1});
|
map.addLayer(polyline)
|
}
|
},
|
created() {},
|
mounted() {
|
this.getDataList();
|
// var time = setInterval(() => {
|
// if (this.haveShishiweizhi == 1) {
|
// this.getLocationData();
|
// // console.log(this.haveShishiweizhi)
|
|
// } else if (this.haveShishiweizhi == 2) {
|
// clearInterval(time);
|
// time = null;
|
// }
|
// }, 1000)
|
},
|
wacth: {}
|
})
|
