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: {}, mapPositionLoding: false, //定位loding oncePosition: null, //一次定位实例 onPosition: false, //持续定位指示 setPositionTime: null, //发送定位节流 setPositionUseTime: 30000, //节流时间 }, methods: { // unis(data) { // //向uniapp传值 // uni.postMessage({ // data: { // action: data // } // }); // }, // setUniAppMsg(state, data) { // let that = this; // if (window.parent) { // console.log("有window.parent") // if (state == "hBackMsg") { // window.parent.hBackMsg(data); // } // if (state == "setIntLat") { // window.parent.setIntLat({ // rid: that.data.id, // fn: (out) => { // // console.log(out,"1111"); // // that.addIcon(out); // that.addIcon([out[1], out[0]]); // } // }); // } // if (state == "showTip") { // that.parent.showTip("获取定位失败"); // } // } else { // console.log("没window.parent") // if (state == "hBackMsg") { // // window.parent.hBackMsg(data); // that.unis("hBackMsg") // } // if (state == "setIntLat") { // // window.parent.setIntLat({ // // rid: that.data.id, // // fn: (out) => { // // // console.log(out,"1111"); // // // that.addIcon(out); // // that.addIcon([out[1], out[0]]); // // } // // }); // that.unis("setIntLat") // } // if (state == "showTip") { // // that.parent.showTip("获取定位失败"); // that.unis("showTip") // } // } // }, openAPP(type) { // console.log(type) let that = this; if (type != 1) { if (that.data.butCT == "beginUp") { // 反馈 if (that.onPosition) { that.onPosition.overContinued(); } uni.redirectTo({ url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data) + '&other="11111"' }); } else if (that.data.butCT == "begin") { // 开始任务 // that.setUniAppMsg("hBackMsg", { // type: "start", // data: { // id: that.data.id, // serid: that.data.serid // }, // fn: function(val) { // if (val == "success") { // // console.log("成功开启任务") // that.data.butCT = "beginUp"; // that.data.rtype = '0'; // that.data.type = "0"; // } // } // }) let rid = that.data.id, serid = that.data.serid, type = 'start', url = that.data.appenUrl + "taskqd/startTask?" + `rid=${rid}&serid=${serid}&type=${type}`; axios.get(url).then((res) => { // console.log(res); that.onPosition = new $getPositions({ id: rid, fn: function(res) { // console.log(res); // state.isOnTaskValue[id] = { // id: id, // intlat: res.intlat // } // state.changes = !state.changes; // console.log(state.isOnTaskValue) // $store.commit("setMsg", { // id: id, // intlat: res.intlat // }) let out = res.intlat; if (typeof out != "string") { that.addIcon([out[1], out[0]]); //坐标输出 let d = { uid: that.data.myid, rid: rid, jd: out[0], wd: out[1], } if (that.setPositionTime) { return; } else { that.setPositionTime = setTimeout(() => { axios.post(that.data.appenUrl + "trar/submit", d) .then(res => { // console.log('res=>', res); }) clearTimeout(that.setPositionTime); that.setPositionTime = null; }, that.setPositionUseTime) } } else { console.log("获取定位失败") } } }) that.onPosition.continuedTime(); that.data.butCT = "beginUp"; that.data.rtype = '0'; that.data.type = "0"; }) } } else { this.$confirm('是否参与活动:' + this.data.rname + "?", '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'success', center: true, customClass: "customClass" }).then(() => { let url = that.data.appenUrl + "taskqd/Graborder", dataAppend = that.data; console.log(url, dataAppend) // 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: '已取消删除' // }); }); } }, getDataList() { var that = this; that.beginCome(); }, beginCome() { var data = { appenUrl: "http://192.168.0.108:83/", butCT: "begin", buttype: 0, captain: "我", city: "南昌市", content: "测试", district: "西湖区", id: 37, integral: "222", iscation: "1", jnum: 3, line: "LINESTRING(115.8995839881188 28.687205773173343,115.89391916267935 28.678966027079593,115.90404718391959 28.673644524394046,115.91211526863638 28.681369286356936)", num: 1, nums: 0, province: "江西省", publisher: "管理", raddress: null, rname: "测试1", rtype: "0", serid: "1123598821738675201,", team: "你,他,它", time: "2022-02-18 14:15:52", type: "0", url: "http://61.131.136.25:2081/zhba/upload/20220218/67f0c8bf3e7b5024c64133691f265072.ico", fname:"管理员" }, that = this; //url解码 this.data = this.getQueryVariable('data') || data; // console.log(this.data) if (typeof this.data == "string") { this.data = JSON.parse(this.data) } console.log(this.data) if (this.data.isOn || this.data.butCT == "beginUp") { //队长开启任务 let rid = that.data.id; that.onPosition = new $getPositions({ id: rid, fn: function(res) { // console.log(res); // state.isOnTaskValue[id] = { // id: id, // intlat: res.intlat // } // state.changes = !state.changes; // console.log(state.isOnTaskValue) // $store.commit("setMsg", { // id: id, // intlat: res.intlat // }) let out = res.intlat; if (typeof out != "string") { that.addIcon([out[1], out[0]]); console.log(out) //坐标输出 let d = { uid: that.data.myid, rid: rid, jd: out[0], wd: out[1], } // console.log(d) if (that.setPositionTime) { return; } else { that.setPositionTime = setTimeout(() => { axios.post(that.data.appenUrl + "trar/submit", d) .then(res => { // console.log('res=>', res); }) clearTimeout(that.setPositionTime); that.setPositionTime = null; }, that.setPositionUseTime) } } else { console.log("获取定位失败") } } }) that.onPosition.continuedTime(); that.data.butCT = "beginUp"; that.data.rtype = '0'; that.data.type = "0"; } if (typeof this.data.team === "string") { this.data.team = this.data.team.split(','); } 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.map.invalidateSize(true); //应用地图高度 console.log("完成数据") }, 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://61.131.136.25: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() { let that = this; if (!this.oncePosition) { this.oncePosition = new $getPositions({ id: 1, fn: function(res) { // console.log(res); that.mapPositionLoding = res.state; if (!res.state) { console.log(res) if (typeof res.intlat === "string") { // that.parent.showTip("获取定位失败") } else { that.addIcon([res.intlat[1], res.intlat[0]]); } } } }).init(); this.oncePosition.once(); } else { this.oncePosition.once(); } // if (!this.onPosition) { // this.oncePosition.continuedTime(); // this.onPosition = !this.onPosition; // } else { // this.oncePosition.overContinued(); // this.onPosition = !this.onPosition; // } }, //添加图标 addIcon(intlat) { var markers = L.markerClusterGroup(), marker; var transportIcon = L.Icon.extend({ //图标初始化 options: { iconSize: [30, 30], // 图标尺寸 } }); var carIcon = new transportIcon({ //引入图标 iconUrl: './img/dinw/dinw1.png' }); var setData = (a) => { //定义图标 marker = L.marker(a, { icon: carIcon, myData: { //自定义数据 ...a } }); } setData(intlat) markers.addLayer(marker); this.map.addLayer(markers); this.map.setView(intlat, this.map._zoom); }, 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(position) // 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(); } 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) }, checkDomHeight(data) { // 声明定时器 var timer = null; // 检查dom是否执行完成 function checkDom() { let useData; if (data.domName == 'not') { useData = this[data.name]; } else { let dom = document[data.domName](data.name); useData = dom; } if (useData) { // 执行dom加载完成后的操作 // 清除定时器 if (!timer) { clearTimeout(timer); } if (data.fn) { //回调函数 data.fn(useData); return; } else { return dom; } } else { // 自我调用 timer = setTimeout(checkDom, 200); } } // 首次执行 checkDom(); } }, created() {}, mounted() { let that = this; this.getDataList(); //map适应任务详情高度 // console.log(document.getElementById("map")) //因为按钮使用v-if所以在识别高度时候,but还没渲染所以手动添加 56px 不会变 console.log("应用数据") let UmainHeight = document.getElementById("Umain").clientHeight; if (this.data.iscation == "1") { UmainHeight += 56; } let h = document.getElementById("mapVue").clientHeight; this.checkDomHeight({ domName: "getElementById", name: "map", fn: function(dom) { dom.style.height = h - UmainHeight + "px"; document.getElementsByClassName("dingwei")[0].style.bottom = UmainHeight + 10 + "px"; that.map.invalidateSize(true); } }) //开启滑动 //计算最小单位 let rows = document.getElementsByClassName("once"), rowsHeight = 45; for (let ri = 0; ri < 3; ri++) { rowsHeight += rows[ri].clientHeight; } this.domMove = new $moveWindow({ id: "Umain", minHeight: rowsHeight, maxHeight: UmainHeight, critical: (UmainHeight - rowsHeight) / 4, openAnimation: false, fn: function(res) { // console.log(that.map.options) document.getElementById("map").style.height = h - res.height + "px"; // that.map.setView([that.map.options.center[0], +that.map.options.center[1] + 0.002], that.map // .options.zoom); // console.log(h - res.height) if (res.state === true || res.state === false) { that.map.invalidateSize(true); } document.getElementsByClassName("dingwei")[0].style.bottom = res.height + 10 + "px"; }, }); this.domMove.init(); // console.log(window.parent.setIntLat) // that.setUniAppMsg("setIntLat") // window.parent.setIntLat({ // rid: this.data.id, // fn: (out) => { // // console.log(out,"1111"); // // that.addIcon(out); // that.addIcon([out[1], out[0]]); // } // }) // window.addEventListener('message', e => { // console.log(e, 'HTML 接受APP发送过来的消息 (H5端)'); // app.dataList = JSON.parse(e.data.data).navigation // console.log(app.dataList, '+++++++++'); // }, false) // // HTML 接受APP发送过来的消息 (APP端) // function requestData(data) { // console.log(JSON.stringify(data), 'HTML 接受APP发送过来的消息 (APP端)'); // app.dataList = data.navigation // 赋值 // } }, wacth: {}, beforeDestroy() { let that = this; if (that.onPosition) { that.onPosition.overContinued(); console.log("关闭地图") } } })