From 8160f5bc2a5e1508f01dd5624917739dc7a1d43d Mon Sep 17 00:00:00 2001 From: TiaStars Date: Fri, 15 Mar 2024 11:28:50 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E8=A7=86=E9=A2=91=E7=82=B9?= =?UTF-8?q?=E4=BD=8D=E5=9D=90=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/bigScreen/map/index.vue | 150 +++++++++++++++++++----------- 1 file changed, 98 insertions(+), 52 deletions(-) diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue index caeaf2c..b65e09c 100644 --- a/src/views/bigScreen/map/index.vue +++ b/src/views/bigScreen/map/index.vue @@ -1,6 +1,6 @@ - +
@@ -190,7 +190,7 @@
- + {{ shopInfo.info.bodyName }} - +
查看载体详情
@@ -441,10 +441,10 @@ - { // var geojson1 = new AMap.Polygon({ // path:OneGJ02.features[0].geometry.coordinates[0][0], - // strokeColor: '#00C5EC', + // strokeColor: '#00C5EC', // fillColor: '#00AEFF', // fillOpacity: 0.4, // // fillOpacity: 0.3, @@ -665,7 +665,7 @@ export default { // }); // var geojson2 = new AMap.Polygon({ // path:TwoGJ02.features[0].geometry.coordinates[0][0], - // strokeColor: '#00C5EC', + // strokeColor: '#00C5EC', // fillColor: '#00AEFF', // fillOpacity: 0.4, // // fillOpacity: 0.3, @@ -688,7 +688,7 @@ export default { // }); // var geojson3 = new AMap.Polygon({ // path:ThreeGJ02.features[0].geometry.coordinates[0][0], - // strokeColor: '#00C5EC', + // strokeColor: '#00C5EC', // fillColor: '#00AEFF', // fillOpacity: 0.4, // // fillOpacity: 0.3, @@ -711,7 +711,7 @@ export default { // }); // var geojson4 = new AMap.Polygon({ // path:FourGJ02.features[0].geometry.coordinates[0][0], - // strokeColor: '#00C5EC', + // strokeColor: '#00C5EC', // fillColor: '#00AEFF', // fillOpacity: 0.4, // // fillOpacity: 0.3, @@ -735,7 +735,7 @@ export default { // }); // var geojson5 = new AMap.Polygon({ // path:kaifaqu.features[0].geometry.coordinates[0][0], - // strokeColor: '#00C5EC', + // strokeColor: '#00C5EC', // fillColor: '#00AEFF', // fillOpacity: 0.4, // // fillOpacity: 0.3, @@ -759,7 +759,7 @@ export default { // var geojson6 = new AMap.Polygon({ // path:ruanjianyuan.features[0].geometry.coordinates[0][0], - // strokeColor: '#00C5EC', + // strokeColor: '#00C5EC', // fillColor: '#00AEFF', // fillOpacity: 0.4, // // fillOpacity: 0.3, @@ -789,7 +789,7 @@ export default { W.push(shapeStr.features[0]); let geojson = new AMap.Polygon({ path:shapeStr.features[0].geometry.coordinates[0], - strokeColor: '#00C5EC', + strokeColor: '#00C5EC', fillColor: '#00AEFF', fillOpacity: 0.4, // fillOpacity: 0.3, @@ -823,7 +823,7 @@ export default { - + // this.layers.layer.addOverlay(geojson1); // this.layers.text.addOverlay(text1); // this.layers.layer.addOverlay(geojson2); @@ -1023,7 +1023,7 @@ export default { this.shopInfo.visible = true; }) }, - + // 各个点位获取 getMarkers(id,status){ @@ -1071,7 +1071,7 @@ export default { // console.log(res,'点位信息'); if (res.data.obj) { res.data.obj.forEach((element) => { - if (element.status == "0" || element.status == "1") { + if (element.status == "0" || element.status == "1") { this.personLine.push(element); let obj = {position:[]}; obj.position[0] = element.longitude; @@ -1121,7 +1121,7 @@ export default { res.result.records.forEach((element)=>{ let obj = {position:[]}; let location = element.location?.split(','); - + // obj.imgSrc = element.status == "0" ? offIcon4 : ico5; if(location) { obj.position[0] = location[0]; @@ -1179,9 +1179,9 @@ export default { videoPoint.push(obj) }) this.count = videoPoint.length; - + AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{ - + this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ gridSize: 60, // 设置网格像素大小 styles: sts, @@ -1209,10 +1209,17 @@ export default { let videoPoint = []; res.data.forEach((element)=>{ let obj = {position:[]}; - obj.position[0] = element.longitude; - obj.position[1] = element.latitude; + let lonLat; + if(element.longitude && element.latitude) { + lonLat = this.wgs84togcj02(element.longitude,element.latitude); + } + // obj.position[0] = element.longitude; + obj.position[0] = lonLat ? lonLat[0] : 0; + // obj.position[1] = element.latitude; + obj.position[1] = lonLat ? lonLat[1] : 0; // obj.imgSrc = element.status == "0" ? offIcon4 : ico5; - obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0) + // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0) + obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0); obj.imgSrc = ico5; obj.info = element // this.markers.push(obj) @@ -1258,9 +1265,9 @@ export default { videoPoint.push(obj) }) this.count = videoPoint.length; - + AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{ - + this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ gridSize: 60, // 设置网格像素大小 styles: sts, @@ -1423,11 +1430,11 @@ export default { shareClick(){ console.log(this.personInfo,"位置分享"); if(this.personInfo.info.status == "1") { - var aux = document.createElement("input"); - aux.setAttribute("value", this.personInfo.info.address); - document.body.appendChild(aux); + var aux = document.createElement("input"); + aux.setAttribute("value", this.personInfo.info.address); + document.body.appendChild(aux); aux.select(); - document.execCommand("copy"); + document.execCommand("copy"); document.body.removeChild(aux); this.$modal.msgSuccess("位置已复制"); } else { @@ -1457,11 +1464,11 @@ export default { getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{ if(res.code == 200) { // this.$refs.aloneVideo.open(res.msg); - var aux = document.createElement("input"); - aux.setAttribute("value", res.msg); - document.body.appendChild(aux); + var aux = document.createElement("input"); + aux.setAttribute("value", res.msg); + document.body.appendChild(aux); aux.select(); - document.execCommand("copy"); + document.execCommand("copy"); document.body.removeChild(aux); this.$modal.msgSuccess("视频地址已复制"); } @@ -1477,7 +1484,7 @@ export default { // 二级网格获取 getWanggeGeoJson(){ - + bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{ let W = [] res.rows.forEach((element)=>{ @@ -1846,13 +1853,13 @@ export default { this.wanggeData.forEach((element)=>{ element.myPolygon?.setOptions({ strokeOpacity: 1, - strokeColor: '#00C5EC', + strokeColor: '#00C5EC', fillColor: '#00AEFF', fillOpacity: 0.4, editable:false, visible:true, }); - + element.text?.setStyle({ 'color': '#00AEFF', 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)', @@ -1882,7 +1889,7 @@ export default { this.map.setFitView(element.myPolygon); } else { element.myPolygon.setOptions({ - strokeColor: '#00C5EC', + strokeColor: '#00C5EC', fillColor: '#00AEFF', fillOpacity: 0.4, strokeOpacity: 1, @@ -1986,7 +1993,7 @@ export default { 'color': '#62E1FA', }); } - + }) } } else if(this.action == 2) { @@ -2035,7 +2042,7 @@ export default { // 取消区域网格高亮 this.wanggeData.forEach((element)=>{ element.myPolygon?.setOptions({ - strokeColor: '#0084FF', + strokeColor: '#0084FF', fillColor: '#40AFFF', fillOpacity: 0.8, editable:false, @@ -2070,7 +2077,7 @@ export default { this.map.setFitView(element.myPolygon); } else { element.myPolygon.setOptions({ - strokeColor: '#0084FF', + strokeColor: '#0084FF', fillColor: '#40AFFF', fillOpacity: 0.8, strokeOpacity: 1, @@ -2174,7 +2181,7 @@ export default { 'color': '#E4ECFF', }); } - + }) } } @@ -2190,7 +2197,7 @@ export default { if(this.action == 1) { if(this.highlightedPolygonId == 1) { this.lightedPolygon.setOptions({ - strokeColor: '#00C5EC', + strokeColor: '#00C5EC', fillColor: '#00AEFF', fillOpacity: 0.4, strokeOpacity: 1, @@ -2240,7 +2247,7 @@ export default { } else if(this.action == 2) { if(this.highlightedPolygonId == 1) { this.lightedPolygon.setOptions({ - strokeColor: '#0084FF', + strokeColor: '#0084FF', fillColor: '#40AFFF', fillOpacity: 0.8, editable:false, @@ -2298,7 +2305,7 @@ export default { this.visible = false; // 修改一级网格背景 this.layers.layer.setOptions ({ - strokeColor: '#00C5EC', + strokeColor: '#00C5EC', fillColor: '#00AEFF', fillOpacity: 0.4, editable:false, @@ -2357,7 +2364,7 @@ export default { this.visible = true; // 修改一级网格背景 this.layers.layer.setOptions ({ - strokeColor: '#0084FF', + strokeColor: '#0084FF', fillColor: '#40AFFF', fillOpacity: 0.8, editable:false, @@ -2423,7 +2430,7 @@ export default { // } // }) this.map.setMapStyle("amap://styles/whitesmoke") - + } }, // 搜索数据 @@ -2510,7 +2517,7 @@ export default { // 弹框点击取消事件 cancel(marker){ this.layers.layer4.removeOverlay(marker); - + }, confirm() { // 事件新增完毕重新请求事件列表及经纬度 @@ -2565,7 +2572,7 @@ export default { }, // 定时器 markerInterval(){ - + let timer if(this.actionMap == 1) { timer = setInterval(() => { @@ -2622,15 +2629,54 @@ export default { faviconLink.parentNode.replaceChild(newLink, faviconLink); } }) + }, + wgs84togcj02(lng, lat) { + // 定义一些常量 + var PI = 3.1415926535897932384626; + var a = 6378245.0; + var ee = 0.00669342162296594323; + + var lat = +lat; + var lng = +lng; + + // 判断是否在国内，不在国内则不做偏移 + if (!(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)) { + return [lng, lat] + } else { + // 转换lat + var dlatplng = lng - 105.0, dlatplat = lat - 35.0; + var dlat = -100.0 + 2.0 * dlatplng + 3.0 * dlatplat + 0.2 * dlatplat * dlatplat + 0.1 * dlatplng * dlatplat + 0.2 * Math.sqrt(Math.abs(dlatplng)); + dlat += (20.0 * Math.sin(6.0 * dlatplng * PI) + 20.0 * Math.sin(2.0 * dlatplng * PI)) * 2.0 / 3.0; + dlat += (20.0 * Math.sin(dlatplat * PI) + 40.0 * Math.sin(dlatplat / 3.0 * PI)) * 2.0 / 3.0; + dlat += (160.0 * Math.sin(dlatplat / 12.0 * PI) + 320 * Math.sin(dlatplat * PI / 30.0)) * 2.0 / 3.0; + + // 转换lng + var dlngplng = lng - 105.0, dlngplat = lat - 35.0; + var dlng = 300.0 + dlngplng + 2.0 * dlngplat + 0.1 * dlngplng * dlngplng + 0.1 * dlngplng * dlngplat + 0.1 * Math.sqrt(Math.abs(dlngplng)); + dlng += (20.0 * Math.sin(6.0 * dlngplng * PI) + 20.0 * Math.sin(2.0 * dlngplng * PI)) * 2.0 / 3.0; + dlng += (20.0 * Math.sin(dlngplng * PI) + 40.0 * Math.sin(dlngplng / 3.0 * PI)) * 2.0 / 3.0; + dlng += (150.0 * Math.sin(dlngplng / 12.0 * PI) + 300.0 * Math.sin(dlngplng / 30.0 * PI)) * 2.0 / 3.0; + + var radlat = lat / 180.0 * PI; + var magic = Math.sin(radlat); + magic = 1 - ee * magic * magic; + var sqrtmagic = Math.sqrt(magic); + dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); + dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); + var mglat = lat + dlat; + var mglng = lng + dlng; + + return [mglng, mglat] + } } - + }, mounted() { this.getPersonIcon(); this.getCarList(); this.getrobotToken(); - + // this.markerInterval(); }, };