// import myDomMove from './move'
|
var me = new Vue({
|
el: '#mapVue',
|
data: {
|
map: null, //map
|
getdata: null,
|
marker: null,
|
layuiLayer: null,
|
nowIndex: 1,
|
|
//基础路径
|
// pathUrl: "http://localhost:89",
|
pathUrl: this.$store.state.piAPI + "",
|
|
layer: null,
|
|
snumber: null,
|
|
activeName: 'first',
|
|
move: null, //存放移动实例
|
|
seedata: '',
|
|
//路线数据
|
routeName: "",
|
lxbz: "",
|
|
//区域数据
|
regionName: "",
|
qybz: ""
|
},
|
created() {},
|
mounted() {
|
this.getDataList(1);
|
},
|
methods: {
|
getDataList(tab) {
|
var that = this;
|
that.beginCome(tab);
|
},
|
|
//巡逻路线区域点击事件
|
handleClick(tab) {
|
this.tab = tab;
|
//路线
|
if (tab == 1) {
|
//修改样式
|
document.getElementById("line").style.display = "block";
|
document.getElementById("area").style.display = "none";
|
document.getElementById("routeBtn").style.backgroundColor = "cornflowerblue";
|
document.getElementById("areaBtn").style.backgroundColor = "darkgrey";
|
// document.getElementById("seedata").style.height = "20%";
|
// document.getElementById("map").style.height = "80%";
|
//展示巡逻路线
|
this.showPolyLine(this.map);
|
|
}
|
|
//区域
|
if (tab == 2) {
|
//修改样式
|
document.getElementById("line").style.display = "none";
|
document.getElementById("area").style.display = "block";
|
document.getElementById("routeBtn").style.backgroundColor = "darkgrey";
|
document.getElementById("areaBtn").style.backgroundColor = "cornflowerblue";
|
// document.getElementById("seedata").style.height = "20%";
|
// document.getElementById("map").style.height = "80%";
|
//展示巡逻区域
|
this.showPolygon(this.map);
|
}
|
},
|
|
beginCome(tab) {
|
//url解码
|
this.snumber = this.getQueryVariable('snumber');
|
//创建并接受map
|
this.map = this.beginMap(this.map, this.getdata, tab);
|
this.move = new myDomMove('#seedata', '.route-area-tab', '#map');
|
//应用地图高度
|
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("=");
|
//解码url 和 JSON
|
if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); }
|
}
|
return (false);
|
},
|
|
//开始
|
beginMap(map, data, tab) {
|
var createMap = () => {
|
//初始化地图
|
map = L.map('map', {
|
center: [28.7012481186582, 115.852228372357],
|
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", {}
|
).addTo(map);
|
}
|
createMap();
|
|
//画巡逻路线
|
if (tab == 1) {
|
this.showPolyLine(map);
|
}
|
|
//画巡逻区域
|
if (tab == 2) {
|
this.showPolygon(map);
|
}
|
|
// map.locate({
|
// setView: true,
|
// maxZoom: 16
|
// });
|
//抛出map
|
return map;
|
},
|
|
//巡逻路线
|
showPolyLine(map) {
|
var that = this;
|
//获取巡逻路线信息
|
$.ajax({
|
url: that.pathUrl + '/duty/duty/selectInfo',
|
type: 'POST',
|
dataType: 'JSON',
|
data: {
|
snumber: that.snumber
|
},
|
success: function(result) {
|
//如果巡逻路线信息，展示
|
if (result.code == 200) {
|
if (JSON.stringify(result.data) != "{}") {
|
var entityArr = [];
|
var coordinate = result.data[0].routeInfo.match(/\(([^)]*)\)/).toString();
|
var a = coordinate.indexOf("(");
|
var b = coordinate.indexOf(")");
|
coordinate = coordinate.substring(a + 1, b) + "";
|
if (coordinate && coordinate != '') {
|
coordinate = coordinate.split(',');
|
for (var i = 0; i < coordinate.length; i++) {
|
entityArr.push([Number(coordinate[i].split(' ')[1]), Number(coordinate[i].split(' ')[0])]);
|
}
|
}
|
if (that.nowIndex == 2) {
|
map.removeLayer(that.layer);
|
}
|
that.routeName = result.data[0].routeName;
|
that.lxbz = result.data[0].lxbz;
|
that.layer = L.polyline(entityArr, { color: 'red' }).addTo(map);
|
map.addLayer(that.layer);
|
that.nowIndex = 2;
|
// zoom the map to the polyline
|
map.fitBounds(that.layer.getBounds());
|
}
|
}
|
}
|
});
|
|
},
|
|
|
//巡逻区域
|
showPolygon(map) {
|
var that = this;
|
$.ajax({
|
url: that.pathUrl + '/duty/duty/selectInfo',
|
type: 'POST',
|
dataType: 'JSON',
|
data: {
|
snumber: that.snumber
|
},
|
success: function(result) {
|
//如果巡逻区域信息，展示
|
if (result.code == 200) {
|
if (JSON.stringify(result.data) != "{}") {
|
var entityArr = [];
|
var coordinate = result.data[0].coordinater.match(/\(([^)]*)\)/).toString();
|
var a = coordinate.indexOf("(");
|
var b = coordinate.indexOf(")");
|
coordinate = coordinate.substring(a + 1, b) + "";
|
if (coordinate && coordinate != '') {
|
coordinate = coordinate.split(',');
|
for (var i = 0; i < coordinate.length; i++) {
|
entityArr.push([Number(coordinate[i].split(' ')[1]), Number(coordinate[i].split(' ')[0])]);
|
}
|
}
|
if (that.nowIndex == 2) {
|
map.removeLayer(that.layer);
|
}
|
that.layer = L.polygon(entityArr, { color: 'red' }).addTo(map);
|
that.regionName = result.data[0].regionName;
|
that.qybz = result.data[0].qybz;
|
map.addLayer(that.layer);
|
that.nowIndex = 2;
|
// zoom the map to the polygon
|
map.fitBounds(that.layer.getBounds());
|
}
|
}
|
}
|
});
|
|
}
|
}
|
})
|
