suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

转换视频点位坐标

Browse Source
Lvtianfang
吕天方 12 months ago
parent adcf8b319e
commit 8160f5bc2a
1 changed files with 98 additions and 52 deletions
Show Stats Download Patch File Download Diff File

150
src/views/bigScreen/map/index.vue
Unescape View File

@ -1,6 +1,6 @@
<!-- <!--
* @Descripttion: * @Descripttion:
* @version: * @version:
* @Author: JC9527 * @Author: JC9527
* @Date: 2024-01-09 23:08:15 * @Date: 2024-01-09 23:08:15
* @LastEditors: JC9527 * @LastEditors: JC9527
@ -37,7 +37,7 @@
<!-- 江宁GeoJson文件 --> <!-- 江宁GeoJson文件 -->
<!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> --> <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
<!-- marker标记点 --> <!-- marker标记点 -->
<el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)"> <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
<div class="markerStyles"> <div class="markerStyles">
@ -190,7 +190,7 @@
</div> </div>
</div> </div>
</el-amap-info-window> </el-amap-info-window>
<!-- 监控视频弹框 --> <!-- 监控视频弹框 -->
<el-amap-info-window <el-amap-info-window
v-if="monitoringInfo.visible" v-if="monitoringInfo.visible"
@ -276,7 +276,7 @@
<div class="position">{{ shopInfo.info.bodyName }}</div> <div class="position">{{ shopInfo.info.bodyName }}</div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="btn" @click="getShopInfo"> <div class="btn" @click="getShopInfo">
查看载体详情 查看载体详情
</div> </div>
@ -441,10 +441,10 @@
<!-- 任务派发 --> <!-- 任务派发 -->
<personage-task ref="personageTask"></personage-task> <personage-task ref="personageTask"></personage-task>
<!-- 强制观摩弹框 --> <!-- 强制观摩弹框 -->
<el-dialog <el-dialog
:visible.sync="showVideo" :visible.sync="showVideo"
width="45%" width="45%"
title="强制观摩" title="强制观摩"
:show-close="false" :show-close="false"
:destroy-on-close="true" :destroy-on-close="true"
:close-on-click-modal="false" :close-on-click-modal="false"
@ -642,7 +642,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
// var geojson1 = new AMap.Polygon({ // var geojson1 = new AMap.Polygon({
// path:OneGJ02.features[0].geometry.coordinates[0][0], // path:OneGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC', // strokeColor: '#00C5EC',
// fillColor: '#00AEFF', // fillColor: '#00AEFF',
// fillOpacity: 0.4, // fillOpacity: 0.4,
// // fillOpacity: 0.3, // // fillOpacity: 0.3,
@ -665,7 +665,7 @@ export default {
// }); // });
// var geojson2 = new AMap.Polygon({ // var geojson2 = new AMap.Polygon({
// path:TwoGJ02.features[0].geometry.coordinates[0][0], // path:TwoGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC', // strokeColor: '#00C5EC',
// fillColor: '#00AEFF', // fillColor: '#00AEFF',
// fillOpacity: 0.4, // fillOpacity: 0.4,
// // fillOpacity: 0.3, // // fillOpacity: 0.3,
@ -688,7 +688,7 @@ export default {
// }); // });
// var geojson3 = new AMap.Polygon({ // var geojson3 = new AMap.Polygon({
// path:ThreeGJ02.features[0].geometry.coordinates[0][0], // path:ThreeGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC', // strokeColor: '#00C5EC',
// fillColor: '#00AEFF', // fillColor: '#00AEFF',
// fillOpacity: 0.4, // fillOpacity: 0.4,
// // fillOpacity: 0.3, // // fillOpacity: 0.3,
@ -711,7 +711,7 @@ export default {
// }); // });
// var geojson4 = new AMap.Polygon({ // var geojson4 = new AMap.Polygon({
// path:FourGJ02.features[0].geometry.coordinates[0][0], // path:FourGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC', // strokeColor: '#00C5EC',
// fillColor: '#00AEFF', // fillColor: '#00AEFF',
// fillOpacity: 0.4, // fillOpacity: 0.4,
// // fillOpacity: 0.3, // // fillOpacity: 0.3,
@ -735,7 +735,7 @@ export default {
// }); // });
// var geojson5 = new AMap.Polygon({ // var geojson5 = new AMap.Polygon({
// path:kaifaqu.features[0].geometry.coordinates[0][0], // path:kaifaqu.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC', // strokeColor: '#00C5EC',
// fillColor: '#00AEFF', // fillColor: '#00AEFF',
// fillOpacity: 0.4, // fillOpacity: 0.4,
// // fillOpacity: 0.3, // // fillOpacity: 0.3,
@ -759,7 +759,7 @@ export default {
// var geojson6 = new AMap.Polygon({ // var geojson6 = new AMap.Polygon({
// path:ruanjianyuan.features[0].geometry.coordinates[0][0], // path:ruanjianyuan.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC', // strokeColor: '#00C5EC',
// fillColor: '#00AEFF', // fillColor: '#00AEFF',
// fillOpacity: 0.4, // fillOpacity: 0.4,
// // fillOpacity: 0.3, // // fillOpacity: 0.3,
@ -789,7 +789,7 @@ export default {
W.push(shapeStr.features[0]); W.push(shapeStr.features[0]);
let geojson = new AMap.Polygon({ let geojson = new AMap.Polygon({
path:shapeStr.features[0].geometry.coordinates[0], path:shapeStr.features[0].geometry.coordinates[0],
strokeColor: '#00C5EC', strokeColor: '#00C5EC',
fillColor: '#00AEFF', fillColor: '#00AEFF',
fillOpacity: 0.4, fillOpacity: 0.4,
// fillOpacity: 0.3, // fillOpacity: 0.3,
@ -823,7 +823,7 @@ export default {
// this.layers.layer.addOverlay(geojson1); // this.layers.layer.addOverlay(geojson1);
// this.layers.text.addOverlay(text1); // this.layers.text.addOverlay(text1);
// this.layers.layer.addOverlay(geojson2); // this.layers.layer.addOverlay(geojson2);
@ -1023,7 +1023,7 @@ export default {
this.shopInfo.visible = true; this.shopInfo.visible = true;
}) })
}, },
// 各个点位获取 // 各个点位获取
getMarkers(id,status){ getMarkers(id,status){
@ -1071,7 +1071,7 @@ export default {
// console.log(res,'点位信息'); // console.log(res,'点位信息');
if (res.data.obj) { if (res.data.obj) {
res.data.obj.forEach((element) => { res.data.obj.forEach((element) => {
if (element.status == "0" || element.status == "1") { if (element.status == "0" || element.status == "1") {
this.personLine.push(element); this.personLine.push(element);
let obj = {position:[]}; let obj = {position:[]};
obj.position[0] = element.longitude; obj.position[0] = element.longitude;
@ -1121,7 +1121,7 @@ export default {
res.result.records.forEach((element)=>{ res.result.records.forEach((element)=>{
let obj = {position:[]}; let obj = {position:[]};
let location = element.location?.split(','); let location = element.location?.split(',');
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5; // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
if(location) { if(location) {
obj.position[0] = location[0]; obj.position[0] = location[0];
@ -1179,9 +1179,9 @@ export default {
videoPoint.push(obj) videoPoint.push(obj)
}) })
this.count = videoPoint.length; this.count = videoPoint.length;
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{ AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
gridSize: 60, // 设置网格像素大小 gridSize: 60, // 设置网格像素大小
styles: sts, styles: sts,
@ -1209,10 +1209,17 @@ export default {
let videoPoint = []; let videoPoint = [];
res.data.forEach((element)=>{ res.data.forEach((element)=>{
let obj = {position:[]}; let obj = {position:[]};
obj.position[0] = element.longitude; let lonLat;
obj.position[1] = element.latitude; 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.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.imgSrc = ico5;
obj.info = element obj.info = element
// this.markers.push(obj) // this.markers.push(obj)
@ -1258,9 +1265,9 @@ export default {
videoPoint.push(obj) videoPoint.push(obj)
}) })
this.count = videoPoint.length; this.count = videoPoint.length;
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{ AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
gridSize: 60, // 设置网格像素大小 gridSize: 60, // 设置网格像素大小
styles: sts, styles: sts,
@ -1423,11 +1430,11 @@ export default {
shareClick(){ shareClick(){
console.log(this.personInfo,"位置分享"); console.log(this.personInfo,"位置分享");
if(this.personInfo.info.status == "1") { if(this.personInfo.info.status == "1") {
var aux = document.createElement("input"); var aux = document.createElement("input");
aux.setAttribute("value", this.personInfo.info.address); aux.setAttribute("value", this.personInfo.info.address);
document.body.appendChild(aux); document.body.appendChild(aux);
aux.select(); aux.select();
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(aux); document.body.removeChild(aux);
this.$modal.msgSuccess("位置已复制"); this.$modal.msgSuccess("位置已复制");
} else { } else {
@ -1457,11 +1464,11 @@ export default {
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{ getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
if(res.code == 200) { if(res.code == 200) {
// this.$refs.aloneVideo.open(res.msg); // this.$refs.aloneVideo.open(res.msg);
var aux = document.createElement("input"); var aux = document.createElement("input");
aux.setAttribute("value", res.msg); aux.setAttribute("value", res.msg);
document.body.appendChild(aux); document.body.appendChild(aux);
aux.select(); aux.select();
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(aux); document.body.removeChild(aux);
this.$modal.msgSuccess("视频地址已复制"); this.$modal.msgSuccess("视频地址已复制");
} }
@ -1477,7 +1484,7 @@ export default {
// 二级网格获取 // 二级网格获取
getWanggeGeoJson(){ getWanggeGeoJson(){
bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{ bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{
let W = [] let W = []
res.rows.forEach((element)=>{ res.rows.forEach((element)=>{
@ -1846,13 +1853,13 @@ export default {
this.wanggeData.forEach((element)=>{ this.wanggeData.forEach((element)=>{
element.myPolygon?.setOptions({ element.myPolygon?.setOptions({
strokeOpacity: 1, strokeOpacity: 1,
strokeColor: '#00C5EC', strokeColor: '#00C5EC',
fillColor: '#00AEFF', fillColor: '#00AEFF',
fillOpacity: 0.4, fillOpacity: 0.4,
editable:false, editable:false,
visible:true, visible:true,
}); });
element.text?.setStyle({ element.text?.setStyle({
'color': '#00AEFF', 'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)', 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
@ -1882,7 +1889,7 @@ export default {
this.map.setFitView(element.myPolygon); this.map.setFitView(element.myPolygon);
} else { } else {
element.myPolygon.setOptions({ element.myPolygon.setOptions({
strokeColor: '#00C5EC', strokeColor: '#00C5EC',
fillColor: '#00AEFF', fillColor: '#00AEFF',
fillOpacity: 0.4, fillOpacity: 0.4,
strokeOpacity: 1, strokeOpacity: 1,
@ -1986,7 +1993,7 @@ export default {
'color': '#62E1FA', 'color': '#62E1FA',
}); });
} }
}) })
} }
} else if(this.action == 2) { } else if(this.action == 2) {
@ -2035,7 +2042,7 @@ export default {
// 取消区域网格高亮 // 取消区域网格高亮
this.wanggeData.forEach((element)=>{ this.wanggeData.forEach((element)=>{
element.myPolygon?.setOptions({ element.myPolygon?.setOptions({
strokeColor: '#0084FF', strokeColor: '#0084FF',
fillColor: '#40AFFF', fillColor: '#40AFFF',
fillOpacity: 0.8, fillOpacity: 0.8,
editable:false, editable:false,
@ -2070,7 +2077,7 @@ export default {
this.map.setFitView(element.myPolygon); this.map.setFitView(element.myPolygon);
} else { } else {
element.myPolygon.setOptions({ element.myPolygon.setOptions({
strokeColor: '#0084FF', strokeColor: '#0084FF',
fillColor: '#40AFFF', fillColor: '#40AFFF',
fillOpacity: 0.8, fillOpacity: 0.8,
strokeOpacity: 1, strokeOpacity: 1,
@ -2174,7 +2181,7 @@ export default {
'color': '#E4ECFF', 'color': '#E4ECFF',
}); });
} }
}) })
} }
} }
@ -2190,7 +2197,7 @@ export default {
if(this.action == 1) { if(this.action == 1) {
if(this.highlightedPolygonId == 1) { if(this.highlightedPolygonId == 1) {
this.lightedPolygon.setOptions({ this.lightedPolygon.setOptions({
strokeColor: '#00C5EC', strokeColor: '#00C5EC',
fillColor: '#00AEFF', fillColor: '#00AEFF',
fillOpacity: 0.4, fillOpacity: 0.4,
strokeOpacity: 1, strokeOpacity: 1,
@ -2240,7 +2247,7 @@ export default {
} else if(this.action == 2) { } else if(this.action == 2) {
if(this.highlightedPolygonId == 1) { if(this.highlightedPolygonId == 1) {
this.lightedPolygon.setOptions({ this.lightedPolygon.setOptions({
strokeColor: '#0084FF', strokeColor: '#0084FF',
fillColor: '#40AFFF', fillColor: '#40AFFF',
fillOpacity: 0.8, fillOpacity: 0.8,
editable:false, editable:false,
@ -2298,7 +2305,7 @@ export default {
this.visible = false; this.visible = false;
// 修改一级网格背景 // 修改一级网格背景
this.layers.layer.setOptions ({ this.layers.layer.setOptions ({
strokeColor: '#00C5EC', strokeColor: '#00C5EC',
fillColor: '#00AEFF', fillColor: '#00AEFF',
fillOpacity: 0.4, fillOpacity: 0.4,
editable:false, editable:false,
@ -2357,7 +2364,7 @@ export default {
this.visible = true; this.visible = true;
// 修改一级网格背景 // 修改一级网格背景
this.layers.layer.setOptions ({ this.layers.layer.setOptions ({
strokeColor: '#0084FF', strokeColor: '#0084FF',
fillColor: '#40AFFF', fillColor: '#40AFFF',
fillOpacity: 0.8, fillOpacity: 0.8,
editable:false, editable:false,
@ -2423,7 +2430,7 @@ export default {
// } // }
// }) // })
this.map.setMapStyle("amap://styles/whitesmoke") this.map.setMapStyle("amap://styles/whitesmoke")
} }
}, },
// 搜索数据 // 搜索数据
@ -2510,7 +2517,7 @@ export default {
// 弹框点击取消事件 // 弹框点击取消事件
cancel(marker){ cancel(marker){
this.layers.layer4.removeOverlay(marker); this.layers.layer4.removeOverlay(marker);
}, },
confirm() { confirm() {
// 事件新增完毕重新请求事件列表及经纬度 // 事件新增完毕重新请求事件列表及经纬度
@ -2565,7 +2572,7 @@ export default {
}, },
// 定时器 // 定时器
markerInterval(){ markerInterval(){
let timer let timer
if(this.actionMap == 1) { if(this.actionMap == 1) {
timer = setInterval(() => { timer = setInterval(() => {
@ -2622,15 +2629,54 @@ export default {
faviconLink.parentNode.replaceChild(newLink, faviconLink); 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() { mounted() {
this.getPersonIcon(); this.getPersonIcon();
this.getCarList(); this.getCarList();
this.getrobotToken(); this.getrobotToken();
// this.markerInterval(); // this.markerInterval();
}, },
}; };

Write Preview
Loading…
Cancel
Save