+

liuyg

2021-12-31 b41db64b0dc4c5fecb40caf788a1a80e7e4e7eb5

 src/components/mobilemap/index.vue

@@ -33,8 +33,43 @@
      bigPopup: {
        width: 0,
        height: 0,
        // transition: "all 3s",
      },
      // transition: "all 3s",
      wallArr: [
        [116.41526036, 27.95352217, 100],
        [116.41128018, 27.95789328, 100],
        [116.40246486, 27.9639711, 100],
        [116.39728537, 27.96779573, 100],
        [116.39588026, 27.96862679, 100],
        [116.38903705, 27.97029865, 100],
        [116.38872398, 27.97051829, 100],
        [116.38892229, 27.9709012, 100],
        [116.38906721, 27.97190632, 100],
        [116.38706808, 27.97195638, 100],
        [116.38649076, 27.97114448, 100],
        [116.3821407, 27.97312735, 100],
        [116.37876213, 27.97582549, 100],
        [116.3785131, 27.97664153, 100],
        [116.37634915, 27.98039526, 100],
        [116.3743922, 27.98131916, 100],
        [116.36995935, 27.97936074, 100],
        [116.37217247, 27.97498147, 100],
        [116.35099819, 27.97539586, 100],
        [116.35103749, 27.9808805, 100],
        [116.3397246, 27.97987911, 100],
        [116.33950071, 27.97372028, 100],
        [116.32313266, 27.97004136, 100],
        [116.32606743, 27.95863979, 100],
        [116.34788837, 27.92538024, 100],
        [116.3456631, 27.92338627, 100],
        [116.3487449, 27.91718915, 100],
        [116.35311999, 27.91804451, 100],
        [116.35109257, 27.92284807, 100],
        [116.35975153, 27.92900526, 100],
        [116.35660704, 27.93816236, 100],
        [116.39585177, 27.93945304, 100],
        [116.41526036, 27.95352217, 100],
      ],
    };
  },
  computed: {
@@ -46,6 +81,8 @@
      "iconHide",
      "popupsDom",
      "MobileWindowsHideFixed",
      "dimension",
      "dimensionData",
    ]),
  },
  watch: {
@@ -138,14 +175,23 @@
      });
      that.$refs.mobileLeftNav.initialize(viewer);
      that.$store.commit("MSET_VIEWER", viewer);
      // window.mviewer = viewer;
      // that.$store.commit("MSET_DC", DC);
      const popup = viewer.popup;

      popup.hide();

      const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });
      // const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      // });
      const baselayer = that.DC.ImageryLayerFactory.createImageryLayer(
        that.DC.ImageryType.XYZ,
        {
          // url: 'https://webmap-tile.sf-express.com/MapTileService/rt?x={col}&y={row}&z={level}'

          url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
        }
      );
      viewer.addBaseLayer(baselayer, {
        iconUrl: "examples/images/icon/img.png",
        name: "影像",
@@ -186,67 +232,410 @@
        if (!that.MobileWindowsHide) {
          // that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
        }
        // if (!that.MobileWindowsHideFixed) {
        //   that.$store.dispatch("CLOSE_WIDOWFIXED"); //关闭固定弹窗
        // }
        // if (!that.MobileWindowsHide && that.popupsDom) {
        //   that.popupsDom.closeOur();
        //   that.$store.commit("MSET_MOBILEWINDOWSHIDE", true);
        // }
        // nowPosition = [e.wgs84Position.lng, e.wgs84Position.lat];
        // console.log(nowPosition);
        // let height = Math.ceil(viewer.camera.positionCartographic.height);
        // console.log(height);
      });

      const layer = new DC.TilesetLayer("layer");
      viewer.addLayer(layer);
      const tileset = new DC.Tileset(
        "http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json"
      // viewer.on(that.DC.SceneEventType.CAMERA_MOVE_END, (e) => {
      viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => {
        //相机移动最后参数
        //控制高度
        const height = Math.ceil(viewer.camera.positionCartographic.height);
        let conBack = (height) => {
          viewer.camera.setView({
            destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
              viewer.camera.positionCartographic.longitude,
              viewer.camera.positionCartographic.latitude,
              height
            ),
            orientation: {
              heading: that.DC.Namespace.Cesium.Math.toRadians(
                that.dimensionData.heading
              ), // 方向
              pitch: that.DC.Namespace.Cesium.Math.toRadians(
                that.dimensionData.pitch
              ), // 倾斜角度
              roll: that.dimensionData.roll,
            },
          });
        };
        // if (height < 300) {
        //   conBack(300);
        // }
        // if (height > 2000) {
        //   conBack(2000);
        // }
        if (height < 500) {
          conBack(500);
        }
        if (height > 6000) {
          conBack(6000);
        }
      });

      // 地图点击事件
      // viewer.on(DC.MouseEventType.CLICK, (e) => {
      //   // console.log(e);
      //   // 定制化窗体
      //   that.openPopupS(
      //     e.position,
      //     [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
      //     {
      //       name: "地图点击",
      //       address: [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
      //       introduce: [e.windowPosition.x, e.windowPosition.y],
      //       from: "地图点击",
      //     }
      //   );
      // });

      //白模型↓
      // const layer = new DC.TilesetLayer("layer");
      // viewer.addLayer(layer);
      // const tileset = new DC.Tileset(
      //   "http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json"
      // );
      // const style = new DC.TilesetStyle();
      // style.color = {
      //   conditions: [
      //     ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
      //     ["${Height} >= 200", "rgb(102, 71, 151)"],
      //     ["${Height} >= 100", "rgb(170, 162, 204)"],
      //     ["${Height} >= 50", "rgb(224, 226, 238)"],
      //     ["${Height} >= 25", "rgb(252, 230, 200)"],
      //     ["${Height} >= 10", "rgb(248, 176, 87)"],
      //     ["${Height} >= 5", "rgb(198, 106, 11)"],
      //     ["true", "rgb(127, 59, 8)"],
      //   ],
      // };

      // viewer.use(new DC.Measure());

      // tileset.setStyle(style);
      // layer.addOverlay(tileset);
      // viewer.flyTo(tileset);
      //白模型↑

      //精细模型↓
      const tilesetLayer = new that.DC.TilesetLayer("tilesetLayer");
      viewer.addLayer(tilesetLayer);
      const tileset = new that.DC.Tileset(
        "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
        {
          luminanceAtZenith: 0.5,
        }
      );
      const style = new DC.TilesetStyle();
      style.color = {
        conditions: [
          ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
          ["${Height} >= 200", "rgb(102, 71, 151)"],
          ["${Height} >= 100", "rgb(170, 162, 204)"],
          ["${Height} >= 50", "rgb(224, 226, 238)"],
          ["${Height} >= 25", "rgb(252, 230, 200)"],
          ["${Height} >= 10", "rgb(248, 176, 87)"],
          ["${Height} >= 5", "rgb(198, 106, 11)"],
          ["true", "rgb(127, 59, 8)"],
        ],
      tilesetLayer.addOverlay(tileset);
      // tilesetLayer.show = false;

      let silhouetteBlue =
        that.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
      silhouetteBlue.uniforms.color = that.DC.Namespace.Cesium.Color.fromBytes(
        9,
        162,
        40
      );
      silhouetteBlue.uniforms.length = 0.01;
      silhouetteBlue.selected = [];

      viewer.scene.postProcessStages.add(
        that.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage([
          silhouetteBlue,
        ])
      );

      var highlighted = {
        feature: undefined,
        originalColor: new that.DC.Namespace.Cesium.Color(),
      };

      viewer.use(new DC.Measure());

      tileset.setStyle(style);
      layer.addOverlay(tileset);
      viewer.flyTo(tileset);

      var selected = {
        feature: undefined,
        originalColor: new that.DC.Namespace.Cesium.Color(),
      };
      //点击事件
      tileset.on(DC.MouseEventType.CLICK, (e) => {
        // that.popupFlag = true
        // that.popupWindow = true;

        viewer.scene.globe.depthTestAgainstTerrain = false;

        // console.log(document.getElementById("mobile-map_content_content"));
        // console.log(e);

        viewer.flyToPosition(
          new that.DC.Position(115.87186406, 28.74449337, 1800, 0, 45, 0)
        );

        // 定制化窗体
        that.openPopupS(e.position, [e.wgs84Position.lng, e.wgs84Position.lat]);
        that.openPopupS(
          e.position,
          [e.wgs84Position.lng, e.wgs84Position.lat],
          {
            name: e.layer._bid,
            address: e.layer.type,
            introduce: e.layer._id,
          }
        );
        //高亮
        silhouetteBlue.selected = [];

        // popup.setWrapper('<div></div>')
        if (that.DC.Namespace.Cesium.defined(highlighted.feature)) {
          highlighted.feature.color = highlighted.originalColor;
          highlighted.feature = undefined;
        }

        // popup.showAt(e.position, document.getElementById('modelPopup'))
        if (e.feature !== selected.feature) {
          silhouetteBlue.selected = [e.feature];

          highlighted.feature = e.feature;

          that.DC.Namespace.Cesium.Color.clone(
            e.feature.color,
            highlighted.originalColor
          );
          e.feature.color = that.DC.Namespace.Cesium.Color.fromBytes(
            155,
            255,
            175
          );
        }
      });
      //移动事件
      // tileset.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => {
      //   silhouetteBlue.selected = [];

      //   if (that.DC.Namespace.Cesium.defined(highlighted.feature)) {
      //     highlighted.feature.color = highlighted.originalColor;
      //     highlighted.feature = undefined;
      //   }

      //   if (e.feature !== selected.feature) {
      //     silhouetteBlue.selected = [e.feature];

      //     highlighted.feature = e.feature;

      //     that.DC.Namespace.Cesium.Color.clone(
      //       e.feature.color,
      //       highlighted.originalColor
      //     );
      //     e.feature.color = that.DC.Namespace.Cesium.Color.fromBytes(
      //       155,
      //       255,
      //       175
      //     );
      //   }
      // });
      tilesetLayer["changesilhouetteBlue"] = () => {
        silhouetteBlue.selected = [];
      };
      tilesetLayer.show = false;
      //精细模型↑

      // 2.5D贴图↓
      let usetowpointfive = () => {
        var provider =
          new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: "http://www.tdtfz.com/OneMapServer/rest/services/fzsw2019/MapServer/WMTS/tile/1.0.0/fzsw2019/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",
            layer: "fzsw2019",
            style: "default",
            tileMatrixSetID: "default028mm",
            format: "image/jpgpng",
            tilingScheme: new that.DC.Namespace.Cesium.GeographicTilingScheme(),
            maximumLevel: 19,
            tileMatrixLabels: [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
            ],
          });
        return viewer.imageryLayers.addImageryProvider(provider);
      };

      const newLayer = usetowpointfive();
      // 2.5D贴图↑
      let startPoint;
      if (false) {
        startPoint = () => {
          viewer.flyTo(tileset);
          // that.$store.dispatch("mapFlyTo", {
          //   //飞入
          //   lntLat: [115.87988885, 28.72502592, 2100],
          //   // lntLat: [115.87186406, 28.74449337, 1200],
          //   // lntLat: [121.50492752204283, 31.21567802276832, 2530],
          //   heading: 0,
          //   pitch: -45,
          //   roll: 0,
          //   noOpen: true,
          // });
        };
        setTimeout((res) => {
          //转圈
          that.$store.dispatch("mapFlyTo", {
            lntLat: [111.25036579, 34.83767277, 11443175.85],
            heading: 0,
            pitch: -90,
            roll: 0,
            noOpen: true,
            fn: function () {
              // viewer.flyTo(tileset);
              // viewer.flyTo(provider);
              //飞入起始点
              // that.$store.dispatch("mapFlyTo", {
              //   lntLat: [115.87186406, 28.74449337, 1200],
              //   heading: 0,
              //   pitch: -45,
              //   roll: 0,
              //   noOpen: true,
              // });

              startPoint();
            },
          });
          // viewer.flyTo(tileset);
        }, 2500);
      } else {
        startPoint = (val) => {
          // viewer.zoomToPosition(
          //   new DC.Position(115.86798885, 28.72502592, 2100, 0, -45)
          // );
          let doit = (int) => {
            if (val == 1) {
              viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                  // 116.390060025,
                  // 27.95649473,
                  // 2000.0
                  int[0],
                  int[1],
                  int[2]
                ),
                orientation: {
                  // 指向
                  heading: that.DC.Namespace.Cesium.Math.toRadians(
                    that.dimensionData.heading
                  ),
                  // 视角
                  pitch: that.DC.Namespace.Cesium.Math.toRadians(
                    that.dimensionData.pitch
                  ),
                  roll: that.dimensionData.roll,
                },
              });
            } else {
              that.$store.dispatch("mapFlyTo", {
                lntLat: [+int[0] + 0.012, int[1], int[2]],
                // 指向
                heading: that.dimensionData.heading,
                // 视角
                pitch: that.dimensionData.pitch,
                roll: that.dimensionData.roll,
                noOpen: true,
              });
            }
          };
          that.dimension == "2.5D"
            ? doit([116.36618337, 27.95911915, 2000.0])
            : doit([117.08513731, 31.64790556, 600.0]);
        };
        startPoint(1);
      }
      //传递默认位置
      that.$store.commit("MSET_MORENWEIZHI", startPoint);
      // let position = Cesium.Cartesian3.fromDegrees(108, 25, 0); //中心点位置
      // let cameraLimit = new xt3d.CameraDominate.CameraLimit(
      //   viewer,
      //   position,
      //   {
      //     radius: 2000,
      //     debugExtent: true,
      //   }
      // );

      // const currentViewRect = viewer.camera.computeViewRectangle();//东南西北数据
      // console.log(currentViewRect, 78);

      //瀑布流↓
      const wallLayer = new that.DC.VectorLayer("wallLayer");
      viewer.addLayer(wallLayer);
      var arr = that.wallArr;
      arr.forEach((item) => {
        item = item.join(",");
      });
      arr = arr.join(";");
      const wall = new that.DC.Wall(arr);
      wall.setStyle({
        material: new that.DC.WallTrailMaterialProperty({
          color: that.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150),
          // color: that.DC.Color.DEEPSKYBLUE,
          speed: 4,
        }),
      });
      wallLayer.addOverlay(wall);

      viewer.use(new that.DC.Measure());
      //瀑布流↑

      // 传入store
      that.$store.commit("MSET_MODEOLS", {
        tilesetLayer: tilesetLayer,
        tileset: tileset,
        newLayer: newLayer,
        wallLayer: wallLayer,
        usetowpointfive: usetowpointfive,
      });

      // viewer.zoomToPosition(
      //     new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
      // )
      //飞入起始点
      // that.$store.dispatch("mapFlyTo", {
      //   lntLat: [115.87186406, 28.74449337, 1200],
      //   heading: 0,
      //   pitch: -45,
      //   roll: 0,
      //   noOpen: true,
      // });
      //地图渲染完成执行srore中MSET_CREADE
      // that.$store.dispatch("MSET_CREADE");

      viewer.compass.enable = false;
      viewer.zoomController.enable = true;
      viewer.locationBar.enable = false;
      viewer.distanceLegend.enable = true;
      viewer.distanceLegend.enable = false;
      if (true) {
        // viewer.scene.screenSpaceCameraController.enableZoom = false; //控制视角缩放
        // viewer.scene.screenSpaceCameraController.enableTilt = false; //控制视角旋转
        // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200; //最小缩放
        // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1900; //最大缩放
        // 2D和哥伦布视图
        // 控制视角平移：scene.screenSpaceCameraController.enableTranslate = true;
        // 最小
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500;
        // 最大
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000;
        // 设置相机缩小时的速率
        viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000;
        // 设置相机放大时的速率
        viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
        viewer.scene.screenSpaceCameraController.enableRotate = true;
        // 视角缩放
        viewer.scene.screenSpaceCameraController.enableZoom = true;
        // 视角旋转
        viewer.scene.screenSpaceCameraController.enableTilt = false;
      }
    }

    DC.ready(initViewer);
@@ -258,7 +647,7 @@
      let d = {
        position,
        lntLat,
        query: { ...(query || {}), introduce: position, address: lntLat },
        query: { introduce: position, address: lntLat, ...(query || {}) },
        useJWD: true, //仅使用经纬度
      };
      that.$store.dispatch("setMobileWindows", d);