北京经济技术开发区经开区虚拟城市项目-【前端】-Web
src/components/menu/tools/special.vue
@@ -2,52 +2,28 @@
  <div class="special" id="special">
    <div class="specialTools">
      <div class="specialTool" @click="tdglHandle">
        <el-tooltip
          class="item"
          effect="dark"
          content="土地管理"
          placement="top-start"
          popper-class="item_tooltip"
        >
        <el-tooltip class="item" effect="dark" content="土地管理" placement="top-start" popper-class="item_tooltip">
          <el-button>
            <img src="@/assets/img/left/ztfx/tdgl.png" />
          </el-button>
        </el-tooltip>
      </div>
      <div class="specialTool" @click="stdsj">
        <el-tooltip
          class="item"
          effect="dark"
          content="视图大数据平台"
          placement="top-start"
          popper-class="item_tooltip"
        >
        <el-tooltip class="item" effect="dark" content="视图大数据平台" placement="top-start" popper-class="item_tooltip">
          <el-button>
            <img src="@/assets/img/left/ztfx/dashuju.png" />
          </el-button>
        </el-tooltip>
      </div>
      <div class="specialTool" @click="spjkHandle">
        <el-tooltip
          class="item"
          effect="dark"
          content="视频监控"
          placement="top-start"
          popper-class="item_tooltip"
        >
        <el-tooltip class="item" effect="dark" content="视频监控" placement="top-start" popper-class="item_tooltip">
          <el-button>
            <img src="@/assets/img/left/ztfx/spjk.png" />
          </el-button>
        </el-tooltip>
      </div>
      <div class="specialTool" @click="jjHandle">
        <el-tooltip
          class="item"
          effect="dark"
          content="街景"
          placement="top-start"
          popper-class="item_tooltip"
        >
        <el-tooltip class="item" effect="dark" content="街景" placement="top-start" popper-class="item_tooltip">
          <el-button>
            <img src="@/assets/img/left/ztfx/jiejing.png" />
          </el-button>
@@ -55,26 +31,14 @@
      </div>
      <div class="specialTool" @click="qytj">
        <el-tooltip
          class="item"
          effect="dark"
          content="数据汇聚"
          placement="top-start"
          popper-class="item_tooltip"
        >
        <el-tooltip class="item" effect="dark" content="数据汇聚" placement="top-start" popper-class="item_tooltip">
          <el-button>
            <img src="@/assets/img/left/ztfx/yqfk.png" />
          </el-button>
        </el-tooltip>
      </div>
      <div class="specialTool" @click="rangeQuery()">
        <el-tooltip
          class="item"
          effect="dark"
          content="范围查询"
          placement="top-start"
          popper-class="item_tooltip"
        >
        <el-tooltip class="item" effect="dark" content="范围查询" placement="top-start" popper-class="item_tooltip">
          <el-button>
            <img src="@/assets/img/left/ztfx/sjxq.png" />
          </el-button>
@@ -258,7 +222,7 @@
import keyName from "@/utils/poiKeys";
import LayerField from "@/utils/NameConf";
let handler, buildingPolygon, objdata, video, promiseS3M;
let handler, buildingPolygon, objdata = {}, video, promiseS3M;
window.divPoint3 = null;
window.instance = null;
let tooltipHTML;
@@ -378,7 +342,7 @@
    ...mapState(["viewer1Show", "yqfk", "cesiumInit"]),
    ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"])
  },
  mounted() {},
  mounted() { },
  watch: {
    cesiumInit: {
      handler(newVal, oldVal) {
@@ -453,7 +417,7 @@
              sgworld.drawObj &&
                (sgworld.drawObj.drawHandler &&
                  sgworld.drawObj.drawHandler.destroy(),
                sgworld.drawObj.end && sgworld.drawObj.end());
                  sgworld.drawObj.end && sgworld.drawObj.end());
              let props = pick.id.properties;
              let screenHeight =
@@ -532,7 +496,7 @@
          {},
          "0",
          true,
          function() {}
          function () { }
        );
        window.panoramaHandler = new Cesium.ScreenSpaceEventHandler(
          Viewer.scene.canvas
@@ -558,7 +522,7 @@
      } else {
        try {
          window.panoramaLayer.deleteObject();
        } catch (e) {}
        } catch (e) { }
        window.panoramaHandler.destroy();
        window.panoramaHandler = undefined;
      }
@@ -594,6 +558,7 @@
      handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      handler.setInputAction(event => {
        let nPickFeature = sgworld.Viewer.scene.pick(event.position);
        console.log(nPickFeature);
        if (Cesium.defined(nPickFeature)) {
          this.resetImg();
          if (buildingPolygon) {
@@ -606,13 +571,14 @@
            }
            // this.resetBorder();
            window.pickFeature = nPickFeature;
            // console.log(nPickFeature);
            imgUrl = nPickFeature.primitive.image;
            scale = nPickFeature.primitive.scale;
            nPickFeature.primitive.image =
              window.SmartEarthRootUrl + "Workers/image/point.png";
            nPickFeature.primitive.scale = 1;
            //点击弹框
            objdata = {}
            let obj = {};
            let lon;
            let lat;
@@ -649,11 +615,11 @@
            }
            if (!isCamera) {
              tooltipHTML = "";
              //重置LayerField数据
              //重置LayerField数据(窨井和部件展示的字段表)
              for (let item in LayerField) {
                LayerField[item] = 0;
              }
              // 删除字段
              // 删除不需要的字段 剩下保存为userData
              let {
                OBJECTID,
                ID,
@@ -662,7 +628,6 @@
                Longtitude,
                ...userData
              } = obj;
              // 判断展示的类型
              if (
                userData.hasOwnProperty("部件名称") ||
@@ -681,10 +646,8 @@
                }
                // 展示LayerField数据
                for (let item in LayerField) {
                  let value = LayerField[item];
                  value &&
                    (tooltipHTML += `<p>${item}:${value ||
                      "无"}</p>`);
                  LayerField[item] && (objdata[item] = LayerField[item])
                  // (tooltipHTML += `<p>${item}:${LayerField[item] || "无"}</p>`);
                }
              } else if (
                userData.hasOwnProperty("当事人名称") ||
@@ -702,136 +665,50 @@
                  办案人员: userData["办案人员"],
                  调查情形: userData["调查情形"]
                };
                // 展示LayerField数据
                for (let itemName in newOBJ) {
                  let CnName = itemName;
                  let value = userData[itemName];
                  value &&
                    (tooltipHTML += `<p style="margin-top:7px;">${CnName}:${value ||
                      "无"}</p>`);
                  // console.log(tooltipHTML);
                }
                objdata = newOBJ
              } else {
                // 直接展示
                for (let itemName in newOBJ) {
                  let value = userData[itemName];
                for (let itemName in userData) {
                  let CnName = keyName[itemName] || itemName;
                  value &&
                    (tooltipHTML += `<p>${CnName}:${value || "无"}</p>`);
                  // console.log(tooltipHTML);
                  userData[itemName] && (objdata[CnName] = userData[itemName])
                  // (tooltipHTML += `<p style="margin-top:7px;">${itemName}:${ userData[itemName] ||
                  //   "无"}</p>`);
                }
              }
              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(
                "详细信息",
              divPoint3 && divPoint3.deleteObject();
              store.setPoplayerShowAction(false);
              store.setPoplayerListAction({});
              store.setPoplayerShowAction(true);
              store.setPoplayerListAction(objdata);
              window.instance = new PoiLayerConstructor({
                data: {
                  list: objdata,
                },
              });
              window.instance.$mount();
              divPoint3 = window.sgworld.Creator.createDivPoint(
                "",
                {
                  lon: lon,
                  lat: lat,
                  height: 50
                  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;
                    }
                  }
                  offset: ["c", 100],
                  description: window.instance.$el,
                  near: 0,
                  far: 100000,
                }
              );
              // 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
              // );
            }
            //关闭地块信息弹窗
            Bus.$emit("closeLandInfoPop", true);
            layuiLayer.close(SmartEarthPopupData.layerProp);
            //发送给right-top.vue调用
            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 (
          }
          else if (nPickFeature.id &&
            nPickFeature.id.fid &&
            nPickFeature.id.fid.includes("免费住所空间0131")
          ) {
@@ -842,10 +719,6 @@
              divPoint1.deleteObject();
            }
            tooltipHTML = "";
            //重置LayerField数据
            for (let item in LayerField) {
              LayerField[item] = 0;
            }
            // 删除字段
            let { Id, ...userData } = obj;
            // 直接展示
@@ -881,6 +754,90 @@
            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-buliding-wfs",
                {
                  params: {
                    version: "1.3.0",
                    request: "GetFeature",
                    typename: `单体化SHP20241029_wgs84`,
                    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];
                  tooltipHTML = "";
                  for (let i in response.data.features[0].properties) {
                    let value = response.data.features[0].properties[i];
                    value && (tooltipHTML += `<p>${i}:${value || "无"}</p>`);
                  }
                  // if (tooltip) {
                  //   tooltip.show(false);
                  //   tooltip = null;
                  // }
                  var tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, {
                    color: "black",
                    addY: 0,
                    far: 200000,
                    closeBtn: true,
                    close: () => {
                      if (buildingPolygon) {
                        sgworld.Creator.DeleteObject(buildingPolygon);
                        buildingPolygon = null;
                      }
                    },
                  });
                  console.log(tooltipHTML);
                  let description = `<div style=' border: 1px solid #fff;border-radius: 5px;background: rgba(0, 0, 0, 0.8);color: #fff;padding: 15px;'>${tooltipHTML}</div>`;
                  tooltip.showAt(
                    Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0),
                    description
                  );
                  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) => {
          //     return item.name == "行政区划图";
@@ -890,7 +847,7 @@
          //     axios
          //       .get(
          //         "http://10.10.4.116:8070/gisserver/rest/services/XingZhengQuHuaTu/MapServer/identify",
          //         "https://skyzt.bda.gov.cn/gisserver/rest/services/XingZhengQuHuaTu/MapServer/identify",
          //         {
          //           params: {
          //             geometry: `${p.lon},${p.lat}`,
@@ -1036,7 +993,7 @@
          offset: "r",
          skin: "other-class",
          content: SmartEarthRootUrl + "Workers/path/Path.html",
          end: function() {
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          }
        });
@@ -1078,7 +1035,7 @@
              "http://10.10.4.116:8086/getCamerasInfoHls?cameraIndexCode=" +
              item[i].cameraIndexCode,
            // url: "http://10.10.4.116:8086/getCamerasInfoHls?cameraIndexCode=49ee9fed701444738112e80a4835122c",
            success: function(result) {
            success: function (result) {
              video = sgworld.Creator.Video3D({
                cameraPosition: position, //相机安装位置
                heading: item[i].heading, //64