// import myDomMove from './move'
|
var me = new Vue({
|
el: '#mapVue',
|
data: {
|
map: null,//map
|
getdata: null,
|
marker: null,
|
layuiLayer: null,
|
nowIndex: null,
|
|
activeName: 'first',
|
|
move: null,//存放移动实例
|
|
seedata: '',
|
},
|
methods: {
|
getDataList() {
|
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();
|
// })
|
},
|
beginCome() {
|
this.getdata = this.getQueryVariable('data');//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 = [data[0].wd, data[0].jd],
|
datas = { id: data[0].id },
|
url = `/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
|
// axios({
|
// url: url,
|
// // data:datas,
|
// jsonp: "callback",
|
// dataType: "jsonp",
|
// header: {
|
// "content-type": "application/x-www-form-urlencoded"
|
// },
|
// method: 'POST',
|
// // success(res) {
|
// // console.log(res)
|
// // }
|
// })
|
// .then((res) => {
|
// console.log(res)
|
// })
|
axios.post(url).then((res) => {
|
console.log(res)
|
})
|
|
|
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, //去掉缩放
|
});
|
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: 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 = 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);
|
}
|
// 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 '50%';
|
})
|
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);
|
}
|
},
|
created() {
|
},
|
mounted() {
|
this.getDataList();
|
// this.getdata = this.getQueryVariable('data');//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, 'up');
|
}
|
})
|
