var me = new Vue({
|
el: '#mapVue',
|
data: {
|
map: null, //map
|
getdata: null,
|
marker: null,
|
layuiLayer: null,
|
nowIndex: null,
|
searchValue: "",
|
activeName: 'first',
|
|
mh_query_show: true,
|
|
ZBCXresult: null,
|
|
LXdhStart: null,
|
LXdhEnd: null,
|
LxdhLine: null,
|
|
//存放实时坐标
|
lat: "",
|
lng: "",
|
|
move: null, //存放移动实例
|
|
seedata: '',
|
|
nowPosition: '',
|
|
shipingPopupShow: false,
|
shipingM3u8Url: '',
|
resultFeedbackPopupShow: false,
|
popupDisplay: "none",
|
},
|
methods: {
|
getDataList(res) {
|
var that = this;
|
// var url = 'https://web.byisf.com/api/equipment/equipment/listAll';
|
// axios.get(url).then((res) => {
|
// that.getdata = res.data.data;
|
that.beginCome(res);
|
// })
|
},
|
beginCome(res) {
|
//this.getdata = this.getQueryVariable('data'); //url解码
|
this.getdata = res; //url解码
|
// console.log(this.getdata)
|
// this.getdata = [{
|
// jd: 115.91042800000002,
|
// wd: 28.68094757898212,
|
// state: 0,
|
// dtype: 0,
|
// size: 300,
|
// title: '第一个'
|
// }];//url解码
|
this.map = this.beginMap(this.map, this.getdata); //创建并接受map
|
// this.move = new myDomMove('#seedata', '.title', '#map');
|
// var dy = document.documentElement.clientHeight - 50;
|
// $('#seedata').animate({ top: dy + "px" }, 10);
|
// $('#map').css("height", (index, value) => {//改变地图高度
|
// return '100%';
|
// // })
|
this.map.invalidateSize(true); //应用地图高度
|
//this.move.followFinger(this.map, 'down');
|
},
|
getQueryVariable(variable) {
|
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) {
|
return JSON.parse(decodeURI(pair[1]));
|
} //解码url 和 JSON
|
}
|
return (false);
|
},
|
beginMap(map, data) {
|
var that = this,
|
center = [that.lat, that.lng];
|
// url = `/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
|
// this.nowPosition = center;
|
// axios.post(url).then((res) => {
|
// // console.log(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];
|
// }
|
// // console.log(this.seedata, 1524545453)
|
// })
|
|
|
var createMap = () => {
|
map = L.map('map', { //初始化地图
|
//center: center,
|
zoom: 12,
|
minZoom: 2,
|
maxZoom: 17,
|
attributionControl: false, //去掉右下角
|
zoomControl: false, //去掉缩放
|
});
|
this.map = map;
|
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", { //顺丰地图
|
// "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
|
|
// subdomains: ["1", "2", "3", "4"],
|
// attribution: "高德"
|
}
|
).addTo(map);
|
}
|
createMap();
|
var markers = L.markerClusterGroup();
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [30, 30], // 图标尺寸
|
// iconAnchor: [30, 30], // 图标偏移量
|
// popupAnchor: [-20, -20] // 弹出框偏移量
|
}
|
});
|
var carIcon = new transportIcon({ //引入图标
|
iconUrl: './img/gray.png'
|
}),
|
planeIcon = new transportIcon({
|
iconUrl: './img/green.png'
|
}),
|
busIcon = new transportIcon({
|
iconUrl: './img/red.png'
|
});
|
// console.log(data, 43545343)
|
var setData = (a) => { //定义图标
|
marker = L.marker([a.wd, a.jd], {
|
icon: planeIcon,
|
// title: title,
|
myData: { //自定义数据
|
...a
|
}
|
});
|
}
|
for (var i = 0; i < data.length; i++) {
|
var a = data[i];
|
// var title = a.title;
|
// if (a.dtype == 0) {
|
// setData(a);
|
// } else if (a.dtype == 1) {
|
// setData(a);
|
// } else if (a.dtype == 2) {
|
// setData(a);
|
// }
|
if (a.jd == '' || a.wd == '' || a.jd == null || a.wd == null) {
|
console.log('没有坐标', i)
|
} else {
|
setData(a);
|
}
|
|
// marker.bindPopup(title);
|
markers.addLayer(marker);
|
}
|
map.addLayer(markers);
|
|
markers.on('click', function(a) {
|
// that.drawer = true;
|
that.seedata = a.layer.options.myData;
|
$('#seedata').css('top', '');
|
$('#map').css("height", (index, value) => { //改变地图高度
|
return '43%';
|
})
|
map.invalidateSize(true); //应用地图高度
|
// console.log(a.layer.options.myData);
|
//that.move.destruction();
|
//that.move.followFinger(map, 'down');
|
|
});
|
that.seedata = data[0];
|
// map.on('mousemove', (e) => {//实时显示坐标
|
// let latlng = e.latlng;
|
// console.log(latlng);// {lat: 30.59, lng: 114.32}
|
// });
|
return map; //抛出map
|
},
|
handleClick(tab, event) {
|
// console.log(tab, event);
|
},
|
|
gotoxcx(routs) {
|
wx.miniProgram.navigateTo({
|
url: `../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`, //指定跳转至小程序页面的门路
|
success: function() {
|
console.log('success'); //页面跳转胜利的回调函数
|
}
|
});
|
},
|
LXdhJQ() {
|
var that = this;
|
var jqdata = that.seedata;
|
that.getDHLine(jqdata.jd, jqdata.wd);
|
|
$('#map').css("height", (index, value) => { //改变地图高度
|
return '100%';
|
})
|
this.map.invalidateSize(true); //应用地图高度
|
},
|
lxdhSearch() {
|
//var id = this.$store.state.puserID;
|
var that = this;
|
axios({
|
method: "get",
|
url: `https://web.byisf.com/sf/search/poi`,
|
params: {
|
ak: "1986afc8a5744263971b7f2482253dfc",
|
query: that.searchValue,
|
region: "360000",
|
scope: "2",
|
page_size: "10",
|
page_num: "1",
|
sort: "0",
|
},
|
}).then((res) => {
|
var res = res.data.result;
|
that.ZBCXresult = res;
|
var query = that.searchValue;
|
var html = "";
|
$("#mh_query").html("");
|
if (query == "") {
|
$("#mh_query").html("");
|
} else {
|
html += "<ul>"
|
for (var i = 0; i < res.length; i++) {
|
html += "<li id='" + i + "'>" + res[i].name + "<br><span>" + res[i].address +
|
"</span>" + "</li>"
|
}
|
html += "</ul>"
|
$("#mh_query").append(html);
|
}
|
|
//添加li点击事件，地图定位
|
$('#mh_query li').click(function() {
|
|
var ids = $(this).attr("id");
|
|
$("#mh_query").html("");
|
|
that.getDHLine(that.ZBCXresult[ids].location.lng, that.ZBCXresult[ids]
|
.location.lat);
|
|
// alert(that.ZBCXresult[ids].name);
|
});
|
});
|
|
this.mh_query_show = true;
|
},
|
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) => {
|
var resdata = res.data.result.coords;
|
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);
|
}
|
|
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/zd.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;
|
var latlngs = [
|
[28.6903406054147, 115.864347222654],
|
[28.6897382596267, 115.860570672361],
|
[28.6876, 115.858],
|
[28.6791, 115.854]
|
];
|
that.LxdhLine = L.polyline(xy, {
|
color: 'red'
|
}).addTo(that.map);
|
|
alert(wx.getStorageSync("longitude"));
|
|
// zoom the map to the polyline
|
that.map.fitBounds(that.LxdhLine.getBounds())
|
},
|
getLocationData() {
|
var that = this;
|
var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
|
var positionNum = 0;
|
var options = {
|
timeout: 8000
|
};
|
|
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 实现业务代码逻辑
|
|
if (that.LXdhStart == null) {
|
//点位
|
var position = [that.lat, that.lng];
|
|
//把map定位到点位上，13为地图的级别，也可以直接marker.getLatLng()
|
that.map.setView(position, 15);
|
}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,
|
}));
|
|
that.map.addLayer(that.LXdhStart);
|
|
};
|
|
function showErr() {
|
//TODO 如果出错了调用此方法
|
};
|
|
geolocation.getLocation(showPosition, showErr, options);
|
},
|
|
},
|
created() {},
|
mounted() {
|
//警情点查询
|
axios({
|
method: "post",
|
url: `http://106.225.193.35:83/api/alarm/alarm/APP-getAlarming`,
|
params: {
|
securityId: "1370564873280430082",
|
},
|
}).then((resdata) => {
|
var res = resdata.data.data;
|
for (var i = 0; i < res.length; i++) {
|
var data = res[i];
|
res[i].state = "0";
|
res[i].dtype = "0";
|
res[i].size = "300";
|
for (var key in res[i]) {
|
if (data[key] == null || data[key] == '') {
|
data[key] = '暂无'
|
}
|
}
|
}
|
|
this.getDataList(res);
|
|
this.getLocationData();
|
|
});
|
|
},
|
wacth: {}
|
})
|
