+点击建筑弹窗加绿布

liuyg

2022-01-18 1b65bf157e9d1852bf819bcebcdbf596b77ae6b9

+点击建筑弹窗加绿布

 src/components/mobileWindow/index.vue

@@ -250,6 +250,7 @@
      that.routerS = [];
      let once = true;
      let query = this.query.query;
      // console.log(query);
      if (val == "去这") {
        //定位
        // console.log(this.query.query);
@@ -257,11 +258,7 @@
        let ints = {
          // start: [114.039946, 27.628475],
          // end: that.query.query.lntLat,
          start: [
            +that.query.query.lntLat[0],
            +that.query.query.lntLat[1],
            360,
          ],
          start: [+query.lntLat[0], +query.lntLat[1], 360],
          end: [114.031946, 27.621475],
          type: "driving",
          fn: function (datas) {

 src/components/mobilemap/index.vue

@@ -33,6 +33,7 @@
  </div>
</template>
<script>
import axios from "axios";
import { mapGetters } from "vuex";
export default {
  name: "mobilemapBox",
@@ -79,6 +80,7 @@
        [116.39585177, 27.93945304, 100],
        [116.41526036, 27.95352217, 100],
      ],
      areaLayer: null,
    };
  },
  computed: {
@@ -92,6 +94,7 @@
      "MobileWindowsHideFixed",
      "dimension",
      "dimensionData",
      "areaLayer", //绿布
    ]),
  },
  watch: {
@@ -480,6 +483,110 @@
      };

      const newLayer = usetowpointfive();
      //2.5d贴图事件
      const layerGroup = new that.DC.LayerGroup("modelBox");
      viewer.addLayerGroup(layerGroup);

      let areaLayer = new that.DC.VectorLayer("areaLayer");
      layerGroup.addLayer(areaLayer);
      axios
        .get(
          "http://arcgis.jxpskj.com:6080/arcgis/rest/services/lxxqwxq/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson"
        )
        .then((resultData) => {
          resultData.data.features.forEach((item) => {
            item.geometry.rings[0].forEach((it) => {
              it = it.join(",");
            });

            item.geometry.rings[0] = item.geometry.rings[0].join(";");

            const polygon = new that.DC.Polygon(item.geometry.rings[0]);
            polygon.attr = item.attributes;

            polygon.setStyle({
              material: that.DC.Namespace.Cesium.Color.fromBytes(
                255,
                255,
                255,
                1
              ),
            });

            areaLayer.addOverlay(polygon);
          });

          areaLayer.show = true;
        });
      that.$store.commit("MSET_areaLayer", areaLayer);
      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,
                outline: false,
              });

              select.overlay = undefined;
              select.color = undefined;
            }
          }

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

            select.color = e.overlay._style.material;
            select.overlay.setStyle({
              outline: true,
              outlineColor: that.DC.Namespace.Cesium.Color.fromBytes(
                3,
                255,
                13,
                255
              ), // 边框颜色
              outlineWidth: 10, // 边框大小，
              height: 0.01,
              material: that.DC.Namespace.Cesium.Color.fromBytes(
                108,
                245,
                113,
                158
              ),
            });
          }
          // 定制化窗体
          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],
            }
          );
        } else {
          if (select.overlay != undefined) {
            select.overlay.setStyle({
              material: select.color,
              outline: false,
            });

            select.overlay = undefined;
            select.color = undefined;
          }
        }
      });

      // 2.5D贴图↑
      let startPoint;
      if (true) {

 src/store/getters.js

@@ -1,26 +1,27 @@
// 手机端
const mobile = {
    mviewer: (state) => state.mobile.mviewer,
    mBigPopup: (state) => state.mobile.mBigPopup,
    popupOurOpenData: (state) => state.mobile.popupOurOpenData,
    popupTableName: (state) => state.mobile.popupTableName,
    mBigPopupAfter: (state) => state.mobile.mBigPopupAfter,
    iconHide: (state) => state.mobile.iconHide,
    MobileWindowsHide: (state) => state.mobile.MobileWindowsHide, // 随地图移动窗口
    MobileWindowChangeData: (state) => state.mobile.MobileWindowChangeData, // 随地图移动窗口
    popupsDom: (state) => state.mobile.popupsDom,
    query: (state) => state.mobile.query,
    openmobileGoTo: (state) => state.mobile.openmobileGoTo, // 测试
    ccDataState: (state) => state.mobile.ccDataState, // 测试
    openmobilePanorama: (state) => state.mobile.openmobilePanorama,
    MobileWindowsHideFixed: (state) => state.mobile.MobileWindowsHideFixed, // 固定窗口
    MobileWindowChangeDataFixed: (state) =>
        state.mobile.MobileWindowChangeDataFixed, // 固定窗口
    startPointFn: (state) => state.mobile.startPointFn, // 默认起始点位置
    dimension: (state) => state.mobile.dimension, // 维度
    dimensionData: (state) => state.mobile.dimensionData, // 维度镜头数据
    perspectiveControl: (state) => state.mobile.perspectiveControl, /// 视角控制：高度、角度  ()=>{}
    audioState: (state) => state.mobile.audioState, // 文字转语音状态
  mviewer: (state) => state.mobile.mviewer,
  mBigPopup: (state) => state.mobile.mBigPopup,
  popupOurOpenData: (state) => state.mobile.popupOurOpenData,
  popupTableName: (state) => state.mobile.popupTableName,
  mBigPopupAfter: (state) => state.mobile.mBigPopupAfter,
  iconHide: (state) => state.mobile.iconHide,
  MobileWindowsHide: (state) => state.mobile.MobileWindowsHide, // 随地图移动窗口
  MobileWindowChangeData: (state) => state.mobile.MobileWindowChangeData, // 随地图移动窗口
  popupsDom: (state) => state.mobile.popupsDom,
  query: (state) => state.mobile.query,
  openmobileGoTo: (state) => state.mobile.openmobileGoTo, // 测试
  ccDataState: (state) => state.mobile.ccDataState, // 测试
  openmobilePanorama: (state) => state.mobile.openmobilePanorama,
  MobileWindowsHideFixed: (state) => state.mobile.MobileWindowsHideFixed, // 固定窗口
  MobileWindowChangeDataFixed: (state) =>
    state.mobile.MobileWindowChangeDataFixed, // 固定窗口
  startPointFn: (state) => state.mobile.startPointFn, // 默认起始点位置
  dimension: (state) => state.mobile.dimension, // 维度
  dimensionData: (state) => state.mobile.dimensionData, // 维度镜头数据
  perspectiveControl: (state) => state.mobile.perspectiveControl, /// 视角控制：高度、角度  ()=>{}
  audioState: (state) => state.mobile.audioState, // 文字转语音状态
  areaLayer: (state) => state.mobile.areaLayer, // 文字转语音状态

  isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, // 是否开启路线
  isendPosition: (state) => state.mobile.isendPosition, // 路线导航终点数据改变
@@ -29,46 +30,46 @@
  choiceRouterS: (state) => state.mobile.choiceRouterS, // 当前选择路径

  showActivity: (state) => state.mobile.showActivity, // 显影活动弹窗
  isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany // 显影活动弹窗
}
  isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany, // 显影活动弹窗
};

const navigation = {
    campusNavFlag: (state) => state.navigation.campusNavFlag,
    comeName: (state) => state.navigation.comeName,
    getToName: (state) => state.navigation.getToName
}
  campusNavFlag: (state) => state.navigation.campusNavFlag,
  comeName: (state) => state.navigation.comeName,
  getToName: (state) => state.navigation.getToName,
};

const search = {
    orgNavBarFlag: (state) => state.search.orgNavBarFlag,
    orgNavBarTitle: (state) => state.search.orgNavBarTitle,
    orgNavBarList: (state) => state.search.orgNavBarList,
    arcNavBarFlag: (state) => state.search.arcNavBarFlag,
    arcNavBarTitle: (state) => state.search.arcNavBarTitle,
    arcNavBarCode: (state) => state.search.arcNavBarCode
}
  orgNavBarFlag: (state) => state.search.orgNavBarFlag,
  orgNavBarTitle: (state) => state.search.orgNavBarTitle,
  orgNavBarList: (state) => state.search.orgNavBarList,
  arcNavBarFlag: (state) => state.search.arcNavBarFlag,
  arcNavBarTitle: (state) => state.search.arcNavBarTitle,
  arcNavBarCode: (state) => state.search.arcNavBarCode,
};

const getters = {
    ...mobile,
    ...navigation,
    ...search,
    viewer: (state) => state.viewer.viewer,
    twoOrThree: (state) => state.viewer.twoOrThree,
    popupBgUrl: (state) => state.popupParams.popupBgUrl,
    pupupQRUrl: (state) => state.popupParams.pupupQRUrl,
    pointPosition: (state) => state.popupParams.pointPosition,
    terminus: (state) => state.popupParams.terminus,
    startingPoint: (state) => state.popupParams.startingPoint,
    stateName: (state) => state.popupParams.stateName,
    siteName: (state) => state.popupParams.siteName,
    telephone: (state) => state.popupParams.telephone,
    introduceText: (state) => state.popupParams.introduceText,
    panoramaUrl: (state) => state.popupParams.panoramaUrl,
    panoramaPopup: (state) => state.popupParams.panoramaPopup,
    monitorUrl: (state) => state.popupParams.monitorUrl,
    monitorPopup: (state) => state.popupParams.monitorPopup,
    detailsPopup: (state) => state.popupParams.detailsPopup,
    popupImgAtlas: (state) => state.popupParams.popupImgAtlas,
    teachList: (state) => state.popupParams.teachList,
    liveList: (state) => state.popupParams.liveList
}
export default getters
  ...mobile,
  ...navigation,
  ...search,
  viewer: (state) => state.viewer.viewer,
  twoOrThree: (state) => state.viewer.twoOrThree,
  popupBgUrl: (state) => state.popupParams.popupBgUrl,
  pupupQRUrl: (state) => state.popupParams.pupupQRUrl,
  pointPosition: (state) => state.popupParams.pointPosition,
  terminus: (state) => state.popupParams.terminus,
  startingPoint: (state) => state.popupParams.startingPoint,
  stateName: (state) => state.popupParams.stateName,
  siteName: (state) => state.popupParams.siteName,
  telephone: (state) => state.popupParams.telephone,
  introduceText: (state) => state.popupParams.introduceText,
  panoramaUrl: (state) => state.popupParams.panoramaUrl,
  panoramaPopup: (state) => state.popupParams.panoramaPopup,
  monitorUrl: (state) => state.popupParams.monitorUrl,
  monitorPopup: (state) => state.popupParams.monitorPopup,
  detailsPopup: (state) => state.popupParams.detailsPopup,
  popupImgAtlas: (state) => state.popupParams.popupImgAtlas,
  teachList: (state) => state.popupParams.teachList,
  liveList: (state) => state.popupParams.liveList,
};
export default getters;

 src/store/modules/mobile.js

@@ -46,6 +46,7 @@
    tilesetLayer: null, //2.5d模型
    usetowpointfive: null,
    tilesetLayer: null, //瀑布流
    areaLayer: null, //2.5d事件--绿色图层

    vecLayer: null, //3D底图
    cvaLayer: null, //3D底图
@@ -177,6 +178,7 @@
        state.tilesetLayer.show = true; //显示3d图形
        state.startPointFn(); //移动默认视角
        // state.mviewer.flyTo(state.tileset);
        state.areaLayer.show = false; //绿布

        //3D视角不限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80;
@@ -208,7 +210,7 @@
        state.newLayer = state.usetowpointfive(); //添加2.5d图形贴片
        state.wallLayer.show = false; //打开瀑布
        state.startPointFn(); //移动默认视角

        state.areaLayer.show = true; //绿布
        //2.5D视角限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
        // 最大
@@ -225,6 +227,10 @@
        state.mviewer.scene.screenSpaceCameraController.enableTilt = false;
      }
    },
    //绿布
    MSET_areaLayer(state, data) {
      state.areaLayer = data;
    },
    //切换控制
    MSET_PERSPECTIVECONTROL(state, data) {
      state.perspectiveControl = data;