管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-03-22 3f3adb45c6c8c37567122dd9e361f14d88516b3b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<template>
  <div
    id="mapdiv"
    class="previewBox"
  ></div>
</template>
 
<script>
export default {
  data() {
    return {
      levelArray: [
        0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
        250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
        100, 50, 25, 10, 0,
      ],
    }
  },
  mounted() {
    this.init3DMap();
  },
  methods: {
    init3DMap() {
      //地图初始化
      window.sgworld = new SmartEarth.SGWorld("mapdiv", {
 
        licenseServer: window.sceneConfig.licenseServer,
      });
 
      window.Viewer = window.sgworld._Viewer;
 
      // Viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),
      // });
 
 
      Viewer._enableInfoOrSelection = false;
      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false;
      //导航控件
      // window.sgworld.navControl("nav", false);
      //比例尺
      // window.sgworld.navControl("scale", false);
      //开启深度检测
      // sg.Analysis.depthTestAgainstTerrain(true)
      Viewer.scene.globe.depthTestAgainstTerrain = true;
 
 
      // window.elevationTool = new SmartEarth.ElevationTool(window.sg);
      // elevationTool.setContourColor("#F1D487");
 
      if (this.$store.state.previewLayer) {
        var res = this.$store.state.previewLayer;
 
        if (res.url.indexOf('.png') != -1) {
          var wkt = this.$wkt.parse(res.geom);
          var height = this.getHeight(wkt.coordinates[2])
          window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
              url: res.url,
              maximumLevel: 18
            })
 
          );
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height),
          });
        } else if (res.url.indexOf('.json') != -1) {
          var tileset = Viewer.scene.primitives.add(
            new Cesium.Cesium3DTileset({
              url: res.url, //192.168.20.106,to4
              maximumScreenSpaceError: 64, // 最大屏幕空间错误:16
              maximumMemoryUsage: 768, // 最大内存:512
              dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误:false
              skipLevelOfDetail: true, // 在遍历时候跳过详情:false
            })
          );
          tileset.readyPromise.then((tileset) => {
            tileset.id = res.cnName;
            tileset.layerId = res.id;
            this.tileSet(tileset, 50)
            Viewer.flyTo(tileset);
          });
        } else {
 
          Viewer.imageryLayers.removeAll();
          var url = res.url.split(';')
 
 
          sgworld.Creator.createImageryProvider('mpt影像', "wms", {
            url: url[0],
            layers: url[1]
          }, "0", undefined, true, "");
 
        }
      }
    },
    tileSet(tileset, height) {
      //3dtile模型的边界球体
      var boundingSphere = tileset.boundingSphere;
      //迪卡尔空间直角坐标=>地理坐标(弧度制)
      var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
      //地理坐标(弧度制)=>迪卡尔空间直角坐标
      var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
      var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
      //获得地面和offset的转换
      var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
      //修改模型矩阵
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    },
    getHeight(level) {
      if (level > 0 && level < 23) {
        return this.levelArray[level]
      }
      return this.levelArray[this.levelArray.length - 1]
    },
 
  },
 
}
</script>
 
<style>
.previewBox {
  width: 100%;
  height: 100%;
}
</style>