| | |
| | | } |
| | | import jizhun from "@/assets/images/ceju.png" |
| | | import jiance from "@/assets/images/lingjin.png" |
| | | import onlie from "@/assets/images/onile.png" |
| | | |
| | | import processBar from "@/components/processPar"; |
| | | import Pagination from '@/components/Pagination' |
| | | import drawMixin from "@/utils/drawMixin"; //自适应缩放 |
| | |
| | | mounted() { |
| | | const params = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') }; |
| | | alldevice(params).then(response => { |
| | | this.initMap(response.data.dataList, response.data.view) |
| | | console.log(111111111); |
| | | |
| | | console.log(response); |
| | | |
| | | this.initMap(response.data.dataList, response.data.view,response.data.shijiao) |
| | | }) |
| | | |
| | | |
| | |
| | | this.gpsnum = '' |
| | | this.gpsstate = '' |
| | | }, |
| | | initMap(tags, view) { |
| | | initMap(tags, view,shijiao) { |
| | | |
| | | // $(window).scrollTop(0); |
| | | // window.scroll(0, 0); |
| | |
| | | // var point = new BMapGL.Point(116.404, 39.915); // 地图中心点坐标 |
| | | // map.centerAndZoom(point, 15); |
| | | const views = view.split(";"); |
| | | map.centerAndZoom(new BMapGL.Point(views[0], views[1]), 12); |
| | | map.centerAndZoom(new BMapGL.Point(views[0], views[1]), 19); |
| | | map.enableScrollWheelZoom(true); |
| | | map.setHeading(shijiao); // 设置地图旋转角度 |
| | | map.setTilt(shijiao); // 设置地图倾斜角度 |
| | | |
| | | map.addEventListener("rightclick", function(e) { |
| | | console.log(e); |
| | | |
| | | // e.point 是点击位置的像素坐标 |
| | | // e.pixel 是点击位置的地理坐标(经纬度) |
| | | console.log(e.point); |
| | | console.log(e.pixel); |
| | | |
| | | |
| | | var lat = e.latlng.lat; // 纬度 |
| | | var lng = e.latlng.lng; // 经度 |
| | | |
| | | |
| | | // 在控制台打印经纬度 |
| | | console.log("右键点击的经纬度:", `纬度: ${lat}, 经度: ${lng}`); |
| | | |
| | | // 你也可以将经纬度显示在页面上 |
| | | alert(`右键点击的经纬度: ${lng}; ${lat}`); |
| | | }); |
| | | var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 |
| | | map.addControl(scaleCtrl); |
| | | var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 |
| | |
| | | //绿色监测,橙色基准 |
| | | let jizhunzhan = new BMapGL.Icon(jizhun, new BMapGL.Size(30, 30)) |
| | | let jiancezhan = new BMapGL.Icon(jiance, new BMapGL.Size(30, 30)) |
| | | let onliezhan = new BMapGL.Icon(onlie, new BMapGL.Size(30, 30)) |
| | | for (let i = 0; i < tags.length; i++) { |
| | | if (tags[i].lon != null && tags[i].lon != "" && tags[i].lat != null && tags[i].lat != "") { |
| | | if (tags[i].lon.toString().length > 5 && tags[i].lat.toString().length > 4) { |
| | | var marker; |
| | | var label = new BMapGL.Label(tags[i].anchorname + " " + tags[i].tagid, { offset: new BMapGL.Size(0, -40) }); |
| | | console.log(tags[i]); |
| | | |
| | | if (tags[i].type == 0) { |
| | | var rr = c.WGS2BD09({ |
| | | |
| | | if(tags[i].onlie==1){ |
| | | var rr = c.WGS2BD09({ |
| | | lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))), |
| | | lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4))) |
| | | }); |
| | |
| | | backgroundColor: "#fa770b", |
| | | transform: 'translateX(-50%)', |
| | | }) |
| | | }else{ |
| | | var rr = c.WGS2BD09({ |
| | | lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))), |
| | | lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4))) |
| | | }); |
| | | var pt = new BMapGL.Point(rr.lng, rr.lat) |
| | | marker = new BMapGL.Marker(pt, { |
| | | icon: onliezhan |
| | | }); |
| | | label.setStyle({ |
| | | color: "#fff", |
| | | fontSize: "14px", |
| | | borderRadius: "5px", |
| | | padding: "5px 5px", |
| | | border: "0", |
| | | backgroundColor: "#474747", |
| | | transform: 'translateX(-50%)', |
| | | }) |
| | | } |
| | | |
| | | |
| | | } else { |
| | | var rr = c.WGS2BD09({ |
| | | |
| | | if(tags[i].onlie==1){ |
| | | var rr = c.WGS2BD09({ |
| | | lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))), |
| | | lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4))) |
| | | }); |
| | |
| | | backgroundColor: "#32CD32", |
| | | transform: 'translateX(-50%)', |
| | | }) |
| | | }else{ |
| | | var rr = c.WGS2BD09({ |
| | | lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))), |
| | | lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4))) |
| | | }); |
| | | var pt = new BMapGL.Point(rr.lng, rr.lat) |
| | | marker = new BMapGL.Marker(pt, { |
| | | icon: onliezhan |
| | | }); |
| | | label.setStyle({ |
| | | color: "#fff", |
| | | fontSize: "14px", |
| | | borderRadius: "5px", |
| | | padding: "5px 5px", |
| | | border: "0", |
| | | backgroundColor: "#474747", |
| | | transform: 'translateX(-50%)', |
| | | }) |
| | | } |
| | | |
| | | } |
| | | marker.addEventListener("click", () => { |
| | | this.tagid = tags[i].tagid |