vue大疆建图航拍功能实现

介绍

无人机在规划一块区域的时候，我们需要手动的给予一些参数来影响无人机飞行，对于一块地表，无人机每隔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>() {@Overridepublic void onSuccess(Integer integer) {//获取到焦距值}@Overridepublic 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;//设呈现的真实距离为xdouble 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,//默认最低3jthpShow: 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,//面积的flagjthpPoint:0,//航点数ptLineDistance:0,//普通模式航线总长jtEditFlagId:null,//编辑主表idjtids:null,//编辑建图idtempMarker:[],//开始和结束 建图航拍 点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"});//添加中心的markermarker2 = L.marker([this.$store.state.flydata.flyObj.latitudeWgs84,this.$store.state.flydata.flyObj.longitudeWgs84],{icon:myIcon}).addTo(map);},//进入航线的时候 才创建机库的坐标markercreateInitMarker(){if(typeof  L!="undefined"){var myIcon = L.icon({ iconUrl: '/img/机库.png', iconSize: [30, 30], className:"bigmarker"});//添加中心的markermarker2 = 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}); //-----东大圩---startlet 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);//监听地图点击 增加白色图标点   添加markerif (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点的时候 移除开始和结束图标interpolateOnLinethis.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);//先移除 指定 markervar 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=/svisibleLightFocal: this.visibleLightFocal,name: this.jthpInputName,droneBoxId: this.$store.state.mapdata.droneBoxId, //机场idsource: 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,    //相机idmainRouteAngle: 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;//相机idthis.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; //新增编辑去nullthis.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; //新增编辑去nullthis.$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 = [];//第二次新增的时候重置右侧 pointvaluethis.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"});//添加中心的markermarker2 = 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>