北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2023-11-01 a35f963076eecf415487e4c9cc4c102903fec4d2
src/components/menu/tools/roam.vue
@@ -9,8 +9,7 @@
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button>
            <img src="@/assets/img/right/my/ljmy1.png" /> </el-button
          <el-button> <img src="@/assets/img/right/my/ljmy1.png" /> </el-button
        ></el-tooltip>
      </div>
      <div class="roamTool" @click="pointFly">
@@ -21,11 +20,10 @@
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button>
            <img src="@/assets/img/right/my/ddrf1.png" /> </el-button
          <el-button> <img src="@/assets/img/right/my/ddrf1.png" /> </el-button
        ></el-tooltip>
      </div>
      <div class="roamTool" @click="digitalCityHandle">
      <!-- <div class="roamTool" @click="digitalCityHandle">
        <el-tooltip
          class="item"
          effect="dark"
@@ -33,8 +31,40 @@
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button>
            <img src="@/assets/img/left/tx/kjbj.png" /> </el-button
          <el-button> <img src="@/assets/img/left/tx/kjbj.png" /> </el-button
        ></el-tooltip>
      </div> -->
      <div class="roamTool" @click="setRomanFly('核心区漫游')">
        <el-tooltip
          class="item"
          effect="dark"
          content="核心区漫游"
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button> <img src="@/assets/img/left/tx/ll.png" /> </el-button
        ></el-tooltip>
      </div>
       <div class="roamTool" @click="setRomanFly('景观绿地')">
        <el-tooltip
          class="item"
          effect="dark"
          content="景观绿地"
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button> <img src="@/assets/img/left/tx/ll.png" /> </el-button
        ></el-tooltip>
      </div>
       <div class="roamTool" @click="setRomanFly('政务服务窗口')">
        <el-tooltip
          class="item"
          effect="dark"
          content="政务服务窗口"
          placement="top-start"
          popper-class="item_tooltip"
        >
          <el-button> <img src="@/assets/img/left/tx/ll.png" /> </el-button
        ></el-tooltip>
      </div>
    </div>
@@ -54,7 +84,7 @@
  /* border-radius: 30px; */
  box-shadow: 0px 0px 10px rgba(101, 180, 253, 0.8) inset;
  background-color: rgba(5, 39, 126, 0.7);
  width: 200px;
  width: 300px;
}
.roamTools {
  margin-left: 20px;
@@ -67,8 +97,8 @@
  height: 40px;
  margin: 5px;
}
.roamTool img{
    margin: 4px;
.roamTool img {
  margin: 4px;
}
.roamTool:hover {
  background: rgba(0, 168, 255, 0.16);
@@ -123,7 +153,7 @@
<script>
window.PathAnimationData = {
  isFly: false
  isFly: false,
};
export default {
  name: "roam",
@@ -133,8 +163,8 @@
      isOpen: {
        pathRoaming: false,
        pointFly: false,
        digitalCity: false
      }
        digitalCity: false,
      },
    };
  },
  mounted() {
@@ -171,7 +201,7 @@
      }
      window.corePos = {
        lon: 116.51296,
        lat: 39.80143
        lat: 39.80143,
      };
      window.dCtiy = {};
@@ -182,11 +212,11 @@
        {
          effects: true,
          effectsMaxHeight: 60,
          colors: "rgba(0,127,255,1)"
          colors: "rgba(0,127,255,1)",
        },
        "0",
        true,
        data => {
        (data) => {
          Viewer.zoomTo(data.item);
        }
      );
@@ -198,13 +228,13 @@
        width: 4.0, //线的宽度
        pointColor: "#FFFFFF", //移动点的颜色
        speed: 8,
        far: 200000
        far: 200000,
      });
      //水面
      window.dCtiy.waterLayer = sgworld.Creator.createWaterPolygonLayer({
        url: "./static/water.json",
        speed: 5
        speed: 5,
      });
      // window.dCtiy.layers = sgworld.Creator.createUrlTemplateImageryProvider('tms服务', {
@@ -220,7 +250,7 @@
          enablePickFeatures: false,
          level: "0,26",
          tilingScheme: new Cesium.GeographicTilingScheme(),
          alpha: 1
          alpha: 1,
        },
        "0",
        undefined,
@@ -231,7 +261,7 @@
        this.setEffectVisibility(true);
      } else {
        window.sceneObj = [];
        window.KEYPOIS.forEach(item => {
        window.KEYPOIS.forEach((item) => {
          this.addDRW(item);
        });
@@ -254,10 +284,10 @@
        position: {
          lon: window.corePos.lon,
          lat: window.corePos.lat,
          height: 180
          height: 180,
        },
        multiple: 2.0,
        scale: new Cesium.Cartesian3(30, 30, 30)
        scale: new Cesium.Cartesian3(30, 30, 30),
      });
      window.sceneObj.push(Tetrahedrod);
    },
@@ -267,7 +297,7 @@
        west: 116.48379,
        south: 39.74328,
        east: 116.58084,
        north: 39.81983
        north: 39.81983,
      };
      let max = 800;
      let min = 500;
@@ -281,7 +311,7 @@
      let effect = sgworld.Creator.createFlyingLine(positions, {
        time: 2500,
        color: "#ffff00",
        far: 20000
        far: 20000,
      });
      window.sceneObj.push(effect);
    },
@@ -291,9 +321,9 @@
        position: {
          lon: window.corePos.lon,
          lat: window.corePos.lat,
          height: 10
          height: 10,
        },
        radius: 1300
        radius: 1300,
      });
      window.sceneObj.push(circle);
    },
@@ -302,7 +332,7 @@
      var center = {
        lon: window.corePos.lon,
        lat: window.corePos.lat,
        height: 180
        height: 180,
      };
      var cities = [
        { lon: 116.47861, lat: 39.80373 },
@@ -313,7 +343,7 @@
        { lon: 116.59732, lat: 39.78358 },
        { lon: 116.55501, lat: 39.77515 },
        { lon: 116.49845, lat: 39.75524 },
        { lon: 116.4882, lat: 39.78245 }
        { lon: 116.4882, lat: 39.78245 },
      ];
      let effect = sgworld.Creator.createTrailLinePath(center, cities, {
        width: 3, //线宽(可选)
@@ -321,11 +351,11 @@
        color: "#00ffff", //线颜色(可选),
        LightSpot: true, //是否使用光点效果(可选)
        LightSpotColor: "#ffffff", //光点颜色(可选)
        far: 40000
        far: 40000,
      });
      window.sceneObj.push(effect);
      cities.forEach(item => {
      cities.forEach((item) => {
        this.addDRW(item);
      });
    },
@@ -345,9 +375,9 @@
        position: {
          lon: item.lon,
          lat: item.lat,
          height: 1
          height: 1,
        },
        color: color
        color: color,
      });
      window.sceneObj.push(circle);
@@ -366,11 +396,11 @@
        position: {
          lon: item.lon,
          lat: item.lat,
          height: 1
          height: 1,
        },
        color: color,
        radius: 6,
        length: 300
        length: 300,
      });
      window.sceneObj.push(cone);
@@ -395,7 +425,7 @@
        {
          FontName: `16px SimSun`,
          IconColor: "#FFFFFF",
          MaxViewingHeight: 118500
          MaxViewingHeight: 118500,
        },
        0,
        ""
@@ -407,11 +437,11 @@
        position: {
          lon: window.corePos.lon,
          lat: window.corePos.lat,
          height: 0
          height: 0,
        },
        radius: 1300,
        length: 200,
        multiple: 1.5
        multiple: 1.5,
      });
      window.sceneObj.push(effect);
    },
@@ -435,7 +465,7 @@
      // this.isOpen["pathRoaming"] = true;
      sgworld.drawObj = sgworld.Command.execute(2, 3, "", data => {
      sgworld.drawObj = sgworld.Command.execute(2, 3, "", (data) => {
        if (!PathAnimationData.isFly) {
          data.showPoint = false;
          data.showLine = true;
@@ -458,15 +488,15 @@
                PathAnimationData.fly && PathAnimationData.fly.exit();
                layuiLayer.close(PathAnimationData.win_index);
                PathAnimationData = {
                  isFly: false
                  isFly: false,
                };
                this.isOpen.pathRoaming = false;
              },
              success: function(layero, index) {
              success: function (layero, index) {
                PathAnimationData.win_index = index;
              }
            }
              },
            },
          });
        }
      });
@@ -493,9 +523,64 @@
      sgworld.drawObj = sgworld.Analysis.setPointFly({
        end: () => {
          this.isOpen["pointFly"] = false;
        }
        },
      });
    }
  }
    },
    setRomanFly(params) {
      let degreesArr = [];
      switch (params) {
        case "核心区漫游":
          degreesArr = [
            116.493479, 39.80450483, 34.01816465, 116.5138085, 39.77947026,
            31.63330385,
          ];
          break;
        case "景观绿地":
          degreesArr = [
            116.4541689, 39.78062456, 30.4788207, 116.4618767, 39.7963431,
            31.87381588, 116.4687937, 39.79241793, 31.19379078, 116.4742798,
            39.78913405, 30.11803782, 116.4807703, 39.78743941, 31.48027437,
            116.4895578, 39.77782452, 32.63986152, 116.5090257, 39.77228768,
            30.07838461, 116.5147722, 39.76975519, 29.24082306, 116.5189657,
            39.76649988, 28.75245888, 116.5208586, 39.76202203, 27.34821356,
            116.5231743, 39.76039621, 27.75346174, 116.5353151, 39.76020156,
            22.34613339, 116.5555339, 39.76965707, 30.11293431, 116.5624811,
            39.77186726, 22.65879449, 116.5722676, 39.7769284, 27.11119094,
          ];
          break;
        case "政务服务窗口":
          degreesArr = [
            116.4961244, 39.80126862, 34.60044298, 116.4976219, 39.80200891,
            34.02444896, 116.500233, 39.79879928, 36.14055497, 116.5028255,
            39.79557196, 41.58378157, 116.5013282, 39.79495417, 35.38227236,
            116.4963272, 39.80094707, 33.82085563,
          ];
          break;
      }
      sgworld.Creator.getFlyData(degreesArr, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 0;
        // 弹窗数据
        window.PathAnimationData = {
          flyData: data,
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: "路径动画",
          shade: false,
          area: ["352px", "690px"],
          offset: "r",
          skin: "other-class",
          content: SmartEarthRootUrl + "Workers/path/Path.html",
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
        });
      });
    },
  },
};
</script>