|
|
@@ -12,469 +12,275 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="imgCon">
|
|
|
+ <div class="imgCon" v-for="uavit in uavlsit" :key="uavit.id">
|
|
|
<div class="echartTitle">
|
|
|
- <div class="block-title">巡查时间:2024/11/27</div>
|
|
|
- <!-- <span @click="ceshi">测试</span> -->
|
|
|
- 现场图片
|
|
|
+ <div class="block-title">
|
|
|
+ <span class="time">巡查时间:{{ uavit.batch_time }}</span>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="checked2"
|
|
|
+ @change="(val) => addPath(val, uavit)"
|
|
|
+ ></el-checkbox
|
|
|
+ >架次路线
|
|
|
+ <i class="el-icon-s-promotion" @click="startPolylineFly(uavit)"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div>现场视频:</div>
|
|
|
<div class="imgList">
|
|
|
- <div
|
|
|
+ <video
|
|
|
+ WE
|
|
|
class="imgDiv"
|
|
|
- v-for="(item, i) in monitorList"
|
|
|
- :key="i"
|
|
|
- @click="clickImg(i)"
|
|
|
- @mouseenter="handleMouseEnter(item, i)"
|
|
|
- @mouseleave="handleMouseLeave(item, i)"
|
|
|
+ loop
|
|
|
+ crossorigin
|
|
|
+ controls
|
|
|
+ v-for="vitem in uavit.videoDtoList"
|
|
|
+ :key="vitem.id"
|
|
|
+ @click.stop="clickImg(vitem)"
|
|
|
>
|
|
|
<span>{{ i + 1 }}</span>
|
|
|
- <img :src="item.imgUrl" />
|
|
|
- <p>{{ item.info }}</p>
|
|
|
+ <source :src="geturl(vitem.video_path)" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <div>现场图片:</div>
|
|
|
+ <div class="imgList">
|
|
|
+ <div class="imgDiv" v-for="(item, i) in uavit.flightDtoList" :key="i">
|
|
|
+ <span>{{ i + 1 }}</span>
|
|
|
+ <el-checkbox
|
|
|
+ class="checkimg"
|
|
|
+ v-model="item.checked"
|
|
|
+ @change="(val) => checkchange(val, item)"
|
|
|
+ ></el-checkbox>
|
|
|
+ <img :src="geturl(item.photo_path)" @click.prevent="clickImg(item)" />
|
|
|
+ <p>{{ item.batch_time.split(".")[0] }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="imgCon">
|
|
|
- <div class="echartTitle">
|
|
|
- <div class="block-title">巡查时间:2024/11/20</div>
|
|
|
+
|
|
|
+ <div class="sm-panel bigimgdiv" v-drag v-show="bigimg">
|
|
|
+ <div class="sm-panel-header">
|
|
|
+ <span>图片详情</span>
|
|
|
+ <i class="el-icon-close" @click="bigimg = false"></i>
|
|
|
</div>
|
|
|
+ <video WE class="bigvideo" autoplay loop crossorigin controls>
|
|
|
+ <source src="@/assets/video.mp4" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ <el-carousel
|
|
|
+ trigger="click"
|
|
|
+ indicator-position="outside"
|
|
|
+ :autoplay="false"
|
|
|
+ :initial-index="imgdata"
|
|
|
+ >
|
|
|
+ <el-carousel-item v-for="(item, i) in imgList" :key="i">
|
|
|
+ <div class="imgi">{{ `${i + 1} / ${imgList.length}` }}</div>
|
|
|
+ <img :src="item.imgUrl" />
|
|
|
+ <div class="imgInfo">{{ item.bz }}</div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
|
|
|
+import { getgdUav } from "@/api/ghss/gdbh.js";
|
|
|
+
|
|
|
export default {
|
|
|
- props: {
|
|
|
- detailObj: {
|
|
|
- type: Object,
|
|
|
- },
|
|
|
- },
|
|
|
+ props: {},
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
activeIndex: 0,
|
|
|
checkList: ["近一个月", "近三个月", "近半年", "自定义"],
|
|
|
- monitorList: [
|
|
|
- {
|
|
|
- id: "s1",
|
|
|
- imgUrl:
|
|
|
- "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
|
|
|
- info: "2024-09-27 15:04",
|
|
|
- name: "钱复式",
|
|
|
- lat: "168.18",
|
|
|
- lon: "46.33",
|
|
|
- psfw: "45°",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "s2",
|
|
|
- imgUrl:
|
|
|
- "https://img2.baidu.com/it/u=3692233586,2896402884&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=427",
|
|
|
- info: "2024-09-27 15:04",
|
|
|
- name: "梅执礼",
|
|
|
- lat: "168.18",
|
|
|
- lon: "46.33",
|
|
|
- psfw: "45°",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "s3",
|
|
|
- imgUrl:
|
|
|
- "https://img2.baidu.com/it/u=882190421,2711411099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
|
|
|
- info: "2024-09-27 15:04",
|
|
|
- name: "陈贵志",
|
|
|
- lat: "168.18",
|
|
|
- lon: "46.33",
|
|
|
- psfw: "45°",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "s4",
|
|
|
- imgUrl:
|
|
|
- "http://img2.baidu.com/it/u=516755055,1384417278&fm=253&app=138&f=JPEG?w=800&h=1067",
|
|
|
- info: "2024-09-27 15:04",
|
|
|
- name: "权超英",
|
|
|
- lat: "168.18",
|
|
|
- lon: "46.33",
|
|
|
- psfw: "45°",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "s5",
|
|
|
- imgUrl:
|
|
|
- "http://img0.baidu.com/it/u=1366170349,307387023&fm=253&app=138&f=JPEG?w=800&h=1067",
|
|
|
- info: "2024-09-27 15:04",
|
|
|
- name: "王XX",
|
|
|
- lat: "168.18",
|
|
|
- lon: "46.33",
|
|
|
- psfw: "45°",
|
|
|
- },
|
|
|
- ],
|
|
|
- primitive: null,
|
|
|
- selectId: null,
|
|
|
- primitivesArray: [],
|
|
|
+ uavlsit: [],
|
|
|
+ bigimg: false,
|
|
|
+ imgdata: 0,
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
- // this.aaa();
|
|
|
- // this.colorChange();
|
|
|
- // this.ccc();
|
|
|
- // this.onClickButton();
|
|
|
- // this.ddd();
|
|
|
+ this.getData();
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- // handleMouseEnter(a, b) {
|
|
|
- // console.log("鼠标移入", a, b);
|
|
|
- // this.ceshi('111')
|
|
|
- // },
|
|
|
- // handleMouseLeave(a, b) {
|
|
|
- // console.log("鼠标移出");
|
|
|
- // this.ceshi()
|
|
|
- // },
|
|
|
- changeData(name, updata) {
|
|
|
- this[name] = updata;
|
|
|
- },
|
|
|
- // clickImg(val) {
|
|
|
- // this.$emit("updateParent", "emitImgList", this.monitorList);
|
|
|
- // this.$emit("updateParent", "emitImgIndex", val);
|
|
|
- // },
|
|
|
- aaa() {
|
|
|
- var redLine = viewer.entities.add({
|
|
|
- // 贴在地面上 两点之间的直线距离
|
|
|
- name: "line",
|
|
|
- // polyline: {
|
|
|
- // positions: Cesium.Cartesian3.fromDegreesArray([
|
|
|
- // // o.inx,
|
|
|
- // // o.iny,
|
|
|
- // // o.outx,
|
|
|
- // // o.outy,
|
|
|
- // 109.5077, 18.309, 109.5111, 18.3093,
|
|
|
- // ]),
|
|
|
- // width: 20,
|
|
|
- // // 不带箭头的线
|
|
|
- // // material: Cesium.Color.RED,
|
|
|
- // // 是否紧贴地面
|
|
|
- // clampToGround: true,
|
|
|
- // // 带箭头的线
|
|
|
- // material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
|
|
|
- // },
|
|
|
-
|
|
|
- polygon: {
|
|
|
- hierarchy: Cesium.Cartesian3.fromDegreesArray([
|
|
|
- // o.inx,
|
|
|
- // o.iny,
|
|
|
- // o.outx,
|
|
|
- // o.outy,
|
|
|
- 109.5077, 18.309, 109.5111, 18.3093,
|
|
|
- ]),
|
|
|
- material: new Cesium.ColorMaterialProperty(
|
|
|
- Cesium.Color.fromCssColorString("rgba(255, 255, 255, 1)")
|
|
|
- ),
|
|
|
- width: 15,
|
|
|
- },
|
|
|
- });
|
|
|
+ geturl(url) {
|
|
|
+ return window.axiosURI + "/file/upload/attachment" + url;
|
|
|
},
|
|
|
- ccc() {
|
|
|
- // // var viewer = new Cesium.Viewer("cesiumContainer");
|
|
|
- // // var scene = viewer.scene;
|
|
|
- // // 创建BillboardCollection来存储图片或图标
|
|
|
- // var billboards = viewer.scene.primitives.add(
|
|
|
- // new Cesium.BillboardCollection()
|
|
|
- // );
|
|
|
- // // 添加一个带偏移量和旋转的图标
|
|
|
- // var billboard = billboards.add({
|
|
|
- // image:
|
|
|
- // "https://img2.baidu.com/it/u=2726480512,4270878021&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193", // 替换为图片的路径
|
|
|
- // position: Cesium.Cartesian3.fromDegrees(109.5077, 18.309), // 设置图片的位置,采用经纬度
|
|
|
- // width: 64, // 设置图片的宽度
|
|
|
- // height: 64, // 设置图片的高度
|
|
|
- // rotation: Cesium.Math.toRadians(45), // 设置初始旋转角度(单位弧度)
|
|
|
- // // clampToGround: true,
|
|
|
- // pixelOffset: new Cesium.Cartesian2(30, -40), // 设置偏移量,X轴偏移30像素,Y轴偏移-40像素
|
|
|
- // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平锚点
|
|
|
- // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直锚点
|
|
|
- // });
|
|
|
-
|
|
|
- // 创建一个Cesium视图
|
|
|
- // var viewer = new Cesium.Viewer("cesiumContainer");
|
|
|
-
|
|
|
- // 获取场景对象
|
|
|
- var scene = viewer.scene;
|
|
|
-
|
|
|
- // 创建一个BillboardCollection,用于存放所有Billboard对象
|
|
|
- var billboards = scene.primitives.add(new Cesium.BillboardCollection());
|
|
|
-
|
|
|
- // 定义图片的URL
|
|
|
- var imageUrl = "https://example.com/your-image.png";
|
|
|
-
|
|
|
- // 设置图片的初始位置(经纬度)
|
|
|
- var longitude = -75.0;
|
|
|
- var latitude = 40.0;
|
|
|
- var height = 1000; // 距离地面1000米
|
|
|
-
|
|
|
- // 创建Billboard对象
|
|
|
- var billboard = billboards.add({
|
|
|
- image: imageUrl, // 设置图片
|
|
|
- position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), // 设置位置
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴地
|
|
|
- scale: 1.0, // 图片的缩放比例
|
|
|
- rotation: Cesium.Math.toRadians(45), // 旋转角度,单位是弧度
|
|
|
- pixelOffset: new Cesium.Cartesian2(50, 0), // 图片的偏移量,单位是像素(x, y)
|
|
|
- alignedAxis: Cesium.Cartesian3.ZERO, // 不需要对齐轴
|
|
|
+ getData(name, updata) {
|
|
|
+ this[name] = updata;
|
|
|
+ getgdUav({}).then((res) => {
|
|
|
+ this.uavlsit = res.data;
|
|
|
});
|
|
|
},
|
|
|
- //点击事件
|
|
|
- onClickButton(e, val) {
|
|
|
- // 每次进来清空,然后再重新加载图片
|
|
|
- this.primitivesArray.forEach((primitive) => {
|
|
|
- viewer.scene.primitives.remove(primitive);
|
|
|
- });
|
|
|
- this.primitivesArray = []; // 清空数组,
|
|
|
-
|
|
|
- //传的图片
|
|
|
- let image =
|
|
|
- "https://img2.baidu.com/it/u=2726480512,4270878021&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193";
|
|
|
- //传的图片 、经纬度、范围
|
|
|
- this.PosButtonClick(image, 109.5077, 18.309, 24);
|
|
|
+ checkchange(val, item) {
|
|
|
+ console.log(val, item, "s0xskcsdcmd");
|
|
|
+ if (val) this.getEntities(item);
|
|
|
+ else removeGeoJSON("Image Overlay");
|
|
|
},
|
|
|
-
|
|
|
- //加载图片
|
|
|
- PosButtonClick(imageurl, lon, lat, round) {
|
|
|
- var point = {
|
|
|
- longitude: lon,
|
|
|
- latitude: lat,
|
|
|
- height: -0.7728200032702337,
|
|
|
- };
|
|
|
- var rvalue = round; //范围半径
|
|
|
-
|
|
|
- // 计算边界
|
|
|
- var west =
|
|
|
- point.longitude -
|
|
|
- Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
|
|
|
- var south =
|
|
|
- point.latitude -
|
|
|
- Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
|
|
|
- var east =
|
|
|
- point.longitude +
|
|
|
- Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
|
|
|
- var north =
|
|
|
- point.latitude +
|
|
|
- Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
|
|
|
-
|
|
|
- var bounds = Cesium.Rectangle.fromDegrees(west, south, east, north);
|
|
|
-
|
|
|
- var bound = new Cesium.Rectangle(west, south, east, north);
|
|
|
-
|
|
|
- var heatPrimitive = viewer.scene.primitives.add(
|
|
|
- new Cesium.GroundPrimitive({
|
|
|
- geometryInstances: new Cesium.GeometryInstance({
|
|
|
- geometry: new Cesium.RectangleGeometry({
|
|
|
- rectangle: Cesium.Rectangle.fromDegrees(
|
|
|
- bound.west,
|
|
|
- bound.south,
|
|
|
- bound.east,
|
|
|
- bound.north
|
|
|
- ),
|
|
|
- vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|
|
- width: 24, // 设置图片的宽度
|
|
|
- height: 24, // 设置图片的高度
|
|
|
- rotation: Cesium.Math.toRadians(45), // 设置初始旋转角度(单位弧度)
|
|
|
- // clampToGround: true,
|
|
|
- pixelOffset: new Cesium.Cartesian2(30, -400), // 设置偏移量,X轴偏移30像素,Y轴偏移-40像素
|
|
|
- }),
|
|
|
- }),
|
|
|
- appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|
|
- aboveGround: true,
|
|
|
- material: new Cesium.Material({
|
|
|
- fabric: {
|
|
|
- type: "Image",
|
|
|
- uniforms: {
|
|
|
- image: imageurl,
|
|
|
- },
|
|
|
- },
|
|
|
- }),
|
|
|
- }),
|
|
|
- })
|
|
|
- );
|
|
|
- // 将新创建的GroundPrimitive添加到数组中
|
|
|
- this.primitivesArray.push(heatPrimitive);
|
|
|
+ clickImg(i) {
|
|
|
+ this.bigimg = true;
|
|
|
+ this.imgdata = i;
|
|
|
},
|
|
|
- ddd() {
|
|
|
- // 将经纬度转换为 Cartesian3 坐标,起始点
|
|
|
- var startPosition = Cesium.Cartesian3.fromDegrees(109.5077, 18.309);
|
|
|
- console.log(this.getLonAndLat(109.5077, 18.309, 78, 20), "======");
|
|
|
- //结束点
|
|
|
- var targetPosition = Cesium.Cartesian3.fromDegrees(109.5111, 18.3093);
|
|
|
-
|
|
|
- // 创建一个实体来表示点
|
|
|
- var pointEntity = viewer.entities.add({
|
|
|
- id: "dw" + 1,
|
|
|
- position: startPosition, // 点的位置
|
|
|
- point: {
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置为贴地
|
|
|
- pixelSize: 10, // 点的大小
|
|
|
- color: Cesium.Color.RED, // 点的颜色
|
|
|
- outlineColor: Cesium.Color.BLACK, // 点的轮廓颜色
|
|
|
- outlineWidth: 2, // 点的轮廓宽度
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- // 创建一个实体来放置箭头
|
|
|
- var arrowEntity = viewer.entities.add({
|
|
|
- id: "jt" + 1,
|
|
|
- position: startPosition, // 设置箭头位置
|
|
|
- billboard: {
|
|
|
- // image: "http://192.168.176.1:8001/长箭头.png", // 设置箭头图标
|
|
|
- image: "/static/images/路径@3x-2.png", // 设置箭头图标
|
|
|
- width: 37, // 设置图标宽度
|
|
|
- height: 69, // 设置图标高度
|
|
|
- scale: 0.7, // 设置图标缩放
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置贴地
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- // 计算箭头的方向并更新
|
|
|
- function updateArrowOrientation() {
|
|
|
- // 计算起点到目标点的方向向量
|
|
|
- var direction = Cesium.Cartesian3.subtract(
|
|
|
- targetPosition,
|
|
|
- startPosition,
|
|
|
- new Cesium.Cartesian3()
|
|
|
- );
|
|
|
-
|
|
|
- // 确保方向向量有效
|
|
|
- if (Cesium.Cartesian3.magnitude(direction) > 0) {
|
|
|
- // 计算箭头朝向目标的方向角(使用 JavaScript 原生 Math.atan2)
|
|
|
- var heading = Cesium.Math.toDegrees(
|
|
|
- Math.atan2(direction.y, direction.x)
|
|
|
- );
|
|
|
-
|
|
|
- // 固定方向,使用 rotation 设置固定旋转
|
|
|
- arrowEntity.billboard.rotation = Cesium.Math.toRadians(heading); // 固定旋转角度,不随地图旋转
|
|
|
- }
|
|
|
+ addPath(chekpath, uavitem) {
|
|
|
+ if (chekpath) {
|
|
|
+ let linegeom = {
|
|
|
+ geometry: {
|
|
|
+ coordinates: [],
|
|
|
+ type: "LineString",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ uavitem.flightDtoList.forEach((item) => {
|
|
|
+ let geo = `POINT (${item.longitude} ${item.latitude} ${item.height})`;
|
|
|
+ // loadGeoJSON(geo, "", { point: "" }, (data) => {
|
|
|
+ // data.name = uavitem.id;
|
|
|
+ // this.addImg(data, item);
|
|
|
+ // });
|
|
|
+ linegeom.geometry.coordinates.push([
|
|
|
+ item.longitude,
|
|
|
+ item.latitude,
|
|
|
+ item.height,
|
|
|
+ ]);
|
|
|
+ });
|
|
|
+ loadGeoJSON(linegeom, "#ff0000", { isfly: true }, (data) => {
|
|
|
+ data.name = uavitem.id;
|
|
|
+ // layerSources[item.id] = data;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ removeGeoJSON(uavitem.id);
|
|
|
}
|
|
|
-
|
|
|
- // 每次视图更新时,重新计算箭头方向
|
|
|
- viewer.scene.preRender.addEventListener(function () {
|
|
|
- updateArrowOrientation();
|
|
|
+ },
|
|
|
+ getEntities(item) {
|
|
|
+ let geo = `POINT (${item.longitude} ${item.latitude})`;
|
|
|
+ loadGeoJSON(geo, "#ff0000", { isfly: true, point: "" }, (data) => {
|
|
|
+ data.name = "Image";
|
|
|
+ data.entities.add(this.addImg(data, item));
|
|
|
+ // layerSources[item.id] = data;
|
|
|
});
|
|
|
-
|
|
|
- // 聚焦视角到箭头位置
|
|
|
- viewer.zoomTo(arrowEntity);
|
|
|
+ // this.idArr.push(id + type);
|
|
|
},
|
|
|
- ceshi(item) {
|
|
|
- // console.log(item,"?????");
|
|
|
- let aaa = viewer.entities.getById("jt1");
|
|
|
-
|
|
|
- if (item) {
|
|
|
- aaa.billboard.image = "/static/images/路径@3x.png";
|
|
|
- } else {
|
|
|
- aaa.billboard.image = "/static/images/路径@3x-2.png";
|
|
|
- }
|
|
|
+ addImg(data, item) {
|
|
|
+ let image = imagethis.geturl(item.photo_path);
|
|
|
+ // 创建Cesium的ImageMaterialProperty
|
|
|
+ const imageMaterial = new Cesium.ImageMaterialProperty({
|
|
|
+ image,
|
|
|
+ repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复,这里设置为不重复
|
|
|
+ transparent: true, // 如果图像有透明通道,设置为true
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ name: "Image",
|
|
|
+ id: item.id,
|
|
|
+ rectangle: {
|
|
|
+ coordinates: Cesium.Rectangle.fromDegrees(
|
|
|
+ item.pngenvelope[0],
|
|
|
+ item.pngenvelope[1],
|
|
|
+ item.pngenvelope[2],
|
|
|
+ item.pngenvelope[3]
|
|
|
+ ), // 设置矩形的经纬度范围
|
|
|
+ material: imageMaterial,
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
-
|
|
|
/**
|
|
|
- * 根据一个经纬度及距离角度,算出另外一个经纬度
|
|
|
- * @param {*} lng 经度 113.3960698
|
|
|
- * @param {*} lat 纬度 22.941386
|
|
|
- * @param {*} brng 方位角 45 ---- 正北方:000°或360° 正东方:090° 正南方:180° 正西方:270°
|
|
|
- * @param {*} dist 90000距离(米)
|
|
|
- * 1、角度转换为弧度公式:弧度=角度×(π ÷度180 )
|
|
|
- * 2、弧度转换为角度公式: 角度=弧度×(180÷π)
|
|
|
+ * 开始沿线飞行
|
|
|
*/
|
|
|
- getLonAndLat(lng, lat, brng, dist) {
|
|
|
- //大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
|
|
|
- var a = 6378137;
|
|
|
- var b = 6356752.3142;
|
|
|
- var f = 1 / 298.257223563;
|
|
|
-
|
|
|
- var lon1 = lng * 1;
|
|
|
- var lat1 = lat * 1;
|
|
|
- var s = dist;
|
|
|
- var alpha1 = brng * (Math.PI / 180); //mapNumberUtil.rad(brng);
|
|
|
- var sinAlpha1 = Math.sin(alpha1);
|
|
|
- var cosAlpha1 = Math.cos(alpha1);
|
|
|
-
|
|
|
- //var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1));
|
|
|
- var tanU1 = (1 - f) * Math.tan(lat1 * (Math.PI / 180));
|
|
|
- var cosU1 = 1 / Math.sqrt(1 + tanU1 * tanU1),
|
|
|
- sinU1 = tanU1 * cosU1;
|
|
|
- var sigma1 = Math.atan2(tanU1, cosAlpha1);
|
|
|
- var sinAlpha = cosU1 * sinAlpha1;
|
|
|
- var cosSqAlpha = 1 - sinAlpha * sinAlpha;
|
|
|
- var uSq = (cosSqAlpha * (a * a - b * b)) / (b * b);
|
|
|
- var A =
|
|
|
- 1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
|
|
|
- var B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
|
|
|
-
|
|
|
- var sigma = s / (b * A),
|
|
|
- sigmaP = 2 * Math.PI;
|
|
|
- while (Math.abs(sigma - sigmaP) > 1e-12) {
|
|
|
- var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
|
|
|
- var sinSigma = Math.sin(sigma);
|
|
|
- var cosSigma = Math.cos(sigma);
|
|
|
- var deltaSigma =
|
|
|
- B *
|
|
|
- sinSigma *
|
|
|
- (cos2SigmaM +
|
|
|
- (B / 4) *
|
|
|
- (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
|
|
|
- (B / 6) *
|
|
|
- cos2SigmaM *
|
|
|
- (-3 + 4 * sinSigma * sinSigma) *
|
|
|
- (-3 + 4 * cos2SigmaM * cos2SigmaM)));
|
|
|
- sigmaP = sigma;
|
|
|
- sigma = s / (b * A) + deltaSigma;
|
|
|
- }
|
|
|
-
|
|
|
- var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
|
|
|
- var lat2 = Math.atan2(
|
|
|
- sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
|
|
|
- (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)
|
|
|
- );
|
|
|
- var lambda = Math.atan2(
|
|
|
- sinSigma * sinAlpha1,
|
|
|
- cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1
|
|
|
- );
|
|
|
- var C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
|
|
|
- var L =
|
|
|
- lambda -
|
|
|
- (1 - C) *
|
|
|
- f *
|
|
|
- sinAlpha *
|
|
|
- (sigma +
|
|
|
- C *
|
|
|
- sinSigma *
|
|
|
- (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
|
|
|
-
|
|
|
- var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
|
|
|
-
|
|
|
- var lngLatObj = {
|
|
|
- lng: lon1 + L * (180 / Math.PI),
|
|
|
- lat: lat2 * (180 / Math.PI),
|
|
|
- };
|
|
|
- return lngLatObj;
|
|
|
- },
|
|
|
-
|
|
|
- delatePoi(item) {
|
|
|
- // if (this.arrww.length != 0) {
|
|
|
- // this.arrww.forEach((item) => {
|
|
|
- viewer.entities.removeById(item);
|
|
|
- // });
|
|
|
- // this.arrww = [];
|
|
|
+ startPolylineFly(item) {
|
|
|
+ var that = this;
|
|
|
+ // if (that.lineFylPoints == null || that.lineFylPoints.length == 0) {
|
|
|
+ // that.$message.warning("请绘制飞行路线!");
|
|
|
+ // return;
|
|
|
// }
|
|
|
+ // debugger;
|
|
|
+ var speed = Number(200) / 3.6;
|
|
|
+
|
|
|
+ var xml =
|
|
|
+ '<?xml version="1.0" encoding="UTF-8"?>' +
|
|
|
+ '<SceneRoute xmlns = "https://www.supermap.com/ugc60" >' +
|
|
|
+ '<route name="飞行路线_1" speed="' +
|
|
|
+ speed +
|
|
|
+ '" lineType="0" showroutestop="False" showrouteline="False" altitudefree="False" headingfree="False" tiltfree="False" flycircle="False" alongline="True">' +
|
|
|
+ "<style>" +
|
|
|
+ "<geostyle3d>" +
|
|
|
+ "<linecolor>RGBA(147,112,219,255)</linecolor>" +
|
|
|
+ "<linewidth>2</linewidth>" +
|
|
|
+ "<altitudeMode>Absolute</altitudeMode>" +
|
|
|
+ "<bottomAltitude>0.00</bottomAltitude>" +
|
|
|
+ "</geostyle3d>" +
|
|
|
+ "</style>";
|
|
|
+ uavitem.flightDtoList.forEach((point, index) => {
|
|
|
+ xml +=
|
|
|
+ '<routestop name="Stop+' +
|
|
|
+ (index + 1) +
|
|
|
+ '" speed="0" excluded="False" viewType="camera">' +
|
|
|
+ "<camera>" +
|
|
|
+ "<longitude>" +
|
|
|
+ item.longitude +
|
|
|
+ "</longitude>" +
|
|
|
+ "<latitude>" +
|
|
|
+ item.latitude +
|
|
|
+ "</latitude>" +
|
|
|
+ "<altitude>" +
|
|
|
+ item.height +
|
|
|
+ "</altitude>" +
|
|
|
+ "<heading>0</heading>" +
|
|
|
+ "<tilt>78.531727283418646834</tilt>" +
|
|
|
+ "<altitudeMode>Absolute</altitudeMode>" +
|
|
|
+ "</camera>" +
|
|
|
+ "<style>" +
|
|
|
+ "<geostyle3d>" +
|
|
|
+ "<icon />" +
|
|
|
+ "<markersize>4.8</markersize>" +
|
|
|
+ "<markericonscale>1</markericonscale>" +
|
|
|
+ "<markercolor>RGBA(255,255,255,255)</markercolor>" +
|
|
|
+ "</geostyle3d>" +
|
|
|
+ "</style>" +
|
|
|
+ "<setting>" +
|
|
|
+ "<turnTime>1.5</turnTime>" +
|
|
|
+ "<turnSlowly>False</turnSlowly>" +
|
|
|
+ "<stopPlayMode>StopPause</stopPlayMode>" +
|
|
|
+ "<autoPlay>False</autoPlay>" +
|
|
|
+ "<pauseTime>0</pauseTime>" +
|
|
|
+ "<angularSpeed>1</angularSpeed>" +
|
|
|
+ " </setting>" +
|
|
|
+ "</routestop>";
|
|
|
+ });
|
|
|
+ xml += "</route>";
|
|
|
+ xml += "</SceneRoute >";
|
|
|
+ var routes = new Cesium.RouteCollection(viewer.entities);
|
|
|
+ routes.fromXML(xml);
|
|
|
+ routes.routes[0].isFlyLoop = true;
|
|
|
+ flyManager = new Cesium.FlyManager({ scene, routes });
|
|
|
+
|
|
|
+ //初始化飞行管理
|
|
|
+ // that.flyHOld = that.flyH;
|
|
|
+ //注册站点到达事件
|
|
|
+ flyManager.stopArrived.addEventListener(function (routeStop) {
|
|
|
+ routeStop.waitTime = 1; // 在每个站点处停留1s
|
|
|
+ });
|
|
|
+ flyManager.readyPromise.then(function () {
|
|
|
+ // 飞行路线就绪
|
|
|
+ var currentRoute = flyManager.currentRoute;
|
|
|
+ console.log(currentRoute.totalDuration + "秒");
|
|
|
+ currentRoute.isLineVisible = false;
|
|
|
+ currentRoute.isStopVisible = false;
|
|
|
+ //生成飞行文件中的所有站点列表
|
|
|
+ // var allStops = flyManager.getAllRouteStops();
|
|
|
+ if (that.flySpeed == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ flyManager && flyManager.play();
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
watch: {},
|
|
|
watch: {},
|
|
|
beforeDestroy() {
|
|
|
- this.delatePoi("jt1");
|
|
|
- this.delatePoi("dw1");
|
|
|
+ // this.delatePoi("jt1");
|
|
|
+ // this.delatePoi("dw1");
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.wrjxx{
|
|
|
+.wrjxx {
|
|
|
height: 695px;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
@@ -529,12 +335,18 @@ export default {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
.imgCon {
|
|
|
+ .time {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
.imgList {
|
|
|
width: 100%;
|
|
|
// height: 300px;
|
|
|
- max-height: 400px;
|
|
|
+ max-height: 150px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ margin-bottom:20px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
// background-color: rgba(255, 192, 203, 0.372);
|
|
|
.imgDiv {
|
|
|
width: 126px;
|
|
|
@@ -568,6 +380,12 @@ export default {
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
+ .checkimg {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -577,4 +395,49 @@ export default {
|
|
|
/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
|
|
|
padding: 3px;
|
|
|
}
|
|
|
+.el-checkbox {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.bigdiv {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.bigimgdiv {
|
|
|
+ right: 28%;
|
|
|
+ width: 45%;
|
|
|
+ max-width: 100%;
|
|
|
+ height: 700px;
|
|
|
+
|
|
|
+ /deep/ .el-carousel__container {
|
|
|
+ height: 632px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 632px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // /deep/.el-carousel__arrow {
|
|
|
+ // background-color: rgba(45, 140, 240, 0.4);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /deep/.el-carousel__arrow:hover {
|
|
|
+ // background-color: rgba(45, 140, 240, 1);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /deep/ .el-icon-close:before {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 10px;
|
|
|
+ // right: 10px;
|
|
|
+ // font-size: larger;
|
|
|
+ // font-weight: bold;
|
|
|
+
|
|
|
+ // &:hover {
|
|
|
+ // color: aqua;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+}
|
|
|
+.bigvideo {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
</style>
|