Cesium 图片标注

  功能介绍：
1、在三维场景截一张图，获取一些参数，然后存到数据库。
2、给一张三维场景的截图和一个经纬度坐标，把坐标标注到图片对应位置上。
下面是功能2的代码。

<template>
  <div id="idviewSaveContainer" style="position: relative;" :style="{width:'100%',height:'auto'}">
    <img width="100%" height="auto" :src="srcImg" alt @load="loadImage" />
  </div>
</template>
<script>
import person from "./person";
export default {
  props: {
    fontSize: {
      //人名称字体大小
      type: Number,
      default: 14
    }
  },
  data() {
    return {
      srcImg: "", //图片源
      imgData: null, //截图数据
      personsData: null, //人数据
      doms: []
    };
  },
  computed: {
    person_fontSize() {
      return this.fontSize;
    }
  },
  name: "ty-tagpic",
  mounted() {
    if (!window) {
      return;
    }
    window.onresize = () => {
      this.removePersons();
      this.addPosons(this.personsData, this.imgData);
    };
  },
  methods: {
    loadImage() {
      this.removePersons();
      this.addPosons(this.personsData, this.imgData);
    },
    // 加载数据
    // personsData 人员信息数组
    // imgData  截图相关的信息
    loadData(personsData, imgData) {
      console.log("======ty-tagpic=======personsData:", personsData);
      console.log("======ty-tagpic=======imgData:", imgData);
      this.imgData = imgData;
      this.personsData = personsData;
      this.addPic(imgData.imgdata);
      // this.addPosons(personsData, imgData);
    },
    // 加载截图
    addPic(imgdata) {
      if (!this.checkImg(imgdata)) {
        return;
      }
      this.srcImg = imgdata;
    },
    // 添加人员标注
    addPosons(persons, imgData) {
      if (!this.checkPersons(persons, imgData)) {
        return;
      }
      let el = document.querySelector("#idviewSaveContainer");
      let imgelStyle = getComputedStyle(el);
      if (!imgelStyle || imgelStyle.width.indexOf("%") > -1) {
        console.log("======ty-tagpic=======", "无法获取图片容器宽高!");
        return;
      }
      let elWidth = parseInt(imgelStyle.width.split("px")[0], 10);
      let elHeight = parseInt(imgelStyle.height.split("px")[0], 10);
      persons.forEach(onePerson => {
        let node = this.addOnePerson(onePerson, imgData, elWidth, elHeight);
        node && this.doms.push(node);
      });
    },
    checkImg(imgdata) {
      if (!imgdata || !imgdata.length || imgdata.length < 10) {
        console.log("imgData:", imgdata);
        console.log("======ty-tagpic=======", "图片路径不对");
        return false;
      }
      return true;
    },
    checkPersons(persons, imgObject) {
      let onePerson = persons[0];
      if (!Array.isArray(persons) || persons.length < 1) {
        console.log("======ty-tagpic=======", "没有人！");
        return false;
      }
      let jd = onePerson.jd;
      if (!(jd > 50 && jd < 150)) {
        console.log("======ty-tagpic=======", "经纬度格式或范围不对");
        return false;
      }
      let wd = onePerson.wd;
      if (!(wd > 10 && wd < 70)) {
        console.log("======ty-tagpic=======", "经纬度格式或范围不对");
        return false;
      }
      let name = onePerson.name;
      let floor = onePerson.floor;
      // 图片对应的围栏的经纬度
      let minX = imgObject.wgs84_minx;
      let minY = imgObject.wgs84_miny;
      let maxX = imgObject.wgs84_maxx;
      let maxY = imgObject.wgs84_maxy;
      if (
        !(minX > 50 && minX < 150) ||
        !(minY > 10 && minY < 70) ||
        !(maxX > 50 && maxX < 150) ||
        !(maxY > 10 && maxY < 70)
      ) {
        console.log("======ty-tagpic=======", "经纬度格式或范围不对");
        return false;
      }
      if (
        !(imgObject.win_minx > 0 && imgObject.win_minx < 10000) ||
        !(imgObject.win_maxx > 0 && imgObject.win_maxx < 10000) ||
        !(imgObject.win_miny > 0 && imgObject.win_miny < 10000) ||
        !(imgObject.win_maxy > 0 && imgObject.win_maxy < 10000)
      ) {
        console.log("======ty-tagpic=======", "屏幕坐标格式或范围不对");
        return false;
      }
      return true;
    },
    // 往图片上标注一个人
    // onePerson 一个人的信息
    // imgObject 截图信息
    // imgWidth  图片所在容器宽度
    // imgHeght  图片所在容器高度
    addOnePerson(onePerson, imgObject, imgWidth = 500, imgHeght = 400) {
      //   wgs84_minx; //围栏地理坐标(双精度，至少7位小数)
      //   wgs84_miny; //围栏地理坐标(双精度，至少7位小数)
      //   wgs84_maxx; //围栏地理坐标(双精度，至少7位小数)
      //   wgs84_maxy; //围栏地理坐标(双精度，至少7位小数)
      //   win_minx; //围栏屏幕坐标(整型)
      //   win_miny; //围栏屏幕坐标(整型)
      //   win_maxx; //围栏屏幕坐标(整型)
      //   win_maxy; //围栏屏幕坐标(整型)
      //   imgdata; //图片base64编码数据（TEXT类型）
      //   scene_width; //截图时的场景宽度(整型，4位)
      //   scene_height; //截图时的场景高度(整型，4位)
      //   floor;//电子围栏对应的楼层(这个用于人判断是否在围栏内)
      let jd = onePerson.jd;
      let wd = onePerson.wd;
      let name = onePerson.name;
      let floor = onePerson.floor;
      // 图片对应的围栏的经纬度
      let minX = imgObject.wgs84_minx;
      let minY = imgObject.wgs84_miny;
      let maxX = imgObject.wgs84_maxx;
      let maxY = imgObject.wgs84_maxy;
      let stepX = maxX - minX; //经度差值
      let stepY = maxY - minY; //纬度差值
      let stepXWIN = imgObject.win_maxx - imgObject.win_minx; //屏幕坐标横坐标差值
      let setpYWIN = imgObject.win_maxy - imgObject.win_miny; //屏幕坐标纵坐标差值
      let winX = imgObject.win_minx + ((jd - minX) * stepXWIN) / stepX; //人在截图对应的三维场景中的屏幕坐标-横坐标
      let winY = imgObject.win_miny + ((maxY - wd) * setpYWIN) / stepY; //人在截图对应的三维场景中的屏幕坐标-纵坐标
      let cesiumViewCanvasHeight = imgObject.scene_height; //三维场景的高度
      let cesiumViewCanvasWidth = imgObject.scene_width; //三维场景的宽度
      let xPie = (winX / cesiumViewCanvasWidth) * imgWidth; //人在图片中的横坐标
      let yPie = (winY / cesiumViewCanvasHeight) * imgHeght; //人在图片中的纵坐标
      if (
        !xPie ||
        !yPie ||
        isNaN(xPie) ||
        isNaN(yPie) ||
        xPie < 0 ||
        yPie < 0 ||
        xPie > imgWidth ||
        yPie > imgHeght
      ) {
        console.log(xPie);
        console.log(yPie);
        console.log("======ty-tagpic=======", "经过计算，人不在图片范围内，因此无法展示，请检查人的坐标是否正确！");
        return null;
      }
      // 创建人DIV容器
      var node = person.createNode(
        "div",
        "wl_xq",
        document.getElementById("idviewSaveContainer")
      );
      node.style.width = this.computeSize(100, this.person_fontSize) + `px`;
      node.style.height = this.computeSize(90, this.person_fontSize) + `px`;
      node.style.position = "absolute";
      node.style.left = `${Math.floor(xPie) -
        this.computeSize(50, this.person_fontSize)}px`;
      node.style.top = `${Math.floor(yPie) -
        this.computeSize(100, this.person_fontSize)}px`;
      node.style.textAlign = "center";

      // 创建人的名字标签span，带背景图片
      var nodeLabel = person.createNode("span", "wl_xq", node);
      nodeLabel.style.width = this.computeSize(81, this.person_fontSize) + `px`;
      nodeLabel.style.height =
        this.computeSize(30, this.person_fontSize) + `px`;
      nodeLabel.style.lineHeight =
        this.computeSize(30, this.person_fontSize) + `px`;
      nodeLabel.style.display = "inline-block";
      nodeLabel.style.fontSize = this.person_fontSize + "px";
      nodeLabel.innerHTML = name;
      nodeLabel.style.color = "#E2F5FD";
      nodeLabel.style.fontWeight = "500";
      nodeLabel.style.fontFamily = "PingFangSC-Medium, PingFang SC";
      let personBackgroundIMG = require("./person/bg0.png");
      nodeLabel.style.background =
        "url(" + personBackgroundIMG + ") no-repeat ";
      nodeLabel.style.backgroundSize = "100% 100%";
      nodeLabel.style.textAlign = "center";

      //创建人的标注img
      var nodeBill = person.createNode("img", "wl_xq", node);
      nodeBill.style.width = this.computeSize(40, this.person_fontSize) + `px`;
      nodeBill.style.height = this.computeSize(63, this.person_fontSize) + `px`;
      nodeBill.src = require("./person/ry_a_n.png");
      nodeBill.style.textClign = "center";
      return node;
    },
    // 计算人员各部分元素的像素大小，baseSize对应14文字像素，fontSize变大，则其他元素随着同比例变大。
    computeSize(baseSize, fontSize) {
      return Math.floor((baseSize / 14) * fontSize);
    },
    removePersons() {
      for (let index = 0; index < this.doms.length; index++) {
        const element = this.doms[index];
        person.remove(element);
      }
      this.doms = [];
    },
    resetPos() {}
  }
};
</script>
</style>