北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2024-09-14 c7187e038c284acc051a439c5eda16582bdb9b7a
src/components/menu/tools/special.vue
@@ -62,8 +62,10 @@
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button> <img src="@/assets/img/left/ztfx/yqfk.png" /> </el-button
        ></el-tooltip>
          <el-button>
            <img src="@/assets/img/left/ztfx/yqfk.png" />
          </el-button>
        </el-tooltip>
      </div>
      <div class="specialTool" @click="rangeQuery()">
        <el-tooltip
@@ -73,8 +75,10 @@
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button> <img src="@/assets/img/left/ztfx/sjxq.png" /> </el-button
        ></el-tooltip>
          <el-button>
            <img src="@/assets/img/left/ztfx/sjxq.png" />
          </el-button>
        </el-tooltip>
      </div>
      <!-- <div class="specialTool" @click="guanxian(openGX)">
        <el-tooltip
@@ -86,7 +90,7 @@
        >
          <el-button> <img src="@/assets/img/left/ztfx/spl.png" /> </el-button
        ></el-tooltip>
      </div> -->
      </div>-->
      <!-- <div class="specialTool" @click="sceneRoaming">
        <el-tooltip
          class="item"
@@ -98,7 +102,7 @@
          <el-button>
            <img src="@/assets/img/left/ztfx/rkqxksh.png" /> </el-button
        ></el-tooltip>
      </div> -->
      </div>-->
      <!-- <div class="specialTool" @click="shipinronghe(videoList)">
        <el-tooltip
@@ -110,7 +114,7 @@
        >
          <el-button> <img src="@/assets/img/left/ztfx/spl.png" /> </el-button
        ></el-tooltip>
      </div> -->
      </div>-->
    </div>
  </div>
</template>
@@ -226,10 +230,10 @@
</style>
<style>
#pointInfoBox {
  /* width: 350px; */
  width: 500px;
  padding: 20px;
  text-align: left;
  background-image: url("~@/assets/img/new/listbg.png");
  background: url("~@/assets/img/new/listbg.png") 100%/100%;
  /* 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);
@@ -237,25 +241,33 @@
}
</style>
<script>
import Vue from "vue";
import store from "@/utils/store";
import poiLayer from "@/components/poplayer/main";
import rpc from "@/assets/js/rpc";
import mapData from "../../../../static/mapData";
import mapMsg from "@/assets/js/mapMsg";
import vueEvents from "@/utils/vueEvent.js";
let PoiLayerConstructor = Vue.extend(poiLayer);
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";
let handler;
import LayerField from "@/utils/NameConf";
let handler, buildingPolygon, objdata, video, promiseS3M;
window.divPoint3 = null;
window.instance = null;
let tooltipHTML;
window.divPoint1 = null;
window.pickFeature = null;
window.imgUrl = null;
window.scale = null;
let buildingPolygon;
let tooltip;
let lineArr = [];
let video;
let promiseS3M;
//交通图层
let panoramaLayer;
window.panoramaLayer = null;
export default {
  name: "special",
  data() {
@@ -265,7 +277,7 @@
      romanOption: [
        { name: "核心区" },
        { name: "景观绿地" },
        { name: "政务服务" },
        { name: "政务服务" }
      ],
      showFlag: false,
      showQYTJ: false,
@@ -287,8 +299,8 @@
          alpha: 1,
          // 透明度
          far: 3000,
          cameraIndexCode: "2b046ef675704975a8d45f1b00cd946b",
        },
          cameraIndexCode: "2b046ef675704975a8d45f1b00cd946b"
        }
        // {
        //   name: "video3",
        //   lon: 116.5146339,
@@ -359,12 +371,12 @@
      alpha: 1,
      // 透明度
      far: 166,
      videoarrList: [],
      videoarrList: []
    };
  },
  computed: {
    ...mapState(["viewer1Show", "yqfk", "cesiumInit"]),
    ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"]),
    ...mapState(["viewer1Show", "yqfk", "qyEchartsShow"])
  },
  mounted() {},
  watch: {
@@ -385,8 +397,8 @@
        }
      },
      deep: true,
      immediate: true,
    },
      immediate: true
    }
  },
  methods: {
    // ...mapMutations(["setViewer1Show", "setYqfk"]),
@@ -398,9 +410,9 @@
          0.0001: "rgb(0,191,255)",
          0.001: "rgb(0,128,0)",
          0.01: "rgb(255,165,0)",
          0.1: "rgb(255,0,0)",
          0.1: "rgb(255,0,0)"
        },
        style: "clustering",
        style: "clustering"
      });
      window.sxtkGeojson.dataSource.clustering.minimumClusterSize = 5;
@@ -408,10 +420,10 @@
      let url;
      axios
        .get(url)
        .then((data) => {
        .then(data => {
          // console.log(data);
          let features = data.data.features;
          features.forEach((feature) => {
          features.forEach(feature => {
            let geom = feature.geometry.coordinates;
            let properties = feature.properties;
            let point = new SmartEarth.Degrees(geom[0], geom[1]);
@@ -420,7 +432,7 @@
            // };
            let entitie = window.sxtkGeojson.add(point, {
              image: SmartEarthRootUrl + "Workers/image/sxt.png",
              image: SmartEarthRootUrl + "Workers/image/sxt.png"
            });
            entitie.properties = properties;
            entitie.tag = "sxt";
@@ -430,7 +442,7 @@
          window.sxthandler = new Cesium.ScreenSpaceEventHandler(
            sgworld.Viewer.scene.canvas
          );
          window.sxthandler.setInputAction((event) => {
          window.sxthandler.setInputAction(event => {
            let pick = sgworld.Viewer.scene.pick(event.position);
            if (pick && pick.id && pick.id.tag == "sxt") {
              //关闭地块信息弹窗
@@ -470,13 +482,13 @@
                    sgworld.drawObj &&
                      sgworld.drawObj.end &&
                      sgworld.drawObj.end("cancel");
                  },
                },
                  }
                }
              });
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        })
        .catch((err) => {
        .catch(err => {
          console.log(err);
        });
    },
@@ -514,32 +526,32 @@
          {
            url: urls,
            queryParameters: {
              layers: "",
            },
              layers: ""
            }
          },
          {},
          "0",
          true,
          function () {}
          function() {}
        );
        window.panoramaHandler = new Cesium.ScreenSpaceEventHandler(
          Viewer.scene.canvas
        );
        window.panoramaHandler.setInputAction((event) => {
        window.panoramaHandler.setInputAction(event => {
          let p;
          p = sgworld.Navigate.getMouseDegrees(event);
          let panorama = new yzPanorama();
          panorama.open({
            id: "qjMap",
            closeId: "panoramaClose",
            lon: p.lon,
            lat: p.lat,
            lng: p.lon,
            lat: p.lat
          });
          // let StreetUrl = "http://10.10.4.116:8085/yzAdapter/";
          // let _StreetscapeYZ = new StreetscapeYZ(sgworld, {
          //   StreetUrl: StreetUrl,
          //   lon: p.lon,
          //     lng: p.lon,
          //   lat: p.lat
          // });
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -577,13 +589,11 @@
    },
    setCesuimHandle() {
      var that = this;
      Bus.$on("clearSelectObject", this.clearSelectObject);
      handler && handler.destroy();
      handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      handler.setInputAction((event) => {
      handler.setInputAction(event => {
        let nPickFeature = sgworld.Viewer.scene.pick(event.position);
        if (Cesium.defined(nPickFeature)) {
          this.resetImg();
          if (buildingPolygon) {
@@ -599,9 +609,9 @@
            // 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 lon;
@@ -619,15 +629,14 @@
                // obj["JK编号"] = properties["JK编号"]._value;
                obj["JK内码"] = properties["JK内码"]._value;
              } else {
                propertyNames.forEach((item) => {
                propertyNames.forEach(item => {
                  obj[item] = properties[item]._value;
                });
              }
              let cartographic =
                window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
                  nPickFeature.id.position._value
                );
              let cartographic = window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
                nPickFeature.id.position._value
              );
              lon = Cesium.Math.toDegrees(cartographic.longitude);
              lat = Cesium.Math.toDegrees(cartographic.latitude);
            } else {
@@ -640,15 +649,80 @@
            }
            if (!isCamera) {
              tooltipHTML = "";
              // 删除字段
              let { OBJECTID, ID, BZDZ, Latitude, Longtitude, ...userData } =
                obj;
              for (let i in userData) {
                let value = userData[i];
                let name = keyName[i] || i;
                value && (tooltipHTML += `<p>${name}:${value || "无"}</p>`);
                console.log(tooltipHTML);
              //重置LayerField数据
              for (let item in LayerField) {
                LayerField[item] = 0;
              }
              // 删除字段
              let {
                OBJECTID,
                ID,
                BZDZ,
                Latitude,
                Longtitude,
                ...userData
              } = obj;
              // 判断展示的类型
              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 if (
                userData.hasOwnProperty("当事人名称") ||
                userData.hasOwnProperty("案件编号")
              ) {
                //修改LayerField数据
                let newOBJ = {
                  当事人名称: userData["当事人名称"],
                  案件编号: userData["案件编号"],
                  案件名称: userData["案件名称"],
                  立案时间: userData["立案时间"],
                  住所: userData["住所"],
                  案件来源: userData["案件来源"],
                  办案部门: userData["办案部门"],
                  办案人员: 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);
                }
              } else {
                // 直接展示
                for (let itemName in newOBJ) {
                  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>
@@ -660,7 +734,7 @@
                {
                  lon: lon,
                  lat: lat,
                  height: 50,
                  height: 50
                },
                {
                  type: "custom",
@@ -674,7 +748,7 @@
                      window.pickFeature.primitive.scale = scale;
                      window.pickFeature = null;
                    }
                  },
                  }
                }
              );
              // if (tooltip) {
@@ -710,54 +784,102 @@
            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>`,
                  },
            // // 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.id.fid &&
            nPickFeature.id.fid.includes("免费住所空间0131")
          ) {
            let obj = nPickFeature.id.attributes;
            let lon = 116.50592;
            let lat = 39.798999;
            if (divPoint1) {
              divPoint1.deleteObject();
            }
            tooltipHTML = "";
            //重置LayerField数据
            for (let item in LayerField) {
              LayerField[item] = 0;
            }
            // 删除字段
            let { Id, ...userData } = obj;
            // 直接展示
            for (let itemName in userData) {
              let value = userData[itemName];
              let CnName = keyName[itemName] || itemName;
              value && (tooltipHTML += `<p>${CnName}:${value || "无"}</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(
              "详细信息",
              {
                lon: lon,
                lat: lat,
                height: 50
              },
              {
                type: "custom",
                offset: ["c", 50],
                description,
                onclick(data) {
                  divPoint1 && divPoint1.deleteObject();
                }
              )
              .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,
                    "面"
                  );
                }
              });
              }
            );
            //关闭地块信息弹窗
            Bus.$emit("closeLandInfoPop", true);
            layuiLayer.close(SmartEarthPopupData.layerProp);
            this.$store.commit("description", obj);
          }
          // else if (nPickFeature.primitive instanceof Cesium.GroundPrimitive) {
          //   let wmsLayer = this.$store.state.selectedLayers.filter((item) => {
@@ -891,20 +1013,20 @@
    setRomanFly(result) {
      this.showFlag = false;
      document.getElementById("scroll").style.display = "none";
      var val = roman.filter((res) => {
      var val = roman.filter(res => {
        if (res.name == result.name) {
          return res;
        }
      });
      var degreesArr = val[0].value;
      sgworld.Creator.getFlyData(degreesArr, (data) => {
      sgworld.Creator.getFlyData(degreesArr, data => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        // 弹窗数据
        window.PathAnimationData = {
          flyData: data,
          flyData: data
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
@@ -914,9 +1036,9 @@
          offset: "r",
          skin: "other-class",
          content: SmartEarthRootUrl + "Workers/path/Path.html",
          end: function () {
          end: function() {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
          }
        });
      });
    },
@@ -956,7 +1078,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
@@ -972,10 +1094,10 @@
                useLine: false, //是否试用辅助线
                success() {
                  sgworld.Navigate.flyToObj(video);
                },
                }
              });
              that.videoarrList.push(video);
            },
            }
          });
        }
      }
@@ -988,7 +1110,7 @@
          alpha: this.alpha, //透明度
          far: this.far, //透明度
          heading: this.heading, //透明度
          pitch: this.pitch, //透明度
          pitch: this.pitch //透明度
        });
    },
    // 清除
@@ -1003,8 +1125,8 @@
        );
        this.openGX = "close";
      } else {
        promiseS3M.then((res) => {
          res.forEach((item) => {
        promiseS3M.then(res => {
          res.forEach(item => {
            item.visible = false;
          });
        });
@@ -1017,7 +1139,7 @@
        spaces: /\s+/,
        parenComma: /\)\s*,\s*\(/,
        doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
        trimParens: /^\s*\(?(.*?)\)?\s*$/,
        trimParens: /^\s*\(?(.*?)\)?\s*$/
      };
      /**
       * Object with properties corresponding to the geometry types. Property values
@@ -1084,7 +1206,7 @@
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
              Number.parseFloat(coords[1])
            ]);
          }
          return components;
@@ -1109,7 +1231,7 @@
            coords = points[i].trim().split(regExes.spaces);
            components.push([
              Number.parseFloat(coords[0]),
              Number.parseFloat(coords[1]),
              Number.parseFloat(coords[1])
            ]);
          }
          return components;
@@ -1186,7 +1308,7 @@
            components.push(parse$1.polygon(polygon));
          }
          return components;
        },
        }
      };
      var geometry, type, str;
@@ -1209,7 +1331,7 @@
      }
      return geometry;
    },
  },
    }
  }
};
</script>