介绍
无人机在规划一块区域的时候，我们需要手动的给予一些参数来影响无人机飞行，对于一块地表，无人机每隔N秒在空中间隔的拍照地表的一块区域，在整个任务执行结束后，拍到的所有区域照片能够完整的表达出一块地表，那这次任务就是成功的。 当然，如果想完整的把一块地表拍下来也很简单，我们完全可以不停的去拍照，飞行的间隔特别小，但这不是我们想要的，因为这种方式比较浪费资源，我们想要的是在可能的情况下，以最少的航线规划、最少的图片数量来诠释这块地表，毕竟wayPoint最多只能执行99个。
重叠率
重叠率又分航向重叠率和旁向重叠率：
- 航向重叠率：指无人机在一条航线前进拍照时，第一次拍照的图片与第二次重叠的概率
- 旁向重叠率：指无人机在第一条航线拍的照片与第二条航线拍的照片重叠的概率
航向重叠率
用一张图来表示，绿色图块是第一次拍照拍到的地表区域，红色图块是第二次拍照拍到的地表区域，他俩重叠的部分的区域相对于他们自己来说就叫做航向重叠率。假设我们现在设置这次无人机飞行的航向重叠率为50%，那么重叠的部分正好是他们自身的一半，那么能不能设置重叠率为100%呢？当然不行，这样话，绿色块和红色块就是一个完美的重合，也就意味着第一次拍照和第二次拍照都在同一个地方，无人机就根本不会往前飞行了，而是停留在那。
旁向重叠率
绿色块是我们在第一条航线中拍到的区域，红色块是我们第二条航线拍到的区域，他俩重叠的部分相对于他们自己来说就叫做旁向重叠率，旁向重叠率是影响航线规划间隔的唯一因素，我们需要通过重叠率来计算出飞行路径的间隔，当然，此处的重叠率也不能设置为100%，如果设置100%的话，那么红色块就会和绿色块重叠，也意味着第一条航线和第二条航线重叠，无人机也就只会在一条航线上来来回回的飞行。
焦距与画幅
如果想知道一张图片所拍到的区域真实面积的话，那么焦距与画幅是离开不的因素。
如图所示，当前无人机是正向向我们飞过来的，我们需要求 拍摄到的真实的距离 ，其实看到图我们就能猜到，这是一个相似三角形的运算，计算公式：
那么，也就意味着我们需要知道焦距、画幅、无人机高度这些已知值，才能计算出拍摄到的真实距离。
焦距
焦距的获取Dji已经给出了API，我们可以直接获取。
public static Aircraft getAircraft() {
BaseProduct product = getProduct();
if (product != null && product.isConnected()) {
if (product instanceof Aircraft) {
return (Aircraft) product;
}
}
return null;
}
Camera camera=getAircraft().getCamera();
//如果camera不为空，并且当前drone支持焦距变焦
if (camera != null&&camera.isOpticalZoomSupported()) {
camera.getOpticalZoomFocalLength(new CommonCallbacks.CompletionCallbackWith<Integer>() {
@Override
public void onSuccess(Integer integer) {
//获取到焦距值
}
@Override
public void onFailure(DJIError djiError) {
}
});
}else{
//如果不支持焦距的话，则可以给个默认的焦距值 24(单位为毫米)
}画幅
画幅是一个固定值，分为长画幅与短画幅，上图中仅仅只是一个平面图，无法表示长画幅与短画幅的意思，我们对上图再做个立体图也就知晓了
画幅其实是一个矩形，也正好对应我们拍摄到的照片是一张矩形的照片，画幅的默认值为。
- 长画幅：35mm(单位毫米)，与旁向重叠率相关
- 短画幅：24mm(单位毫米)，与航向重叠率相关
计算
由于每次在规划航线时，无人机高度是用户自由进行选择拖动的，所以也是一个已知值，每次拖动无人机高度，航线会重新进行规划
非重叠距离公式
下面是一个通用的计算公式，计算出非重叠部分的真实距离
/**
* @param height 无人机高度，单位米(m)
* @param frame 画幅
* @param focal 焦距
* @param ratio 重叠率
*/
public static double get(double height, double frame, double focal, double ratio) {
//todo 如果focal焦距为0的话，则使用默认值值24毫米
focal = focal == 0 ? 24 : focal;
//单位换成米
focal = focal / 1000;
frame = frame / 1000;
//设呈现的真实距离为x
double x;
//拍摄到的距离
x = frame * height / focal;
//设重叠距离
double d;
//重叠部分的距离
d = ratio * x;
//非重叠部分的距离 （单位米）
d = x - d;
return d;
}航向重叠计算
已知短画幅=24mm，假设从无人机拿到的焦距是26mm，高度设置的是100米，重叠率设置80%，则无人机真正拍摄到的距离差为：
double distance=get(100,24,26,0.8) 现在计算出了无人机在拍摄照片的时候，拍摄第一张的位置与拍摄第二张的位置的距离差，那么计算这个距离值拿来干什么用呢，我们知道，距离=速度*时间 ，我们拍照的时间间隔是固定的，假设我们设计的时间是每隔2s进行一次拍照，那么，我们就可以根据 这个公式计算出 速度 ，然后将这个速度设置给 wayPoint , 当然，这个速度不能超过无人机的最大速度(10m/s)，我们可以在此做个判断，如果超过无人机最大速度，则设置无人机最大速度为 wayPoint 的速度，如果没有，则反之。我们可能在想，假设公式计算出来的最大速度是20m/s，如果我给他设置了最大速度10m/s的话，不会有影响吗？其实不然，我们假设飞行的距离是40m，我以20m/s的速度进行飞行，那么也就是2s就飞完了，如果这时候我下调到10m/s进行飞行，也就是需要4s才能飞完，已知无人机每隔2s进行一次拍照，那么20m/s的速度只需要拍一张就足够了，10m/s的就需要拍摄两张，这并不会影响拍摄的区域，只不过拍摄的照片比预期多了而已。
旁向重叠计算
旁向重叠的计算影响航线的的间隔，对于一块固定地表，间隔越宽，则飞行的航线就越少，间隔越窄，则飞行的航线就越多，主要影响间隔的就是重叠率。
已知长画幅=35mm，假设从无人机拿到的焦距是26mm，高度设置的是100米，重叠率设置80%，则航线间距离为:
double distance=get(100,35,26,0.8) 最终将航线距离丢给航线路径规划公式，计算出任务所执行的
<template>
<div>
<!-- 地图 -->
<div id="map"></div>
<!-- 左侧 -->
<div class="containers" v-show="leftShowAll">
<plan-left ref="pleft" @exportDji="exportDjiLineFun" @getRgihtViewMet="getRgihtViewMet" @editdata="getEditDataMet" @jteditdata="getJtEditDataMet" @jteditdata2="jteditdata2Fun" ></plan-left>
</div>
<!-- 右侧 -->
<div class="containers-right" v-show="rightShow">
<plan-right ref="plright" @DeeditPointArrs="DeeditPointArrs" @removeSingleFun="removeSingleFun" @removeSingleFun2="removeSingleFun2" :editData="editData" :blockArrInit="blockArrInit" :pointValueIndex="pointValueIndex" :chmapAarr="chmapAarr" :ptLineDistance="ptLineDistance"
:flagType="flagType" :editnameidobj="editnameidobj"
:editPointArrs="editPointArrs"
@refrshLeftMet="refrshLeftMet"
@canRight="canRightMet"
@removePointFun="removePointFun"></plan-right>
</div>
<!-- 普通打点 -->
<div class="jthp-start2" v-show="rightShow">
<el-tooltip class="item" effect="dark" content="批量删除" placement="bottom" >
<div @click="pdeletePointFun">
<img src="@/assets/images/jthp/shanchu1.png" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="批量设置高度以0点为标准" placement="bottom">
<div @click="setPointHeightFun()">
<img src="@/assets/images/jthp/height.png" />
</div>
</el-tooltip>
</div>
<!-- 建图航拍 start-->
<div class="jthp-start" v-show="jthpShow">
<el-tooltip class="item" effect="dark" content="开始构建航线" placement="bottom">
<div @click="startlBtnFun">
<img src="@/assets/images/jthp/bianji1.png" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抹除最后一个点" placement="bottom">
<div @click="jthpErase()">
<img src="@/assets/images/jthp/cachu.png" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="bottom">
<div @click="ctrlBtnFun">
<img src="@/assets/images/jthp/shanchu1.png" />
</div>
</el-tooltip>
</div>
<div class="containers-right" v-show="jthpShow">
<!-- 顶部 -->
<div class="top-name">
<span>航线昵称:</span>
<!-- <el-tooltip class="item" effect="dark" content="编辑不能修改航线昵称" placement="bottom"> -->
<div><el-input v-model="jthpInputName" placeholder="请输入内容"></el-input></div>
<!-- </el-tooltip> -->
</div>
<div class="centers">
<span>相机选择:</span>
<el-select v-model="cameraValue" placeholder="请选择" @change="cameraFun">
<el-option v-for="item in cameraList" :key="item.id" :label="item.name" :value="item.id" > </el-option>
</el-select>
</div>
<div class="top">
<div>
<span class="top-item">{{jthpPoint}}</span>
<span>航点数</span>
</div>
<div>
<span class="top-item">{{routeLength}}m</span>
<span>航线长度</span>
</div>
<div>
<span class="top-item">{{estimatePoint}}</span>
<span>预计拍照数</span>
</div>
<div>
<span class="top-item">{{areaFunToFid(jthpArea)}}㎡</span>
<span>面积</span>
</div>
</div>
<div class="block">
<div class="block-add" >
<div class="left">高度（m）</div>
<div class="right">
<div @click="blockjianMet(1)">-</div>
<span>{{spaceInpValue}}</span>
<div @click="blockjiaMet(1)">+</div>
</div>
</div>
<!-- 拉动数据高度 -->
<input type="range" style="width:100%" id="spaceInp" max="360" min="20" v-model="spaceInpValue"/>
<!-- 速度 -->
<div class="block-add" >
<div class="left">速度（m）</div>
<div class="right">
<div @click="blockjianMet(11)">-</div>
<span>
<input style="width:30px;font-size: 8px;height: 20px;text-align: center;" max="10" min="3" v-model="flySpeed"/>
</span>
<div @click="blockjiaMet(11)">+</div>
</div>
</div>
<!-- 拉动数据高度 -->
<input type="range" style="width:100%" id="spaceInp" max="10" min="3" v-model="flySpeed" oninput="if(value>10)value=10;if(value<3)value=3"/>
<!-- 可见光焦距 -->
<div class="block-add" >
<div class="left">可见光焦距</div>
<div class="right">
<div @click="blockjianMet(12)">-</div>
<span>
<input style="width:30px;font-size: 8px;height: 20px;text-align: center;" max="30" min="1" v-model="visibleLightFocal" oninput="if(value>30)value=30;if(value<1)value=1" />
</span>
<div @click="blockjiaMet(12)">+</div>
</div>
</div>
<!-- 拉动数据高度 -->
<input type="range" style="width:100%" id="spaceInp" max="30" min="1" v-model="visibleLightFocal"/>
<div class="block-add" >
<div class="left">角度（c）</div>
<div class="right">
<div @click="blockjianMet(2)">-</div>
<span>{{stepRotateValue}}</span>
<div @click="blockjiaMet(2)">+</div>
</div>
</div>
<!-- 拉动数据角度 -->
<input type="range" style="width:100%" id="stepRotate" max="360" min="0" v-model="stepRotateValue"/>
<!-- 拉动数据航向重叠率-->
<div class="block-add" >
<div class="left">航向重叠率（%）</div>
<div class="right">
<div @click="blockjianMet(3)">-</div>
<span>{{courseOverlapRate}}</span>
<div @click="blockjiaMet(3)">+</div>
</div>
</div>
<!-- 拉动数据角度 -->
<input type="range" style="width:100%" id="stepRotate" max="85" min="10" v-model="courseOverlapRate"/>
<!-- 拉动数据旁向重叠率-->
<div class="block-add" >
<div class="left">旁向重叠率（%）</div>
<div class="right">
<div @click="blockjianMet(4)">-</div>
<span>{{lateralOverlapRate}}</span>
<div @click="blockjiaMet(4)">+</div>
</div>
</div>
<!-- 拉动数据旁向重叠率 -->
<input type="range" style="width:100%" id="stepRotate" max="83" min="10" v-model="lateralOverlapRate"/>
</div>
<div>
<!--经纬度-->
<div class="jwd">
<div>
<span>纬度</span>
<span>{{getJwd(1)}}</span>
</div>
<div>
<span>经度</span>
<span>{{getJwd(2)}}</span>
</div>
</div>
<!--方向盘-->
<div class="panel">
<img class="top" :src="ygdrImgList.qianImg1" @mouseup="onUpAn(1)" @mousedown="onDownAn(1)" />
<img class="bottom" :src="ygdrImgList.qianImg2" @mouseup="onUpAn(2)" @mousedown="onDownAn(2)" />
<img class="left" :src="ygdrImgList.qianImg3" @mouseup="onUpAn(3)" @mousedown="onDownAn(3)" />
<img class="right" :src="ygdrImgList.qianImg4" @mouseup="onUpAn(4)" @mousedown="onDownAn(4)" />
</div>
</div>
<!-- 底部数据保存 -->
<div class="save-btn">
<div @click="savejthpFun" v-hasPermi="['plan:route:add']">保存</div>
<!--<div @click="testFun">测试</div> -->
<div @click="canJthpRightFun">取消</div>
</div>
</div>
<!-- 建图航拍 end-->
</div>
</template>
<script>
import planLeft from "./components/planLeft.vue";
import planRight from "./components/planRt.vue";
import planJthp from "./components/planJthp.vue";
import { getInfoApi ,addjkLineApi,editLineApi,getCameraApi} from "@/api/fly/fly";
import { dictTypeParmAll } from "@/api/device/list";
import cpRPA from "../../utils/lib/cpRPA.js";
import { Loading } from 'element-ui'
const geometryUtil = require("../../utils/lib/bm.geometryutil.js");
var state,jtpolygon, Jtpolyline, polyline, groupLayer,map,marker, marker3, marker5, groupLayer5, marker2 , myIcon2= null;
export default {
components: {
planLeft,
planRight,
},
data() {
return {
routeSource:null,
routeType:null,//大疆建图类型
visibleLightFocal:2.3,//可见光焦距
blockArrInit:[],
flySpeed:3,//默认最低3
jthpShow: false, //建图航拍
leftShowAll: true,
lineArr: [],
marker: [],
chmapAarr: [],
rightShow: false,
flagType: "",
editnameidobj: {
editname: "",
id: "",
downFildId: "",
downFildName: "",
},
editPointArrs: [],
editData: {},
selectActionList: [],
pointValueIndex: 1, //重置右侧点
tempArr: [],
latlngs: [], //线段的坐标点
markerArr: [], //点线绘制集合图层
//建图航拍
ctrlText: "绘制凸多边形地块",
spaceInpValue: 20,
stepRotateValue: 360,
jthpInputName:"",
jthpParamsHeight:20, //高德
jthpParamsAngle:360,//角度
jthpSettingList:[
{
name:"基础设置",
bool:true
},
{
name:"高级设置",
bool:false
},
{
name:"相机设置",
bool:false
}
],
jthpArea:null,//面积
jthpAreaFlag:0,//面积的flag
jthpPoint:0,//航点数
ptLineDistance:0,//普通模式航线总长
jtEditFlagId:null,//编辑主表id
jtids:null,//编辑建图id
tempMarker:[],//开始和结束 建图航拍 点
tempMarkerFlag:0,//新增开始和结束图标
marker5List:[],//记录建图打点白蓝图标
marker5LatList:[],//建图经纬度 蓝白点
oldDragLat:null,//移动红蓝点老的经纬度
ygdrImgList:{ //摇杆图片切换
qianImg1:require("@/assets/images/jthp/上@2x.png"),
qianImg2:require("@/assets/images/jthp/下@2x.png"),
qianImg3:require("@/assets/images/jthp/左@2x.png"),
qianImg4:require("@/assets/images/jthp/右@2x.png"),
},
cameraList: [],
longFrame:0,//长画幅
longFrameFocus:0,//长画幅焦距
shortFrame:"",//短画幅
shortFrameFocus:0,//短画幅焦距
cameraValue: 0,
lateralOverlapRate:80,//旁向重叠率
courseOverlapRate:50,//航向重叠率
lateralDistance:0,//旁向距离
courseDistance:0,//航向距离
lateralDistanceTemp:0, //临时的旁向距离
photoPointList:[],//拍照点
routeLength:0,//航线长度
estimatePoint:0,//预估航点
};
},
created() {
this.dictTypeParmAllComm();
},
mounted() {
this.getCameraFun();
this.bigemapCreate(); //加载bigemap
},
watch: {
//计算普通模式 点之间距离总和 单位米
latlngs(newlatlngs,olds){
var tempDistance=0;
var tempLatlngs=[];
for(var i=0;i<newlatlngs.length;i++){
tempLatlngs.push({ lat:newlatlngs[i][0], lng: newlatlngs[i][1] })
}
if(newlatlngs.length>1){
for(var i=0;i<tempLatlngs.length;i++){
if(i==tempLatlngs.length-1){
tempDistance=tempDistance+ map.distance(tempLatlngs[tempLatlngs.length-2],tempLatlngs[tempLatlngs.length-1]);
}else{
tempDistance= tempDistance+ map.distance(tempLatlngs[i],tempLatlngs[1+i]);
}
}
this.ptLineDistance=tempDistance;
}
},
//监听角度
stepRotateValue(old, news) {
if(this.jthpShow){
if (Jtpolyline.latlngs.length !=0) {
this.renderPolyline();
}
}
},
//监听高度 只会影响旁向重叠率
spaceInpValue(news,old){
if(this.jthpShow){
if (jtpolygon.latlngs.length > 1) {
var distance=cpRPA.getNonOverlapping(this.spaceInpValue,this.longFrame,this.longFrameFocus,this.lateralOverlapRate/100)
this.lateralDistance=distance[1];
this.lateralDistanceTemp=distance[1];
this.renderPolyline();
}
///监听高度同时旁向重叠率也需要随之变化 变化
if (Jtpolyline.latlngs.length > 1) {
var distance=cpRPA.getNonOverlapping(this.spaceInpValue,this.longFrame,this.longFrameFocus,this.lateralOverlapRate/100);
if(distance[2]==0){ }else{
this.lateralDistance=distance[1];
this.renderPolyline(); } }
}
},
//监听旁向重叠率 是短画符
lateralOverlapRate(news,old){
this.lateralOverlapRate=news;
///监听旁向重叠率 变化
if (Jtpolyline.latlngs.length > 1) {
var distance=cpRPA.getNonOverlapping(this.spaceInpValue,this.longFrame,this.longFrameFocus,this.lateralOverlapRate/100);
if(distance[2]==0){ }else{
this.lateralDistance=distance[1];
this.renderPolyline(); } }
///监听旁向重叠率 同时高度也需要随之变化 变化
if (jtpolygon.latlngs.length > 1) {
var distance=cpRPA.getNonOverlapping(this.spaceInpValue,this.longFrame,this.longFrameFocus,this.lateralOverlapRate/100)
this.lateralDistance=distance[1];
this.lateralDistanceTemp=distance[1];
this.renderPolyline();
}
},
//监听航向重叠率 是长画符-------------------
courseOverlapRate(news,old){
if (Jtpolyline.latlngs.length > 1) {
var distance=cpRPA.getNonOverlapping(this.spaceInpValue,this.shortFrame,this.shortFrameFocus,news/100);
this.courseDistance=distance[1];
this.renderPolyline();
}
},
jthpAreaFlag(news,old){
if(this.jthpShow){
if(this.marker5List.length>2){
this.renderPolyline();
this.calculatePolygonArea(news);
}else{
this.jthpAreaFlag=0;
}
}
}
},
methods: {
jteditdata2Fun(item){
this.routeSource=item.source;
},
removeSingleFun(pointTemp){
if(this.blockArrInit.length>0){
this.blockArrInit = this.blockArrInit.filter((item) => {
if (item.pointflag == pointTemp) { } else {return item; }
});
}
},
removeSingleFun2(item){
for (var i = 0; i < this.blockArr.length; i++) {
if (item.index == this.blockArr[i].index) {
this.blockArr.splice(i, 1); //删除第2个元素
}
}
},
//测试
judgeFun(){ return true;},
//建图线段总长 米
getJtDistanceFun(){
//总长计算
var distanceTotal=0;
if(Jtpolyline.latlngs.length>0){
for(var i=0;i<Jtpolyline.latlngs.length-1;i++){
distanceTotal=distanceTotal+map.distance(Jtpolyline.latlngs[i],Jtpolyline.latlngs[i+1]);
}
this.photoPointList=[];
var ArrTemps=[];
for(var i=1;i<parseInt(distanceTotal/this.courseDistance);i++){
//这是计算航线等分长度 获得经纬度点的结果
var des = BM.GeometryUtil.interpolateOnLine(map,Jtpolyline.latlngs,i*this.courseDistance/distanceTotal);
ArrTemps.push( des.latLng);
}
this.photoPointList=ArrTemps;
this.routeLength=parseFloat(distanceTotal).toFixed(2);
this.estimatePoint=ArrTemps.length;
// console.log("我设置的距离",this.courseDistance);
// // console.log("随机抽取等分2点之间距离前10内的点",map.distance(this.photoPointList[1],this.photoPointList[2]));
// console.log("等分获取的点集合",this.photoPointList);
}else{
this.estimatePoint=0; //预估点数为0
this.routeLength=0;//总长为0
}
},
//控制盘移动摇杆
movePanleFun(lengs){
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
var layArr= groupLayer5.getLayers();
var s= L.latLng( jtpolygon.latlngs[lengs].lat, jtpolygon.latlngs[lengs].lng);
layArr[layArr.length-1].setLatLng(s);
this.renderPolyline();
this.calculatePolygonArea(jtpolygon.latlngs);
},
//获取遥控经纬度
getJwd(item){
if(jtpolygon!=null){
if(jtpolygon.latlngs.length>0){
if(item==1){
return jtpolygon.latlngs[jtpolygon.latlngs.length-1].lat;
}else{ return jtpolygon.latlngs[jtpolygon.latlngs.length-1].lng; } }else{ return 0;}
}
},
//加----动作数据
blockjiaMet(type) {
if(type==1){ //高度
if(this.spaceInpValue<360){
this.spaceInpValue++;
}
}else if(type==2){ //角度
if(this.stepRotateValue<360){
this.stepRotateValue++;
}
}else if(type==3){ //航向重叠率
if( this.courseOverlapRate<85){
this.courseOverlapRate++;
}
}else if(type==4){ //旁向重叠率
if( this.lateralOverlapRate<83){
this.lateralOverlapRate++;
}
}else if(type==11){ //速度
if( this.flySpeed<10){
this.flySpeed++;
}
}else if(type==12){ //速度
if( this.visibleLightFocal<30){
this.visibleLightFocal++;
}
}
},
//减---动作数据
blockjianMet(type) {
if(type==1){ //高度
if(this.spaceInpValue>20){
this.spaceInpValue--;
}else{
alert("高度不能小于20");
}
}else if(type==2){//角度
if( this.stepRotateValue>0){
this.stepRotateValue--;
}
}else if(type==3){
if( this.courseOverlapRate>10){
this.courseOverlapRate--;
}
}else if(type==4){
if( this.lateralOverlapRate>10){
this.lateralOverlapRate--;
}
}else if(type==11){
if(this.flySpeed>3){
this.flySpeed--;
}
}else if(type==12){
if(this.visibleLightFocal>=1){
this.visibleLightFocal--;
}
}
},
//相机选择
getCameraFun(){
getCameraApi().then((res) => {
if (res.code == 200) {
if(res.data.length>0){
this.cameraValue=res.data[0].id;
this.cameraList=res.data;
this.longFrame=res.data[0].longFrame;//长画幅
this.longFrameFocus=res.data[0].longFrameFocus;//长画幅焦距
this.shortFrame=res.data[0].shortFrame;//短画幅
this.shortFrameFocus=res.data[0].shortFrameFocus;//短画幅焦距
var dlong=cpRPA.getNonOverlapping(this.spaceInpValue,this.longFrame,this.longFrameFocus,this.lateralOverlapRate/100)
this.lateralDistance=dlong[1];
var dshort=cpRPA.getNonOverlapping(this.spaceInpValue,this.shortFrame,this.shortFrameFocus,this.courseOverlapRate/100);
this.courseDistance=dshort[1];
}else{
this.$message({ message: "请前去添加相机", type: "info" });
}
}
});
},
//面积保留小数截取
areaFunToFid(item){
if(item==null){
return 0;
}else{
return item.toFixed(2);
}
},
onDownAn(type){
var lengs=jtpolygon.latlngs.length-1;
switch(type){
case 1:
this.ygdrImgList.qianImg1=require("@/assets/images/jthp/上02@2x.png");
if(jtpolygon!=null){
jtpolygon.latlngs[lengs].lat= jtpolygon.latlngs[lengs].lat+0.0000325103344;
this.movePanleFun(lengs);//更新蓝白点
}
break;
case 2:
this.ygdrImgList.qianImg2=require("@/assets/images/jthp/下02@2x.png");
if(jtpolygon!=null){
jtpolygon.latlngs[lengs].lat= jtpolygon.latlngs[lengs].lat-0.0000325103344;
this.movePanleFun(lengs);//更新蓝白点
}
break;
case 3:
this.ygdrImgList.qianImg3=require("@/assets/images/jthp/左02@2x.png");
if(jtpolygon!=null){
jtpolygon.latlngs[lengs].lng= jtpolygon.latlngs[lengs].lng-0.0000325103344;
this.movePanleFun(lengs);//更新蓝白点
}
break;
case 4:
this.ygdrImgList.qianImg4=require("@/assets/images/jthp/右02@2x.png");
if(jtpolygon!=null){
jtpolygon.latlngs[lengs].lng= jtpolygon.latlngs[lengs].lng+0.0000325103344;
this.movePanleFun(lengs);//更新蓝白点
}
break;
}
},
onUpAn(type){
switch(type){
case 1:
this.ygdrImgList.qianImg1=require("@/assets/images/jthp/上@2x.png");
break;
case 2:
this.ygdrImgList.qianImg2=require("@/assets/images/jthp/下@2x.png");
break;
case 3:
this.ygdrImgList.qianImg3=require("@/assets/images/jthp/左@2x.png");
break;
case 4:
this.ygdrImgList.qianImg4=require("@/assets/images/jthp/右@2x.png");
break;
}
},
//建图航拍切换设置
jthpCenterFun(item){
for (var i = 0; i < this.jthpSettingList.length; i++) {
this.$set(this.jthpSettingList[i], "bool", false);
}
this.$set(item, "bool", true);
},
// 显示建图航拍
getViewJthpFun() {
if(typeof L!="undefined"){
this.jthpShow = true;
}
var myIcon = L.icon({ iconUrl: '/img/机库.png', iconSize: [30, 30], className:"bigmarker"});
//添加中心的marker
marker2 = L.marker([this.$store.state.flydata.flyObj.latitudeWgs84,this.$store.state.flydata.flyObj.longitudeWgs84],{icon:myIcon}).addTo(map);
},
//进入航线的时候 才创建机库的坐标marker
createInitMarker(){
if(typeof L!="undefined"){
var myIcon = L.icon({ iconUrl: '/img/机库.png', iconSize: [30, 30], className:"bigmarker"});
//添加中心的marker
marker2 = L.marker([this.$store.state.flydata.flyObj.latitudeWgs84,this.$store.state.flydata.flyObj.longitudeWgs84],{icon:myIcon}).addTo(map);
// L.circle([this.$store.state.flydata.flyObj.latitudeWgs84,this.$store.state.flydata.flyObj.longitudeWgs84], {radius: 500}).addTo(map);
}
},
//初始化地图
bigemapCreate() {
let that = this;
map = new L.Map('map', { center: overallConfig.bigConfig.initCenter, zoom: overallConfig.bigConfig.bigZoom, zoomControl:false, attributionControl: false});
//-----东大圩---start
let ty1 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line1' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty2 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line2' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty3 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line3' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty4 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line4' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty5 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line5' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty6 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line6' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty7 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line7' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty8 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line8' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty9 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line9' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty11 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line11' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
let ty12 = L.tileLayer('./../' + overallConfig.tileUrl3 + '/line12' + '/{z}/{x}/{y}.png',{maxZoom:21}).addTo(map);
//-----东大圩---end
//宁夏
let ty10 = L.tileLayer('./../' + overallConfig.tileUrl + '/{z}/{x}/{y}.png', { maxZoom: overallConfig.bigConfig.maxZoom, zoom: overallConfig.bigConfig.bigZoom, id: 'OpenStreetMap' }).addTo(map);
that.bigemapMouseListener(); //执行监听操作
polyline = L.polyline([], { color: "#00FFF7" }).addTo(map);
//建图航拍
state = { isReadyDrawPolygon: false,isBeginDraw: false,};
jtpolygon = {layer: new L.polygon([], { color: "#1FA3F6",fillColor: "#f5f5f5",weight: 4,fillOpacity: 0.1,opacity: 1, }).addTo(map), latlngs: [],};
Jtpolyline = {layer: new L.polyline([], {color: "#14EC92",weight: 3, opacity: 1,}).addTo(map),latlngs: [],};
cpRPA.setDistanceFn(that.distance);
cpRPA.setLatlng2PxFn(that.latlng2Px);
cpRPA.setPx2LatlngFn(that.px2Latlng);
map.on("click", function (e) {
if (state.isReadyDrawPolygon) {
jtpolygon.latlngs.push(e.latlng);
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
//监听地图点击 增加白色图标点 添加marker
if (jtpolygon.latlngs.length > 2) {
that.jthpAreaFlag=jtpolygon.latlngs;
that.setRedBluePointFun(e.latlng.lat,e.latlng.lng,"/img/白点.png",2);
}else{
that.setRedBluePointFun(e.latlng.lat,e.latlng.lng,"/img/白点.png",1);
}
}
});
},
//取消建图航拍显示
canJthpRightFun(){
this.ctrlBtnFun();//删除点
this.jthpShow=false;
},
//----------------------------------大疆建图航线导入start-----------------------------------
exportDjiLineFun(res){
this.routeType=res.data.routeType;
let that=this;
// console.log("大疆建图航线导入",res.data.hangerRouteAerialPhotography.polygonLocationWgs84List );
this.getCameraFun();
this.jthpInputName=res.data.name;
//高度
this.spaceInpValue= res.data.hangerRouteAerialPhotography.flightAltitude;
//角度
this.stepRotateValue= res.data.hangerRouteAerialPhotography.mainRouteAngle;
//航向重叠率
this.courseOverlapRate= res.data.hangerRouteAerialPhotography.courseOverlapRate;
//旁
this.lateralOverlapRate= res.data.hangerRouteAerialPhotography.lateralOverlapRate;
let vdata=res.data.hangerRouteAerialPhotography.polygonLocationWgs84List ;
for(var i=0;i<vdata.length;i++){
jtpolygon.latlngs.push({lat:vdata[i].latitude,lng:vdata[i].longitude});
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
if (vdata.length> 2) {
that.jthpAreaFlag=jtpolygon.latlngs;
that.setRedBluePointFun(vdata[i].latitude,vdata[i].longitude,"/img/白点.png",2);
}else{
that.setRedBluePointFun(vdata[i].latitude,vdata[i].longitude,"/img/白点.png",1);
}
}
this.getViewJthpFun();
},
//----------------------------------大疆建图航线导入end-----------------------------------
//----------------------------建图航拍 ---srart------------------------------------
//抹除点
jthpErase() {
var that = this;
if (this.marker5List.length > 0) {
if ((jtpolygon.latlngs.length - 1) == 2) {
groupLayer.remove(); //2个 marker点的时候 移除开始和结束图标interpolateOnLine
this.markerArr = [];
}
var last = jtpolygon.latlngs.length - 1;
for (var i = 0; i < jtpolygon.latlngs.length; i++) {
if (i == last) {
jtpolygon.latlngs.splice(i, 1);
this.marker5List.splice(i, 1);
//先移除 指定 marker
var layArr = groupLayer5.getLayers();
groupLayer5.removeLayer(layArr[i])
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
if (i > 1) {
layArr[i - 1].setIcon(myIcon2);//最后一个点换成蓝色
that.renderPolyline();
} else {
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
}
}
}
if (that.jtEditFlagId != null) { //编辑逻辑当中（处理 开始图标和结束图标）
if (layArr.length > 2) {
if (this.tempMarkerFlag == 1) {
} else { }
}
}
if (this.marker5List.length == 2) {
that.jthpArea = 0;
}
}
},
//设置 红白蓝点
setRedBluePointFun(lat, lng, imgUrl, type) {
var that = this;
var myIcon = L.icon({ iconUrl: imgUrl, iconSize: [18, 18] });
myIcon2 = L.icon({ iconUrl: "/img/蓝点.png", iconSize: [18, 18] });
marker5 = L.marker([lat, lng], { icon: myIcon, draggable: true, riseOnHover: true });
this.marker5List.push(marker5);
groupLayer5 = L.featureGroup(this.marker5List).on("click", function () { }).addTo(map);
marker5.on('move', function (e) {
that.oldDragLat = e.oldLatLng.lat;
});
marker5.on('moveend', function (e) {
for (var i = 0; i < jtpolygon.latlngs.length; i++) {
if (jtpolygon.latlngs[i].lat == that.oldDragLat) { //对不移动的点
jtpolygon.latlngs[i].lat = e.target._latlng.lat;
jtpolygon.latlngs[i].lng = e.target._latlng.lng;
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
that.renderPolyline();
}
}
});
if (type == 2) {
//动态变化蓝点和白点
var layArr = groupLayer5.getLayers();
for (var i = 0; i < layArr.length; i++) {
if (i == layArr.length - 1) {
layArr[i].setIcon(myIcon2);
} else {
layArr[i].setIcon(myIcon);
}
}
//动态改变 开始 S E 结束点
if (layArr.length == 3) {
this.tempMarkerFlag = 0;
}
}
},
//更新构图
renderPolyline() {
Jtpolyline.latlngs = cpRPA.setOptions({
polygon: jtpolygon.latlngs,
rotate: parseFloat(this.stepRotateValue) || 0,
space: parseFloat(this.lateralDistance)
});
Jtpolyline.layer.setLatLngs(Jtpolyline.latlngs); //设置里面航线数据
this.jthpPoint = Jtpolyline.latlngs.length;
if (this.tempMarkerFlag == 0) {
if (Jtpolyline.latlngs.length != 0) { //如果没有里面点情况
this.setMarker(Jtpolyline.latlngs[0].lat, Jtpolyline.latlngs[0].lng, '/img/S.png'); //开始
this.setMarker(Jtpolyline.latlngs[Jtpolyline.latlngs.length - 1].lat, Jtpolyline.latlngs[Jtpolyline.latlngs.length - 1].lng, '/img/E.png'); //结束
this.tempMarkerFlag = 1; //如果为1的话 就不能继续添加marker 满足新增条件 动态改变图标
}
} else { }
if (Jtpolyline.layer._latlngs.length > 1) { //动态设置开始 S 和结束E 坐标
var layArr = groupLayer.getLayers();
var latlng_start = L.latLng(Jtpolyline.layer._latlngs[0].lat, Jtpolyline.layer._latlngs[0].lng);
var latlng_end = L.latLng(Jtpolyline.layer._latlngs[Jtpolyline.layer._latlngs.length - 1].lat, Jtpolyline.layer._latlngs[Jtpolyline.layer._latlngs.length - 1].lng);
layArr[0].setLatLng(latlng_start);
layArr[1].setLatLng(latlng_end);
this.calculatePolygonArea(jtpolygon.latlngs);
}
//动态更新线段总长
this.getJtDistanceFun()
},
//计算面积
calculatePolygonArea(latLngs) {
let that = this;
var pointsCount = latLngs.length,
area = 0.0,
d2r = Math.PI / 180,
p1, p2;
if (pointsCount > 2) {
for (var i = 0; i < pointsCount; i++) {
p1 = latLngs[i];
p2 = latLngs[(i + 1) % pointsCount];
area += ((p2.lng - p1.lng) * d2r) * (2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
}
area = area * 6378137.0 * 6378137.0 / 2.0;
}
that.jthpArea = Math.abs(area);
return Math.abs(area);
},
//开始构建建图航拍
startlBtnFun() {
state.isReadyDrawPolygon = true;
},
//移除所有的点
ctrlBtnFun() {
state.isReadyDrawPolygon = false;
if (state.isReadyDrawPolygon) {
// this.ctrlText = "清除";
} else {
//清除
this.jthpArea = 0;
this.jthpPoint = 0;
this.stepRotateValue = 360;
this.jthpArea = 0;
this.jthpPoint = 0;
this.tempMarkerFlag = 0;
this.marker5List = [];//清空蓝白点
this.estimatePoint = 0;//清空预估点
this.courseOverlapRate = 10;
this.routeLength = 0;
this.spaceInpValue = 20;//清空间距
this.markerArr = [];
if (groupLayer5 == null) { } else { groupLayer5.remove(); }
if (groupLayer == null) { } else { groupLayer.remove(); }
this.initDraw();
}
},
//初始化建图数据
initDraw() {
jtpolygon.latlngs = Jtpolyline.latlngs = [];
jtpolygon.layer.setLatLngs(jtpolygon.latlngs);
Jtpolyline.layer.setLatLngs(Jtpolyline.latlngs);
},
//提交建图航拍数据给后台
savejthpFun() {
if (this.photoPointList.length < 1001 && this.photoPointList.length != 0) {
let downloadLoadingInstance = Loading.service({ text: "航线数据加载中...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
var jtlinePointAll = Jtpolyline.latlngs;
var jtpolyPonitAll = jtpolygon.latlngs;
if (this.jthpInputName == "" || jtpolygon.latlngs.length < 2 || this.cameraValue == 0) { //小于2个点不能提交
this.$message({ message: "航线名称和点和相机不能为空", type: "info" });
} else {
var jthpTemp = {
routeType:this.routeType,
flySpeed: this.flySpeed, //飞行速度m=/s
visibleLightFocal: this.visibleLightFocal,
name: this.jthpInputName,
droneBoxId: this.$store.state.mapdata.droneBoxId, //机场id
source: this.routeType==null?2:1, //建图航拍类型
id: this.jtEditFlagId == null ? null : this.jtEditFlagId, //编辑时候才要
hangerRouteAerialPhotography: {
id: this.jtids == null ? null : this.jtids,
jtPolyLine: JSON.stringify(Jtpolyline.latlngs), //存储航线内部所有点
cameraId: this.cameraValue, //相机id
mainRouteAngle: this.stepRotateValue, //主航线角度(单位 ° )
courseOverlapRate: this.courseOverlapRate, //航向重叠率
lateralOverlapRate: this.lateralOverlapRate, //旁向重叠率
flightAltitude: this.spaceInpValue, //飞行高度(m)
margin: 84,
routeId: this.jtids == null ? null : this.jtids,
homeLocation: {
longitude: 0,
latitude: 0,
label: "起始坐标",
},//起始坐标
polygonLocationList: [], //外面矩形点
},
//里面航线点
hangerRoutePointList: []
}
//里面拍照航线点
for (var i = 0; i < this.photoPointList.length; i++) {
jthpTemp.hangerRoutePointList.push(
{
pointNumber: i,
longitudeWgs84: this.photoPointList[i].lng,
latitudeWgs84: this.photoPointList[i].lat,
height: this.spaceInpValue,
id: null,
routeId: null,
latitudeGcj02: null,
longitudeGcj02: null,
actionsList: [{
type: 1,
min: null,
lowMin: null,
heightMin: null,
max: null,
heightMax: null,
heightParam: null,
display: null,
unit: null,
lowParam: null,
lowMax: null,
param: "",
},],
},
)
}
//外面点
for (var i = 0; i < jtpolyPonitAll.length; i++) {
if (i == 0) { //起始坐标
jthpTemp.hangerRouteAerialPhotography.homeLocation.longitude = jtpolyPonitAll[i].lng;
jthpTemp.hangerRouteAerialPhotography.homeLocation.latitude = jtpolyPonitAll[i].lat;
}
jthpTemp.hangerRouteAerialPhotography.polygonLocationList.push({
longitude: jtpolyPonitAll[i].lng,
latitude: jtpolyPonitAll[i].lat,
label: (i + 1) + '',
})
}
if (this.jtEditFlagId != null) {
jthpTemp.source =this.routeSource;
//编辑
editLineApi(jthpTemp).then((res) => {
if (res.code == 200) {
this.routeType=null;
this.$message({ message: res.msg, type: "success" });
this.canRightMet();//去消右侧显示
this.$refs.pleft.getlineList(this.$store.state.mapdata.droneBoxId); //刷新左侧从tree
}
});
} else {
//新增
addjkLineApi(jthpTemp).then((res) => {
if (res.code == 200) {
this.routeType=null;
this.$message({ message: res.msg, type: "success" });
this.canRightMet();//去消右侧显示
this.$refs.pleft.getlineList(this.$store.state.mapdata.droneBoxId); //刷新左侧从tree
}
});
}
}
downloadLoadingInstance.close();
} else { this.$message({ message: "拍照点不能超过1000个点也不能等于0个点", type: "info" }); }
},
/**
@method 建图
@params id(获取左侧列表id 编辑)
* **/
getJtEditDataMet(id) {
if (typeof L != "undefined") {
let downloadLoadingInstance = Loading.service({ text: "航线数据加载中...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
this.canRightMet();
this.removeMarkerFun();//每次编辑移除开始和结束点
this.createInitMarker();
this.jtEditFlagId = id;
getInfoApi({ id: id }).then((res) => {
if (res.code == 200) {
this.jthpShow = true;//隐藏建图航拍
this.flySpeed = res.data.flySpeed;
if( res.data.visibleLightFocal==null){
this.visibleLightFocal =2.3;
}else{
this.visibleLightFocal = res.data.visibleLightFocal;
}
this.spaceInpValue = res.data.hangerRouteAerialPhotography.flightAltitude;//高度
this.stepRotateValue = res.data.hangerRouteAerialPhotography.mainRouteAngle;//角度
this.cameraValue = res.data.hangerRouteAerialPhotography.cameraId;//相机id
this.courseOverlapRate = res.data.hangerRouteAerialPhotography.courseOverlapRate;//航向重叠率
this.lateralOverlapRate = res.data.hangerRouteAerialPhotography.lateralOverlapRate;//旁向重叠率
this.jthpInputName = res.data.name;
this.jtids = res.data.hangerRouteAerialPhotography.id;
//外面矩形的点
var tempJtpolygon = res.data.hangerRouteAerialPhotography.polygonLocationList;
var editJtpolygon = [];
for (var i = 0; i < tempJtpolygon.length; i++) {
editJtpolygon.push({ lat: tempJtpolygon[i].latitude, lng: tempJtpolygon[i].longitude, })
}
this.calculatePolygonArea(editJtpolygon);
//里面点
var editjtpolyLine = JSON.parse(res.data.hangerRouteAerialPhotography.jtPolyLine);
//赋值重现
jtpolygon.latlngs = editJtpolygon;
Jtpolyline.latLngs = editjtpolyLine;
jtpolygon.layer.setLatLngs(editJtpolygon);
Jtpolyline.layer.setLatLngs(editjtpolyLine);
// 让地图适配当前的线段
// map.fitBounds(Jtpolyline.layer.getBounds());
//自定义图标
for (var i = 0; i < jtpolygon.latlngs.length; i++) {
this.setRedBluePointFun(jtpolygon.latlngs[i].lat, jtpolygon.latlngs[i].lng, "/img/白点.png", 2);
}
// console.log("里面点",editjtpolyLine);
// console.log("外面点",editJtpolygon);
this.renderPolyline();
downloadLoadingInstance.close();
} else {
downloadLoadingInstance.close();
}
});
}
},
//移除开始点和结束点
removeMarkerFun() {
if (groupLayer != null) {
groupLayer.remove();
}
if (groupLayer5 != null) {
groupLayer5.remove();
}
},
//设置开始点和结束点
setMarker(lat, lng, img) {
var myIcon = L.icon({ iconUrl: img, iconSize: [13, 13], className: "bigmarker" });
marker3 = L.marker([lat, lng], { icon: myIcon })
this.markerArr.push(marker3);
// console.log("设置开始点和结束点",this.markerArr);
groupLayer = L.featureGroup(this.markerArr).on("click", function () { }).addTo(map);
},
/**@method 获取两个经纬度点的距离
* @param {Object} p1,p2 - 两个经纬度点
* @return {Number} 单位 米
*/
distance(p1, p2) {
return L.latLng(p1.lat, p1.lng).distanceTo(L.latLng(p2.lat, p2.lng));
},
latlng2Px(latlng) {
return map.latLngToLayerPoint(L.latLng(latlng.lat, latlng.lng));
},
px2Latlng(px) {
return map.layerPointToLatLng(L.point(px[0], px[1]));
},
calcScale() {
var a = this.calcArea(jtpolygon.layer.getLatLngs()[0]);
var b = this.calcLineArea(
Jtpolyline.layer.getLatLngs(),
parseFloat(this.spaceInpValue) || 5
);
// console.log("面积:", a);
// console.log("线面积:", b);
return a / b;
},
calcArea(latlngs) {
var S = 0;
for (var i = 0; i < latlngs.length; i++) {
S +=
this.X(latlngs[i]) * this.Y(latlngs[this.si(i + 1, latlngs.length)]) -
this.Y(latlngs[i]) * this.X(latlngs[this.si(i + 1, latlngs.length)]);
}
// console.log("calcArea",S);
return Math.abs(S) / 2;
},
X(latlng) {
return latlng.lng * this.lng2m(latlng);
},
Y(latlng) {
return latlng.lat * this.lat2m(latlng);
},
calcLineArea(latlngs, space) {
var S = 0;
for (var i = 0; i < latlngs.length; i += 2) {
var j = this.si(i + 1, latlngs.length);
S += this.distance(latlngs[i], latlngs[j]);
}
return S * space * 2;
},
lat2m(latlng) {
return this.distance(latlng, {
lat: latlng.lat + 1,
lng: latlng.lng,
});
},
lng2m(latlng) {
return this.distance(latlng, {
lat: latlng.lat,
lng: latlng.lng + 1,
});
},
si(i, l) {
if (i > l - 1) {
return i - l;
}
if (i < 0) {
return l + i;
}
return i;
},
//----------------------------建图航拍 ---end------------------------------------
/** ---------------------------普通模式start----------------------------------------------**/
//批量设置高度
setPointHeightFun() {
let that = this;
this.$modal.confirm('批量设置高度以0点为标准').then(function () { }).then(() => {
if (that.chmapAarr.length > 0) {
for (var i = 0; i < that.chmapAarr.length; i++) {
that.chmapAarr[i].height = that.chmapAarr[0].height;
}
}
}).catch(() => { });
},
//删除编辑点
DeeditPointArrs() { this.editPointArrs = [] },
//批量删除点
pdeletePointFun() {
let that = this;
this.$modal.confirm('是否批量删除点？').then(function () { }).then(() => {
var mh = Math.round(Math.random() * 9999999000);
that.flagType = "edit" + mh;
that.latlngs = [];
that.markerArr = [];
that.tempMarkerFlag = 0;
that.jtEditFlagId = null; //新增编辑去null
this.blockArrInit = [];
that.$refs.plright.resetFun(); //重置分页
that.chmapAarr = [];
polyline.setLatLngs([]);
if (marker2 != null) { marker2.remove(); }
if (groupLayer == null) { } else { groupLayer.remove(); }
}).catch(() => { });
},
setHiddenFun() { this.leftShowAll = false; this.$message({ message: "机场列表为空,请先建立机场", type: "info" }); },
setHiddenFun2() {
this.leftShowAll = true;
},
//移除右组件单个点和线
removePointFun(pointchild) {
if (pointchild == 0) {
this.markerArr = [];
this.latlngs = [];
this.chmapAarr = [];
groupLayer.remove();
groupLayer = L.featureGroup(this.markerArr).on("click", function () { }).addTo(map);
} else {
var glayer = groupLayer.getLayers();
groupLayer.removeLayer(glayer[glayer.length - 1])
this.chmapAarr.splice(this.chmapAarr.indexOf(pointchild), 1);
this.latlngs.splice(this.latlngs.indexOf(pointchild), 1);
this.markerArr.splice(this.markerArr.indexOf(pointchild), 1);
polyline.setLatLngs(this.latlngs);
}
},
//拖动改变坐标和线
dragPointLineFun() {
var that = this;
marker.on('dragend', function (e) {
that.latlngs = [];
var glayer = groupLayer.getLayers();
for (var i = 0; i < glayer.length; i++) {
that.latlngs.push([glayer[i]._latlng.lat, glayer[i]._latlng.lng]);
that.chmapAarr[i].latitudeGcj02 = glayer[i]._latlng.lat;
that.chmapAarr[i].latitudeWgs84 = glayer[i]._latlng.lat;
that.chmapAarr[i].longitudeGcj02 = glayer[i]._latlng.lng;
that.chmapAarr[i].longitudeWgs84 = glayer[i]._latlng.lng;
}
polyline.setLatLngs(that.latlngs);
});
},
//鼠标点击地图监听
bigemapMouseListener() {
let that = this;
map.on("click", function (e) {
if (that.rightShow) {
//线段的坐标点
that.latlngs.push([e.latlng.lat, e.latlng.lng]);
polyline.setLatLngs(that.latlngs);
var markerContent = '' + '<div class="custom-content-marker">' + '<span>' + (that.latlngs.length - 1) + ' </span>' + '</div>';
var myIcon = L.divIcon({ iconSize: [16, 16], iconAnchor: [10, 11], html: markerContent, className: 'my-div-icon' });
marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: myIcon, draggable: true }).addTo(map);
//通过图层去管理地图添加覆盖物
that.markerArr.push(marker);
// that.markerArr.push(polyline);
groupLayer = L.featureGroup(that.markerArr).on("click", function () { }).addTo(map);
var arr = [];
that.tempArr.push(e.latlng.lat + "," + e.latlng.lng);
that.$store.commit("SET_MAPDATA", that.tempArr);
that.chmapAarr.push({
pointflag: that.latlngs.length - 1, id: "", pointNumber: that.latlngs.length - 1, height: 20,
longitudeGcj02: e.latlng.lng, latitudeGcj02: e.latlng.lat,
longitudeWgs84: e.latlng.lng, latitudeWgs84: e.latlng.lat,
actionsList: [],
}); //赋值传给子组件
arr.push(e.latlng.lng, e.latlng.lat);
//为了每次初始化打点都有拍照
that.blockArrInit.push({
index: that.chmapAarr.length - 1,
max: null,
min: null,
name: "开始拍照",
param: 0,
pointflag: that.chmapAarr.length - 1,
show: false,
type: "1",
unit: null,
/** 焦距 type=5 */
focalLength: null,
/** 俯仰角 type=3 */
pitchAngle: null,
/** 偏航角 type=2 */
yawAngle: null,
/** 横滚轴角 type=4 */
rollerShaft:null,
sort:20
})
}
if (that.jthpShow == false) {
that.dragPointLineFun();
}
});
},
//地图点还原编辑
editPointMet() {
/** 初始化打点图层 */
this.latlngs = [];
this.markerArr = [];
this.removeMarkerFun();//建图
var that = this;
// var markerContent = "";
that.editPointArrs = [];
that.chmapAarr = [];
var arr = [];
var hrpList = that.editData.hangerRoutePointList;
for (var i = 0; i < hrpList.length; i++) {
if (hrpList[i].actionsList == null) {
} else {
for (var j = 0; j < hrpList[i].actionsList.length; j++) {
for (var z = 0; z < that.selectActionList.length; z++) {
if (hrpList[i].actionsList[j].type == parseInt(that.selectActionList[z].dictValue) ) {
//查字典表匹配 动作名称
if ( that.selectActionList[z].dictValue == "1" ) {
that.editPointArrs.push({
pointflag: i,
index: i * 100,
name: that.selectActionList[z].dictLabel,
show: false, type: hrpList[i].actionsList[j].type,
param: parseInt(hrpList[i].actionsList[j].param),
min: hrpList[i].actionsList[j].min,
max: hrpList[i].actionsList[j].max,
unit: hrpList[i].actionsList[j].unit,
});
} else {
that.editPointArrs.push({
pointflag: i, index: i * 100, name: that.selectActionList[z].dictLabel, show: true,
type: hrpList[i].actionsList[j].type,
param: parseInt(hrpList[i].actionsList[j].param),
min: hrpList[i].actionsList[j].min,
max: hrpList[i].actionsList[j].max,
unit: hrpList[i].actionsList[j].unit,
});
}
}
}
}
}
that.chmapAarr.push({
pointflag: i, id: "", pointNumber: i, height: hrpList[i].height,
longitudeGcj02: hrpList[i].longitudeGcj02,
latitudeGcj02: hrpList[i].latitudeGcj02,
longitudeWgs84: hrpList[i].longitudeWgs84,
latitudeWgs84: hrpList[i].latitudeWgs84,
actionsList: hrpList[i].actionsList,
}); //赋值传给子组件
// 点标记显示内容，HTML要素字符串
arr.push(hrpList[i].longitudeWgs84, hrpList[i].latitudeWgs84);
//重现地图
that.latlngs.push([
hrpList[i].latitudeWgs84,
hrpList[i].longitudeWgs84,
]);
polyline.setLatLngs(that.latlngs);
// 让地图适配当前的线段
// map.fitBounds(polyline.getBounds());
var markerContent = '' + '<div class="custom-content-marker">' + '<span>'+(that.latlngs.length - 1)+' </span>' + '</div>';
var myIcon = L.divIcon({
iconSize: [21, 21],
iconAnchor: [10, 11],
html:markerContent,
className: 'my-div-icon' });
marker = L.marker([hrpList[i].latitudeWgs84, hrpList[i].longitudeWgs84], { icon: myIcon,draggable:true }).addTo(map);
//通过图层去管理地图添加覆盖物
that.markerArr.push(marker);
// that.markerArr.push(polyline);
groupLayer = L.featureGroup(that.markerArr).on("click", function () { }).addTo(map);
if( that.jthpShow==false){
that.dragPointLineFun();
}
}
},
//普通模式 编辑详情
getEditDataMet(item) {
if(typeof L!="undefined"){
let downloadLoadingInstance = Loading.service({ text: "航线数据加载中...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
this.removeMarkerFun();//移除建图航拍的开始和结束图标
this.createInitMarker();
getInfoApi({ id: item.id }).then((res) => {
if (res.code == 200) {
this.rightShow = true;
this.$store.commit("SET_FTPOBJ", res.data);
if(this.jthpShow){
this.renderPolyline();
}
this.jthpShow=false;//隐藏建图航拍
this.editnameidobj.editname = res.data.name;
this.editnameidobj.id = res.data.id;
if(res.data.fileInfoList.length>0){
this.editnameidobj.downFildId = res.data.fileInfoList[0].id;
this.editnameidobj.downFildName = res.data.fileInfoList[0].name;
}
this.editData = res.data;
var mh = Math.round(Math.random() * 9999999000);
this.flagType = "edit" + mh;
this.editPointMet();
downloadLoadingInstance.close();
}
});
}
},
//取消右侧
canRightMet() {
//普通模式---点击新增去除所有地图覆盖物和右侧显示
this.blockArrInit=[];
this.chmapAarr=[];
this.rightShow = false;
this.flagType = "";
this.latlngs = [];
this.markerArr = [];
this.tempMarkerFlag=0;
this.jtEditFlagId=null; //新增编辑去null
this.$refs.plright.resetFun(); //重置分页
polyline.setLatLngs([]);
if(marker2!=null){
marker2.remove();
}
if (groupLayer == null) {
} else {
groupLayer.remove();
}
//去掉建图航拍所有数据和显示
if(this.jthpShow){
this.canJthpRightFun();
this.jtids=null;
this.stepRotateValue=360;
this.spaceInpValue=20;
this.jthpInputName="";
this.jthpArea=0;
this.jthpPoint=0;
this.estimatePoint=0;
this.courseOverlapRate=10;
this.routeLength=0;
this.tempMarkerFlag=0;
this.marker5List=[];//清空蓝白点
}
},
//新增右侧树
getRgihtViewMet() {
if(typeof L!="undefined"){
this.editnameidobj.editname = "";
this.editnameidobj.id = "";
this.flagType = "";
// map.clearMap();
this.rightShow = true;
this.chmapAarr = [];
this.blockArrInit=[];
this.lineArr = [];
//第二次新增的时候重置右侧 pointvalue
this.pointValueIndex = Math.floor(Math.random() * 10);
this.tempArr = [];
/**初始化打点图层 */
this.latlngs = [];
this.markerArr = [];
if (groupLayer == null) {
} else {
groupLayer.remove();
}
}
var myIcon = L.icon({ iconUrl: '/img/机库.png', iconSize: [30, 30], className:"bigmarker"});
//添加中心的marker
marker2 = L.marker([this.$store.state.flydata.flyObj.latitudeWgs84,this.$store.state.flydata.flyObj.longitudeWgs84],{icon:myIcon}).addTo(map);
},
//子组件刷新左侧树
refrshLeftMet(droneBoxId) {
this.$refs.pleft.getlineList(droneBoxId);
this.chmapAarr = [];
this.rightShow = false;
},
//字典表
dictTypeParmAllComm() {
dictTypeParmAll("route_point_action").then((res) => {
if (res.code == 200) {
this.selectActionList = res.data;
}
});
},
//相机选择
cameraFun(val) {
// console.log(val);
if (this.cameraList.length > 0) {
for (var i = 0; i < this.cameraList.length; i++) {
if (this.cameraList[i].id == val) {
this.longFrame = this.cameraList[i].longFrame;//长画幅
this.longFrameFocus = this.cameraList[i].longFrameFocus;//长画幅焦距
this.shortFrame = this.cameraList[i].shortFrame;//短画幅
this.shortFrameFocus = this.cameraList[i].shortFrameFocus;//短画幅焦距
}
}
}
}
},
};
</script >
<style scoped>
input[type=range] {
height: 5px;
border-radius: 10px; /*将轨道设为圆角的*/
}
::v-deep .el-input__inner{
background: rgba(255, 255, 255, 0.1);
color: #00fff7;
}
::v-deep .el-input--medium .el-input__inner{
height: 33px !important;
width: 200px;
background: rgba(255, 255, 255, 0.1);
color: #00fff7;
}
.my-div-icon2 {
width: 20px;
height: 20px;
background-color: #ff6600;
border-radius: 20px;
}
.custom-content-marker {
position: relative;
width: 20px;
height: 20px;
background-color: #ff6600;
border-radius: 20px;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.custom-content-marker span {
color: #ffffff;
font-size: 12px;
font-weight: bold;
}
</style>
<style scoped lang="scss">
@import "@/assets/styles/plan.scss";
</style>
