|
|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="imgCon">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">监测类型情况</div>
|
|
|
+ </div>
|
|
|
+ <div class="imgList">
|
|
|
+ <div
|
|
|
+ class="imgDiv"
|
|
|
+ v-for="(item, i) in monitorList"
|
|
|
+ :key="i"
|
|
|
+ @click="clickImg(i)"
|
|
|
+ @mouseenter="handleMouseEnter(item, i)"
|
|
|
+ @mouseleave="handleMouseLeave(item, i)"
|
|
|
+ >
|
|
|
+ <span>{{ i + 1 }}</span>
|
|
|
+ <img :src="item.imagerPath" />
|
|
|
+ <p>{{ item.imagerSj }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import { getJctbhcInfo, getTiffPath } from "@/api/ghss/jctb.js";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ detailObj: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ jcbh: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imgUrl: "",
|
|
|
+ monitorList: [
|
|
|
+ {
|
|
|
+ name: "11swm",
|
|
|
+ imagerPath:
|
|
|
+ "/analyse/全域土地整治/jctb/0/HN4602022023022004080074/1b9a9da4a23d426cab363ed369150b4f.jpg",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ primitive: null,
|
|
|
+ selectId: null,
|
|
|
+ primitivesArray: [],
|
|
|
+ hcObj: null,
|
|
|
+ // jtArr:[],//箭头id数组
|
|
|
+ // dwArr:[],//
|
|
|
+ idArr: [], //id数组
|
|
|
+ handler: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ inputAction() {
|
|
|
+ this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
+ // 鼠标移动事件
|
|
|
+ this.handler.setInputAction(function (movement) {
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ handleMouseEnter(a, b) {
|
|
|
+ this.ceshi(a.id, "yr");
|
|
|
+ },
|
|
|
+ handleMouseLeave(a, b) {
|
|
|
+ this.ceshi(a.id, "yc");
|
|
|
+ },
|
|
|
+ changeData(name, updata) {
|
|
|
+ this[name] = updata;
|
|
|
+ },
|
|
|
+ clickImg(val) {
|
|
|
+ this.$emit("updateParent", "emitImgList", this.monitorList);
|
|
|
+ this.$emit("updateParent", "emitImgIndex", val);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载图片
|
|
|
+ ddd(obj) {
|
|
|
+ // 将经纬度转换为 Cartesian3 坐标,起始点
|
|
|
+ //起始点
|
|
|
+ var startPosition = Cesium.Cartesian3.fromDegrees(
|
|
|
+ Number(obj.imagerLzb),
|
|
|
+ Number(obj.imagerBzb)
|
|
|
+ );
|
|
|
+ let poi = this.getLonAndLat(
|
|
|
+ Number(obj.imagerLzb),
|
|
|
+ Number(obj.imagerBzb),
|
|
|
+ Number(obj.imagerAngle),
|
|
|
+ 20
|
|
|
+ );
|
|
|
+ //结束点
|
|
|
+ var targetPosition = Cesium.Cartesian3.fromDegrees(poi.lng, poi.lat);
|
|
|
+ // 创建一个实体来表示点
|
|
|
+ var pointEntity = viewer.entities.add({
|
|
|
+ id: "dw" + obj.id,
|
|
|
+ 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" + obj.id,
|
|
|
+ position: startPosition, // 设置箭头位置
|
|
|
+ billboard: {
|
|
|
+ // image: "http://192.168.176.1:8001/长箭头.png", // 设置箭头图标
|
|
|
+ image: "/static/images/路径@3x-2.png", // 设置箭头图标
|
|
|
+ width: 37, // 设置图标宽度
|
|
|
+ height: 69, // 设置图标高度
|
|
|
+ scale: 0.7, // 设置图标缩放
|
|
|
+ rotation: Cesium.Math.toRadians(360 - Number(obj.imagerAngle)), // 可选，默认为0
|
|
|
+ // rotation: Number(obj.imagerAngle), // 可选，默认为0
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置贴地
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 聚焦视角到箭头位置
|
|
|
+ viewer.zoomTo(arrowEntity);
|
|
|
+ },
|
|
|
+ ceshi(id, evtName) {
|
|
|
+ let aaa = viewer.entities.getById("jt" + id);
|
|
|
+ if (evtName == "yr") {
|
|
|
+ aaa.billboard.image = "/static/images/路径@3x.png";
|
|
|
+ } else {
|
|
|
+ aaa.billboard.image = "/static/images/路径@3x-2.png";
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 根据一个经纬度及距离角度，算出另外一个经纬度
|
|
|
+ * @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(type) {
|
|
|
+ if (this.idArr.length != 0) {
|
|
|
+ this.idArr.forEach((item) => {
|
|
|
+ viewer.entities.removeById(type + item);
|
|
|
+ });
|
|
|
+ // this.idArr = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ // getJctbhcInfo(newVal).then((res) => {
|
|
|
+ this.idArr = [];
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // this.monitorList = res.data.images;
|
|
|
+ // this.hcObj = res.data;
|
|
|
+ this.monitorList.forEach((item, i) => {
|
|
|
+ // item.name = res.data.dcry;
|
|
|
+ // window.axiosURI +/file/upload/attachment
|
|
|
+ item.imagerPath =
|
|
|
+ "http://192.168.60.2:8080/file/upload/attachment" + item.imagerPath;
|
|
|
+ // this.ddd(item);
|
|
|
+ this.idArr.push(item.id);
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ jcbh: {
|
|
|
+ handler(newVal, oldVal) {},
|
|
|
+ // deep: true,
|
|
|
+ // immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.delatePoi("jt");
|
|
|
+ this.delatePoi("dw");
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.imgCon {
|
|
|
+ .imgList {
|
|
|
+ width: 100%;
|
|
|
+ // height: 300px;
|
|
|
+ max-height: 400px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // background-color: rgba(255, 192, 203, 0.372);
|
|
|
+ .imgDiv {
|
|
|
+ width: 126px;
|
|
|
+ height: 83px;
|
|
|
+ margin-right: 10px;
|
|
|
+ // background-color: rgba(0, 255, 255, 0.413);
|
|
|
+ position: relative;
|
|
|
+ margin: 4px 4px;
|
|
|
+ img {
|
|
|
+ width: 126px;
|
|
|
+ height: 83px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #dbad70;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #33ccff;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
