北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2023-12-22 38dc484e31723adb7b5e0869d91cc60e6590ee6a
src/components/menu/tools/special.vue
@@ -121,10 +121,12 @@
  width: 111%;
  margin-left: -15px;
}
.el-button:focus,
.el-button:hover {
  background: transparent;
}
.special {
  position: absolute;
  left: 65px;
@@ -135,9 +137,11 @@
  background-color: rgba(14, 50, 143, 0.5);
  width: 350px;
}
.specialTools {
  margin-left: 20px;
}
.specialTool {
  border: 1px solid #999;
  border-radius: 5px;
@@ -146,9 +150,11 @@
  height: 40px;
  margin: 5px;
}
.specialTool img {
  margin: 4px;
}
.specialTools::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
@@ -173,6 +179,7 @@
  border-radius: 0;
  background: rgba(218, 218, 218, 0.1);
}
.specialTool:hover {
  background: rgba(0, 168, 255, 0.16);
}
@@ -180,9 +187,11 @@
.tool-title {
  margin: 1px 10px;
}
.tool-title label {
  vertical-align: top;
}
.special label {
  margin-left: 10px;
  font-size: 17px;
@@ -191,6 +200,7 @@
  /* color: #3d3d3d; */
  color: white;
}
.el-button {
  padding: 0 !important;
  font-size: 24px;
@@ -199,37 +209,51 @@
  display: block;
  background: rgba(0, 0, 0, 0);
}
.el-button label {
  font-size: 14px;
}
.closeTool {
  position: absolute;
  bottom: 0;
  left: 0;
}
.active {
  background: rgba(0, 168, 255, 0.16);
}
</style>
<style>
#pointInfoBox {
  /* width: 350px; */
  padding: 20px;
  text-align: left;
  background-image: url("~@/assets/img/new/listbg.png");
  /* border: 5px #08235f solid; */
  /* border-radius: 7px; */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
}
</style>
<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
import Bus from "../../tools/Bus";
import { roman } from "../../../assets/json/index.js";
import URLInCode from "@/assets/js/urlInCode";
import keyName from "@/utils/poiKeys";
import LayerField from "../../../../static/NameConf";
let handler;
let pickFeature;
let tooltipHTML;
let divPoint1;
let imgUrl;
let scale;
window.divPoint1 = null;
window.pickFeature = null;
window.imgUrl = null;
window.scale = null;
let buildingPolygon;
let tooltip;
let lineArr = [];
let video;
let video2;
let video3;
let video4;
let promiseS3M;
//交通图层
let panoramaLayer;
@@ -509,7 +533,7 @@
          panorama.open({
            id: "qjMap",
            closeId: "panoramaClose",
            lng: p.lon,
            lon: p.lon,
            lat: p.lat,
          });
@@ -546,44 +570,54 @@
      }
    },
    clearSelectObject() {
      if (pickFeature && pickFeature.primitive) {
        pickFeature.primitive.image = imgUrl;
        pickFeature.primitive.scale = scale;
        pickFeature = null;
      if (window.pickFeature && window.pickFeature.primitive) {
        window.pickFeature.primitive.image = imgUrl;
        window.pickFeature.primitive.scale = scale;
        window.pickFeature = null;
      }
    },
    setCesuimHandle() {
      var that = this;
      Bus.$on("clearSelectObject", this.clearSelectObject);
      handler && handler.destroy();
      handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      handler.setInputAction((event) => {
        let nPickFeature = sgworld.Viewer.scene.pick(event.position);
        if (Cesium.defined(nPickFeature)) {
          this.resetImg();
          if (buildingPolygon) {
            sgworld.Creator.DeleteObject(buildingPolygon);
            buildingPolygon = null;
          }
          if (nPickFeature.primitive instanceof Cesium.Billboard) {
            if (nPickFeature.id.length > 0) {
              return;
            }
            this.resetImg();
            this.resetBorder();
            pickFeature = nPickFeature;
            // this.resetBorder();
            window.pickFeature = nPickFeature;
            // console.log(nPickFeature);
            imgUrl = nPickFeature.primitive.image;
            scale = nPickFeature.primitive.scale;
            nPickFeature.primitive.scale = 1;
            nPickFeature.primitive.image =
              window.SmartEarthRootUrl + "Workers/image/point.png";
            nPickFeature.primitive.scale = 1;
            //点击弹框
            let obj = {};
            let lng;
            let lon;
            let lat;
            let isCamera = false;
            if (nPickFeature.id.tag) {
              let properties = nPickFeature.id.properties;
              let propertyNames = nPickFeature.id.properties.propertyNames;
              if (propertyNames.indexOf("监控名") !== -1) {
                isCamera = true;
                obj["JK名称"] = properties["JK名称"]._value;
                obj["JK类型"] = properties["JK类型"]._value;
                obj["功能"] = properties["功能"]._value;
                obj["所在区"] = properties["所在区"]._value;
                obj["JK编号"] = properties["JK编号"]._value;
                // obj["JK类型"] = properties["JK类型"]._value;
                // obj["功能"] = properties["功能"]._value;
                // obj["所在区"] = properties["所在区"]._value;
                // obj["JK编号"] = properties["JK编号"]._value;
                obj["JK内码"] = properties["JK内码"]._value;
              } else {
                propertyNames.forEach((item) => {
@@ -595,56 +629,167 @@
                window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
                  nPickFeature.id.position._value
                );
              lng = Cesium.Math.toDegrees(cartographic.longitude);
              lon = Cesium.Math.toDegrees(cartographic.longitude);
              lat = Cesium.Math.toDegrees(cartographic.latitude);
            } else {
              obj = nPickFeature.id.attributes;
              lng = nPickFeature.id.positions[0];
              lon = nPickFeature.id.positions[0];
              lat = nPickFeature.id.positions[1];
            }
            tooltipHTML = "";
            // console.log(obj);
            for (let i in obj) {
              let value = obj[i];
              value && (tooltipHTML += `<p>${i}:${value || "无"}</p>`);
            if (divPoint1) {
              divPoint1.deleteObject();
            }
            if (!isCamera) {
              tooltipHTML = "";
              //重置LayerField数据
              for (let item in LayerField) {
                LayerField[item] = 0;
              }
              // 删除字段
              let { OBJECTID, ID, BZDZ, Latitude, Longtitude, ...userData } =
                obj;
            if (tooltip) {
              tooltip.show(false);
              tooltip = null;
              // 判断展示的类型
              if (
                userData.hasOwnProperty("部件名称") ||
                userData.hasOwnProperty("井编号")
              ) {
                //修改LayerField数据
                for (let itemName in userData) {
                  let CnName = keyName[itemName] || itemName;
                  if (LayerField.hasOwnProperty(CnName)) {
                    LayerField[CnName] = userData[itemName];
                    if (CnName == "经度" || CnName == "纬度") {
                      let str = Number(LayerField[CnName]);
                      LayerField[CnName] = str.toFixed(6);
                    }
                  }
                }
                // 展示LayerField数据
                for (let item in LayerField) {
                  let value = LayerField[item];
                  value && (tooltipHTML += `<p>${item}:${value || "无"}</p>`);
                }
              } else {
                // 直接展示
                for (let itemName in userData) {
                  let value = userData[itemName];
                  let CnName = keyName[itemName] || itemName;
                  value &&
                    (tooltipHTML += `<p>${CnName}:${value || "无"}</p>`);
                  console.log(tooltipHTML);
                }
              }
              let description = `
                   <div id="pointInfoBox" class="pointInfoBox" style="pointer-events:auto;">
                    <span style="position: absolute; right: 12px; top: 6px;">×</span>
                    ${tooltipHTML}
                  </div>
                `;
              divPoint1 = sgworld.Creator.createDivPoint(
                "详细信息",
                {
                  lon: lon,
                  lat: lat,
                  height: 50,
                },
                {
                  type: "custom",
                  offset: ["c", 50],
                  description,
                  onclick(data) {
                    // sgworld.Creator.DeleteObject(divPoint1);
                    divPoint1 && divPoint1.deleteObject();
                    if (window.pickFeature && window.pickFeature.primitive) {
                      window.pickFeature.primitive.image = imgUrl;
                      window.pickFeature.primitive.scale = scale;
                      window.pickFeature = null;
                    }
                  },
                }
              );
              // if (tooltip) {
              //   tooltip.show(false);
              //   tooltip = null;
              // }
              // tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, {
              //   color: "black",
              //   addY: -40,
              //   far: 200000,
              //   closeBtn: true,
              //   close: () => {
              //     this.resetImg();
              //   },
              // });
              // let description = `<div style='background:
              //                         rgba(14, 50, 143, 0.6);
              //                         border: 1px solid #205fbc;
              //                          border-radius: 5px;
              //                          color: #fff;
              //                          padding: 15px;
              //                          box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38);
              //                          '>${tooltipHTML}</div>`;
              // tooltip.showAt(
              //   Cesium.Cartesian3.fromDegrees(lon, lat, 0),
              //   description
              // );
            }
            tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, {
              color: "black",
              addY: -40,
              far: 200000,
              closeBtn: true,
              close: () => {
                this.resetImg();
                this.resetBorder();
              },
            });
            let description = `<div style='background:
                                      rgba(14, 50, 143, 0.6);
                                      border: 1px solid #205fbc;
                                       border-radius: 5px;
                                       color: #fff;
                                       padding: 15px;
                                       box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38);
                                       '>${tooltipHTML}</div>`;
            tooltip.showAt(
              Cesium.Cartesian3.fromDegrees(lng, lat, 0),
              description
            );
            //关闭地块信息弹窗
            Bus.$emit("closeLandInfoPop", true);
            layuiLayer.close(SmartEarthPopupData.layerProp);
            this.$store.commit("description", obj);
          } else if (nPickFeature.primitive instanceof Cesium.Cesium3DTileset) {
            // let cartographic =
            //   window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
            //     nPickFeature.content.tile.boundingSphere.center
            //   );
            // let lon = Cesium.Math.toDegrees(cartographic.longitude);
            // let lat = Cesium.Math.toDegrees(cartographic.latitude);
            let p = sgworld.Navigate.getMouseDegrees(event);
            let lon = p.lon;
            let lat = p.lat;
            axios
              .get(
                "http://10.10.4.121:8070/gisserver/wfsserver/yizhuang-building-wfs-1207",
                {
                  params: {
                    version: "1.3.0",
                    request: "GetFeature",
                    typename: `亦庄建筑外轮廓4326`,
                    propertyname: "*",
                    format: "json",
                    filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><ogc:Intersects><ogc:PropertyName>SAHEP</ogc:PropertyName><gml:Point > <gml:pos>${lon} ${lat}</gml:pos></gml:Point></ogc:Intersects></ogc:Filter>`,
                  },
                }
              )
              .then((response) => {
                if (response.data.features.length > 0) {
                  var geometry = [];
                  let POIs = response.data.features[0].geometry.coordinates[0];
                  for (let i = 0; i < POIs.length; i++) {
                    geometry.push({
                      x: parseFloat(POIs[i][0]),
                      y: parseFloat(POIs[i][1]),
                      z: 0,
                    });
                  }
                  buildingPolygon = sgworld.Creator.createPolygon(
                    geometry,
                    {
                      fillColor: "#00ff0050",
                      outlineColor: "#ff0000",
                      outlineWidth: 2,
                    },
                    1,
                    0,
                    "面"
                  );
                }
              });
          }
          // else if (nPickFeature.primitive instanceof Cesium.GroundPrimitive) {
          //   let wmsLayer = this.$store.state.selectedLayers.filter((item) => {
@@ -742,20 +887,20 @@
      this.$parent.$parent.$parent.isShowSpeAnalyse = false;
    },
    resetImg() {
      if (pickFeature && pickFeature.primitive) {
        pickFeature.primitive.image = imgUrl;
        pickFeature.primitive.scale = scale;
        pickFeature = null;
      if (window.pickFeature && window.pickFeature.primitive) {
        window.pickFeature.primitive.image = imgUrl;
        window.pickFeature.primitive.scale = scale;
        window.pickFeature = null;
      }
    },
    resetBorder() {
      lineArr.forEach((item, index) => {
        if (lineArr[index]) {
          sgworld.Creator.DeleteObject(lineArr[index]);
          lineArr[index] = null;
        }
      });
    },
    // resetBorder() {
    //   lineArr.forEach((item, index) => {
    //     if (lineArr[index]) {
    //       sgworld.Creator.DeleteObject(lineArr[index]);
    //       lineArr[index] = null;
    //     }
    //   });
    // },
    stdsjHandle() {
      window.open(
        "http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"
@@ -807,20 +952,7 @@
        });
      });
    },
    spjkHandle() {
      if (window.sxtkGeojson) {
        window.sxtkGeojson.deleteObject();
        window.sxtkGeojson = null;
        window.sxthandler.destroy();
        //关闭弹窗
        Bus.$emit("closeRightPop", true);
        layuiLayer.close(SmartEarthPopupData.layerProp);
        return;
      } else {
        Bus.$emit("showSPJK");
        // this.spjkLoad();
      }
    },
    handleCommand(command) {
      switch (command) {
        case "qytj":
@@ -910,6 +1042,206 @@
        });
      }
    },
    read(wkt) {
      var regExes = {
        typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
        emptyTypeStr: /^\s*(\w+)\s*EMPTY\s*$/,
        spaces: /\s+/,
        parenComma: /\)\s*,\s*\(/,
        doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
        trimParens: /^\s*\(?(.*?)\)?\s*$/,
      };
      /**
       * Object with properties corresponding to the geometry types. Property values
       * are functions that do the actual parsing.
       * @private
       */
      var parse$1 = {
        /**
         * Return point geometry given a point WKT fragment.
         *
         * @param {String} str A WKT fragment representing the point.
         * @return {Point} A point geometry.
         * @private
         */
        point: function point(str) {
          if (str === undefined) {
            return [];
          }
          var coords = str.trim().split(regExes.spaces);
          return [Number.parseFloat(coords[0]), Number.parseFloat(coords[1])];
        },
        /**
         * Return a multipoint geometry given a multipoint WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multipoint.
         * @return {Point} A multipoint feature.
         * @private
         */
        multipoint: function multipoint(str) {
          var this$1 = this;
          if (str === undefined) {
            return [];
          }
          var point;
          var points = str.trim().split(",");
          var components = [];
          for (var i = 0, len = points.length; i < len; ++i) {
            point = points[i].replace(regExes.trimParens, "$1");
            components.push(parse$1.point(point));
          }
          return components;
        },
        /**
         * Return a linestring geometry given a linestring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the linestring.
         * @return {LineString} A linestring geometry.
         * @private
         */
        linestring: function linestring(str) {
          if (str === undefined) {
            return [];
          }
          var points = str.trim().split(",");
          var components = [];
          var coords;
          for (var i = 0, len = points.length; i < len; ++i) {
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
            ]);
          }
          return components;
        },
        /**
         * Return a linearring geometry given a linearring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the linearring.
         * @return {LinearRing} A linearring geometry.
         * @private
         */
        linearring: function linearring(str) {
          if (str === undefined) {
            return [];
          }
          var points = str.trim().split(",");
          var components = [];
          var coords;
          for (var i = 0, len = points.length; i < len; ++i) {
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
            ]);
          }
          return components;
        },
        /**
         * Return a multilinestring geometry given a multilinestring WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multilinestring.
         * @return {MultiLineString} A multilinestring geometry.
         * @private
         */
        multilinestring: function multilinestring(str) {
          var this$1 = this;
          if (str === undefined) {
            return [];
          }
          var line;
          var lines = str.trim().split(regExes.parenComma);
          var components = [];
          for (var i = 0, len = lines.length; i < len; ++i) {
            line = lines[i].replace(regExes.trimParens, "$1");
            components.push(parse$1.linestring(line));
          }
          return components;
        },
        /**
         * Return a polygon geometry given a polygon WKT fragment.
         *
         * @param {String} str A WKT fragment representing the polygon.
         * @return {Polygon} A polygon geometry.
         * @private
         */
        polygon: function polygon(str) {
          var this$1 = this;
          if (str === undefined) {
            return [];
          }
          var ring, linestring, linearring;
          var rings = str.trim().split(regExes.parenComma);
          var shell;
          var holes = [];
          //for (var i = 0, len = rings.length; i < len; ++i) {
          ring = rings[0].replace(regExes.trimParens, "$1");
          linestring = ring;
          //}
          return linestring;
        },
        /**
         * Return a multipolygon geometry given a multipolygon WKT fragment.
         *
         * @param {String} str A WKT fragment representing the multipolygon.
         * @return {MultiPolygon} A multipolygon geometry.
         * @private
         */
        multipolygon: function multipolygon(str) {
          var this$1 = this;
          if (str === undefined) {
            return [];
          }
          var polygon;
          var polygons = str.trim().split(regExes.doubleParenComma);
          var components = [];
          for (var i = 0, len = polygons.length; i < len; ++i) {
            polygon = polygons[i].replace(regExes.trimParens, "$1");
            components.push(parse$1.polygon(polygon));
          }
          return components;
        },
      };
      var geometry, type, str;
      wkt = wkt.replace(/[\n\r]/g, " ");
      var matches = regExes.typeStr.exec(wkt);
      if (wkt.search("EMPTY") !== -1) {
        matches = regExes.emptyTypeStr.exec(wkt);
        matches[2] = undefined;
      }
      if (matches) {
        type = matches[1].toLowerCase();
        str = matches[2];
        if (parse$1[type]) {
          geometry = parse$1[type].apply(this, [str]);
        }
      }
      if (geometry === undefined) {
        throw new Error("Could not parse WKT " + wkt);
      }
      return geometry;
    },
  },
};
</script>