我的标记的修改完善

shuishen

2022-02-11 ff7803c7293caa7f8aee531f83542c9e4f74a7ac

 src/components/mobilemap/index.vue

@@ -27,18 +27,24 @@
    <!-- 退出活动 -->
    <mobileCloseRouterMany></mobileCloseRouterMany>
    <!-- 活动窗口 -->
    <!-- <mobileActivity></mobileActivity> -->
    <mobileActivity></mobileActivity>
    <!-- 盖住左下角 -->
    <div class="cover_mobileMap">智慧社区</div>
    <!-- 指示器 -->
    <!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> -->
  </div>
</template>
<script>
import axios from "axios";
import { getBuildClock } from "@/api/mobile/buildsClock/buildsClock"; // 楼栋详情
import { mapGetters } from "vuex";
export default {
  name: "mobilemapBox",
  data() {
    return {
      butbut: null,
      heights: 0,
      heights1: 0,
      DC: "",
      bigPopup: {
        width: 0,
@@ -95,6 +101,7 @@
      "dimension",
      "dimensionData",
      "areaLayer", //绿布
      "areaLayerSelect", //绿布颜色控制
    ]),
  },
  watch: {
@@ -277,13 +284,222 @@
        // if (height > 2000) {
        //   conBack(2000);
        // }
        if (height < 0 && isSet) {
          conBack(0);
        if (height <= 190 && isSet) {
          conBack(190);
        }
        if (height > 4000 && isSet) {
          conBack(4000);
        // if (height > 220 && height <= 280 && isSet) {
        //   conBack(280);
        // }
        // if (height > 280 && height <= 340 && isSet) {
        //   conBack(340);
        // }
        // if (height > 340 && height <= 400 && isSet) {
        //   conBack(400);
        // }
        if (height > 400 && isSet) {
          conBack(400);
        }
      });

      // 按钮事件
      that.butbut = function () {
        //放大
        document.querySelector(".dc-zoom-controller").children[0].onclick =
          function () {
            if (that.dimension == "2.5D") {
              const height = Math.ceil(
                viewer.camera.positionCartographic.height
              );

              if (height > 360) {
                viewer.camera.setView({
                  destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    viewer.camera.positionCartographic.longitude,
                    viewer.camera.positionCartographic.latitude,
                    330
                  ),
                  orientation: {
                    // 指向
                    heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                  },
                });

                return;
              }

              if (height > 300) {
                viewer.camera.setView({
                  destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    viewer.camera.positionCartographic.longitude,
                    viewer.camera.positionCartographic.latitude,
                    270
                  ),
                  orientation: {
                    // 指向
                    heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                  },
                });

                return;
              }

              if (height > 240) {
                viewer.camera.setView({
                  destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    viewer.camera.positionCartographic.longitude,
                    viewer.camera.positionCartographic.latitude,
                    200
                  ),
                  orientation: {
                    // 指向
                    heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                  },
                });
              }
            }
          };
        //缩小
        document.querySelector(".dc-zoom-controller").children[2].onclick =
          function () {
            if (that.dimension == "2.5D") {
              const height = Math.ceil(
                viewer.camera.positionCartographic.height
              );

              if (height <= 240) {
                viewer.camera.setView({
                  destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    viewer.camera.positionCartographic.longitude,
                    viewer.camera.positionCartographic.latitude,
                    270
                  ),
                  orientation: {
                    // 指向
                    heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                  },
                });
              }

              if (height > 240 && height <= 300) {
                viewer.camera.setView({
                  destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    viewer.camera.positionCartographic.longitude,
                    viewer.camera.positionCartographic.latitude,
                    330
                  ),
                  orientation: {
                    // 指向
                    heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                  },
                });
              }

              if (height > 300 && height < 360) {
                viewer.camera.setView({
                  destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    viewer.camera.positionCartographic.longitude,
                    viewer.camera.positionCartographic.latitude,
                    400
                  ),
                  orientation: {
                    // 指向
                    heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                  },
                });
              }
            }
          };
        //滚轮事件
        // 指示器
        var ii = 1,
          startHeight = 0,
          cutHeight = 0;
        let overii = function () {
          ii = 1;
          startHeight = 0;
          cutHeight = 0;
        };
        let setViews = (num) => {
          viewer.camera.setView({
            destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
              viewer.camera.positionCartographic.longitude,
              viewer.camera.positionCartographic.latitude,
              num
            ),
            orientation: {
              // 指向
              heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
              // 视角
              pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
              roll: 0.0,
            },
          });
          overii();
        };
        viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => {
          if (that.dimension == "2.5D") {
            // console.log(e);
            const height = Math.ceil(viewer.camera.positionCartographic.height);
            if (ii == 1 && startHeight == 0) {
              startHeight = height;
            }
            ii++;
            cutHeight = height - startHeight;
            // console.log(cutHeight);
            console.log(height);
            that.heights = height;
            that.heights1 = cutHeight;
            // return;
            if (ii != 1) {
              if (cutHeight >= 0) {
                if (cutHeight > 3) {
                  if (height >= 200 && height < 270) {
                    setViews(270);
                  }
                  if (height >= 273 && height < 330) {
                    setViews(330);
                  }
                  if (height >= 333 && height < 400) {
                    setViews(400);
                  }
                }
                //放大
              } else {
                //缩小
                if (cutHeight < -3) {
                  if (height <= 400 && height > 327) {
                    setViews(330);
                  }
                  if (height <= 327 && height > 267) {
                    setViews(270);
                  }
                  if (height <= 267 && height > 200) {
                    setViews(200);
                  }
                }
              }
            }
          }
        });
      };

      // 地图点击事件
      // viewer.on(DC.MouseEventType.CLICK, (e) => {
@@ -519,30 +735,29 @@
          areaLayer.show = true;
        });
      that.$store.commit("MSET_areaLayer", areaLayer);
      var select = {
        overlay: undefined,
        color: undefined,
      };
      // var select = {
      //   overlay: undefined,
      //   color: undefined,
      // };
      viewer.on(that.DC.MouseEventType.CLICK, (e) => {
        // console.log(e);
        if (e.overlay != undefined && e.layer.id == "areaLayer") {
          if (select.overlay != undefined) {
            if (e.overlay != select.overlay) {
              select.overlay.setStyle({
                material: select.color,
          if (that.areaLayerSelect.overlay != undefined) {
            if (e.overlay != that.areaLayerSelect.overlay) {
              that.areaLayerSelect.overlay.setStyle({
                material: that.areaLayerSelect.color,
                outline: false,
              });

              select.overlay = undefined;
              select.color = undefined;
              that.$store.commit("mset_changeSelect", [undefined, undefined]);
            }
          }

          if (select.overlay == undefined) {
            select.overlay = e.overlay;
          if (that.areaLayerSelect.overlay == undefined) {
            that.areaLayerSelect.overlay = e.overlay;

            select.color = e.overlay._style.material;
            select.overlay.setStyle({
            that.areaLayerSelect.color = e.overlay._style.material;
            that.areaLayerSelect.overlay.setStyle({
              outline: true,
              outlineColor: that.DC.Namespace.Cesium.Color.fromBytes(
                3,
@@ -560,29 +775,57 @@
              ),
            });
          }
          // 定制化窗体
          that.openPopupS(
            {},
            [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
            {
              name: "楼栋号:" + e.overlay.attr["楼栋号"],
              bgImg:
                "http://223.82.109.183:2081/zhxy/upload/20220105/3c05dd70a9eac17b7e49afbfc7b1b68e.png",
              address: "",
              introduce: "",
              data: e,
              lntLat: [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
            }
          );

          //如果是地图点击建筑，调用接口查详情
          let ids =
            e.overlay.attr["楼栋号"] == "8栋"
              ? "9栋"
              : e.overlay.attr["楼栋号"] == "9栋"
              ? "8栋"
              : e.overlay.attr["楼栋号"];
          let eIntlat = [
            e.wgs84SurfacePosition.lng,
            e.wgs84SurfacePosition.lat,
          ];
          getBuildClock({
            mechanismname: "香琴湾" + ids,
          }).then((res) => {
            const item = res.data.data;
            // data.query.bgImg = ds.mechanismname;
            // data.query.name = ds.tpurl;
            // data.query.panoramaurl = ds.panoramaurl;
            // data.query.bgImg = ds.tpurl;
            // data.query.bgImg = ds.tpurl;
            let useData = {
              name: item.mechanismname,
              lntLat: eIntlat,
              alt: item.gd,
              heading: item.heading,
              pitch: item.pitch,
              roll: item.roll,
              bgImg: item.tpurl,
              QRImg: item.codeurl,
              websiteUrl: item.websiteurl,
              telePhone: item.telephone,
              address: item.address,
              introduce: item.introduce,
              video: item.videourl,
              buts: ["定位", "实景", "图集"],
              panoramaurl: item.panoramaurl, //全景
            };
            // 定制化窗体
            // console.log(item, useData, "111111");
            // return;
            that.openPopupS({}, eIntlat, useData);
          });
        } else {
          if (select.overlay != undefined) {
            select.overlay.setStyle({
              material: select.color,
          if (that.areaLayerSelect.overlay != undefined) {
            that.areaLayerSelect.overlay.setStyle({
              material: that.areaLayerSelect.color,
              outline: false,
            });

            select.overlay = undefined;
            select.color = undefined;
            that.$store.commit("mset_changeSelect", [undefined, undefined]);
          }
        }
      });
@@ -614,7 +857,8 @@
          };
          that.dimension == "2.5D"
            ? doit2(
                [114.03928791, 27.62954732, 360.0],
                [114.03928791, 27.62954732, 200.0],
                // [114.04062292, 27.62666834, 220.0],
                [
                  that.dimensionData.heading,
                  that.dimensionData.pitch,
@@ -769,6 +1013,8 @@
        //   });
        // }, 2000);
      }
      viewer.scene.screenSpaceCameraController._minimumZoomRate = 1000;
      viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
      if (false) {
        //镜头改变示例
        // viewer.scene.screenSpaceCameraController.enableZoom = false; //控制视角缩放
@@ -795,6 +1041,9 @@
    }

    DC.ready(initViewer);
    setTimeout(() => {
      that.butbut();
    }, 0);
  },
  methods: {
    openPopupS(position, lntLat, query) {
@@ -818,4 +1067,12 @@
  height: 100%;
  position: relative;
}
.heights {
  background-color: #fff;
  font-size: 24px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999999;
}
</style>