一张图图层控制修改，发布管理添加表格双击复制功能，发布管理页面模型附件管理页面修改，在线制图修改

Surpriseplus

2023-03-24 bab3c509ded84f1caa3d8e79a65b7113db8913df

 src/components/preview_map.vue

@@ -21,6 +21,115 @@
      >
      </el-tree>
    </div>
    <div
      v-if="editModelFlag"
      class="modelLayer box_divm"
    >
      <el-form
        ref="form"
        :model="modelForm"
        label-width="80px"
      >
        <el-form-item>
          <el-button
            size="small"
            @click="locateTo"
          >定位</el-button>
          <el-button
            size="small"
            @click="showTileset"
          >显隐</el-button>
          <el-button
            size="small"
            @click="underground"
          >地下</el-button>
          <el-button
            size="small"
            @click="pickupCoords"
          >拾取</el-button>
          <el-button
            size="small"
            @click="reload"
          >
            重载
          </el-button>
          <el-button
            size="small"
            @click="resave"
          >保存</el-button>
        </el-form-item>
        <el-form-item label="经度:">
          <el-input
            size="small"
            v-model="modelForm.lon"
            @input="update"
          ></el-input>
          <el-slider
            v-model="modelForm.lon"
            @input="update"
            :min="73"
            :step="0.001"
            :max="135"
          ></el-slider>
        </el-form-item>
        <el-form-item label="纬度:">
          <el-input
            size="small"
            v-model="modelForm.lat"
            @input="update"
          ></el-input>
          <el-slider
            v-model="modelForm.lat"
            @input="update"
            :min="3"
            :step="0.001"
            :max="54"
          ></el-slider>
        </el-form-item>
        <el-form-item label="高度:">
          <el-input
            size="small"
            v-model="modelForm.height"
            @input="update"
          ></el-input>
          <el-slider
            v-model="modelForm.height"
            :min="-800"
            :step="1"
            @input="update"
            :max="8800"
          ></el-slider>
        </el-form-item>
        <el-form-item label="角度:">
          <el-input
            size="small"
            v-model="modelForm.yaw"
            @input="update"
          ></el-input>
          <el-slider
            v-model="modelForm.yaw"
            :min="0"
            @input="update"
            :step="0.1"
            :max="360"
          ></el-slider>
        </el-form-item>
        <el-form-item label="透明度:">
          <el-input
            size="small"
            v-model="modelForm.alpha"
            @input="update"
          ></el-input>
          <el-slider
            v-model="modelForm.alpha"
            @input="update"
            :min="0"
            :step="0.01"
            :max="1"
          ></el-slider>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      :title="formInline.title"
@@ -220,11 +329,14 @@
        v-if="dialog.isJpg"
        class="pdfClass"
      >
        <img

        <el-image
          style="width:100%; height:100%"
          :src="dialog.src"
          alt=""
        />
          :preview-src-list="[dialog.src]"
        >
        </el-image>

      </div>
    </el-dialog>
  </div>
@@ -237,7 +349,9 @@
  comprehensive_insertModel,
  comprehensive_updateModel,
  comprehensive_selectFiles,
  dataQuery_deletes
  dataQuery_deletes,
  publish_update,
  comprehensive_selectPubById
} from '../api/api.js';
import { getToken } from '@/utils/auth';
export default {
@@ -299,6 +413,21 @@
        isJpg: false,
        src: ''
      },
      modelType: ['ifc', 'fbx', 'rvt', '3dml'],
      editModelFlag: false,
      modelForm: {
        lon: 119,
        lat: 39,
        height: 0,
        yaw: 0,
        alpha: 1
      },
      app: {
        tileset: null,
        isBusy: false,
        under: false,
        handler: null
      }
    }
  },
  mounted() {
@@ -434,15 +563,25 @@
    },
    async EditData() {
      const data = await comprehensive_updateModel(this.formInline)


      if (data.code != 200) {
        this.$message.error('修改失败');
      } else {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        return
      }
      this.startModelData();


      this.$message({
        message: '修改成功',
        type: 'success'
      });

      var that = this;
      that.dialogVisible = false;
      this.formInline.title = this.formInline.name
      that.dialogVisible = true;


    },
    async InsertData() {
      var std = {
@@ -456,13 +595,19 @@
      const data = await comprehensive_insertModel(std)
      if (data.code != 200) {
        this.$message.error('添加失败');
      } else {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }
      this.startModelData();
      this.$message({
        message: '添加成功',
        type: 'success'
      });

      var that = this;
      that.dialogVisible = false;
      this.formInline.title = this.formInline.name
      that.dialogVisible = true;




    },
    handleClose() {
@@ -548,14 +693,56 @@
            skipLevelOfDetail: true, // 在遍历时候跳过详情：false
          })
        );
        var that = this;
        tileset.readyPromise.then((tileset) => {
          tileset.id = res.cnName;
          tileset.layerId = res.id;
          this.tileSet(tileset, parseFloat(res.elev))
          Viewer.flyTo(tileset);
          that.getArgsTileset(tileset, res);
        });
      }
    },

    async getArgsTileset(tileset, res) {

      if (res.pubid > 0) {
        const data = await comprehensive_selectPubById({ id: res.pubid })

        if (data.code != 200) {

        } else {
          this.reloadTile(tileset, data.result.json)
        }
      } else {
        this.tileSet(tileset, parseFloat(res.elev))

      }
    },
    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);
      Viewer.flyTo(tileset);
    },
    reloadTile(tileset, res) {
      var vm = JSON.parse(res)
      var pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height);
      var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
      var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(vm.yaw), 0, 0);
      var matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
      tileset._root.transform = matrix;
      Viewer.flyTo(tileset);
    },



    handleCheckChange(data, checked, indeterminate) {
      if (data.type == 1) {
        this.getchilds(data);
@@ -591,17 +778,12 @@
    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;
@@ -612,14 +794,20 @@
      //开启深度检测
      // sg.Analysis.depthTestAgainstTerrain(true)
      Viewer.scene.globe.depthTestAgainstTerrain = true;


      // window.elevationTool = new SmartEarth.ElevationTool(window.sg);
      // elevationTool.setContourColor("#F1D487");
      var option = {
        url: window.sceneConfig.SGUrl,
        layerName: window.sceneConfig.mptName,
        requestVertexNormals: true,
      };
      window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");



      if (this.$store.state.previewLayer) {
        var res = this.$store.state.previewLayer;

        var type = res.type;
        if (res.url.indexOf('.png') != -1) {
          var wkt = this.$wkt.parse(res.geom);
          var height = this.getHeight(wkt.coordinates[2])
@@ -628,43 +816,182 @@
              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 if (res.url.indexOf('.mpt') != -1) {
          if (this.app.tileset) viewer.scene.primitives.remove(this.app.tileset);
          this.app.tileset = this.createTileset(res);
          var that = this;
          Viewer.scene.primitives.add(this.app.tileset).readyPromise.then(function (ts) {

            that.setModleLocatin()
            Viewer.flyTo(ts);
          });

        } else if (res.url.indexOf('.mpt') != -1) {
          Viewer.imageryLayers.removeAll();
          var url = res.url.split(';')


          sgworld.Creator.createImageryProvider('mpt影像', "wms", {
            url: url[0],
            layers: url[1]
          }, "0", undefined, true, "");

        } else if (res.url.indexOf('menuLayer') != -1) {
          this.setShowModelLayer();
        }
      }
    },
    async resave() {
      this.$store.state.previewLayer.json = JSON.stringify(this.modelForm);

      const data = await publish_update(this.$store.state.previewLayer);
      if (data.code != 200) {
        this.$message.error('数据保存失败');
      } else {
        this.$message({
          message: '数据保存成功',
          type: 'success'
        });
      }
      this.reload();
    },
    reload() {
      var json = JSON.stringify(this.modelForm);
      var url = this.$store.state.previewLayer.url;
      if (!url) return;
      if (this.app.tileset) Viewer.scene.primitives.remove(this.app.tileset);

      this.app.isBusy = true;
      this.app.tileset = this.createTileset(this.$store.state.previewLayer);
      var that = this;
      Viewer.scene.primitives.add(this.app.tileset).readyPromise.then(function (ts) {
        that.modelForm = JSON.parse(json);
        var pos = Cesium.Cartesian3.fromDegrees(parseFloat(that.modelForm.lon), parseFloat(that.modelForm.lat), parseFloat(that.modelForm.height));


        var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
        var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(parseFloat(that.modelForm.yaw)), 0, 0);
        var matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
        that.app.tileset._root.transform = matrix;
        Viewer.flyTo(ts);
        that.app.isBusy = false;
      });
    },

    //拾取
    pickupCoords() {
      if (this.app.handler) {
        this.app.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.app.handler = undefined;
        return;
      }
      var that = this;
      this.app.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      this.app.handler.setInputAction(function (event) {

        var ray = Viewer.camera.getPickRay(event.position);
        var cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var x = that.toFixed(Cesium.Math.toDegrees(cartographic.longitude), 7);
        var y = that.toFixed(Cesium.Math.toDegrees(cartographic.latitude), 7);
        var z = that.toFixed(cartographic.height, 3);

        that.modelForm.lon = x;
        that.modelForm.lat = y;
        that.modelForm.height = z;
        that.pickupCoords();
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 保留小数位
    toFixed(d, n) {
      var p = Math.pow(10, n);

      return Math.round(d * p) / p;
    },
    update() {
      this.setTilesetArgs(this.modelForm);
      sgworld.Analysis.UndergroundMode(this.app.under, this.modelForm.alpha)
    },
    setTilesetArgs(f) {

      if (!this.app.tileset || this.app.isBusy) return;

      var pos = Cesium.Cartesian3.fromDegrees(parseFloat(f.lon), parseFloat(f.lat), parseFloat(f.height));

      var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
      var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(parseFloat(f.yaw)), 0, 0);
      var matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
      var model = this.app.tileset
      model._root.transform = matrix;
    },
    //地下
    underground() {
      this.app.under = !this.app.under;
      sgworld.Analysis.UndergroundMode(this.app.under, this.modelForm.alpha)
    },
    //显隐
    showTileset() {
      if (!this.app.tileset) return;
      this.app.tileset.show = !this.app.tileset.show;
    },
    //定位
    locateTo() {
      if (!this.app.tileset) return;
      Viewer.flyTo(this.app.tileset);
    },
    createTileset(res) {
      return new Cesium.Cesium3DTileset({
        url: res.url,
        name: 'tsTest',
        skipLevelOfDetail: true, // 在遍历时候跳过详情：false
        baseScreenSpaceError: 1024,
        maximumScreenSpaceError: 64, // 最大屏幕空间错误：16，数值加大能让最终成像变模糊
        skipScreenSpaceErrorFactor: 16,
        skipLevels: 1,
        immediatelyLoadDesiredLevelOfDetail: false,
        loadSiblings: true, // 自动从中心开始超清化模型：false
        cullWithChildrenBounds: true, // 使用子项边界体积的并集来剔除图块：true
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除：60
        preloadWhenHidden: true,
        preferLeaves: true, // 预装子节点：false
        maximumMemoryUsage: 256, // 内存分配变小有利于内存回收，提升性能体验
        progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
        dynamicScreenSpaceErrorDensity: 0.5, // 数值加大，能让周边加载变快
        dynamicScreenSpaceErrorFactor: 2, // 动态屏幕空间误差的系数
        dynamicScreenSpaceError: true // 减少离相机较远的屏幕空间错误：false，全屏加载完之后才清晰化房屋
      });
    },
    setEditModelLayer(res) {
      this.editModelFlag = true;
      if (res.json) {
        var json = JSON.parse(res.json)
        this.modelForm = json;
        this.reload();
      } else {
        this.getTilesetArgs();
      }

    },
    setModleLocatin() {
      var res = this.$store.state.previewLayer;
      var type = res.type;
      if (this.modelType.indexOf(type) != -1) {
        this.setEditModelLayer(res)
      }
    },
    getTilesetArgs() {
      this.app.isBusy = true;
      var cm = this.app.tileset._root.transform;
      var cartesian = new Cesium.Cartesian3(cm[12], cm[13], cm[14]);
      var carto = Cesium.Cartographic.fromCartesian(cartesian);
      this.modelForm.lon = Cesium.Math.toDegrees(carto.longitude).toFixed(7);
      this.modelForm.lat = Cesium.Math.toDegrees(carto.latitude).toFixed(7);
      this.modelForm.height = carto.height.toFixed(3);
      this.app.isBusy = false;
    },

    async setShowModelLayer() {
      const data = await perms_selectLayers();
      if (data.code != 200) {
@@ -694,19 +1021,10 @@
                window.pickedColor = window.pickedFeature.color
                window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
                that.setShowModelInfo(pickedFeature);
                // this.$store.state.catModel = true;
                // this.$store.state.catModelInfo = {
                //   id: pickedFeature.getProperty("id"),
                //   name: pickedFeature.getProperty("name"),
                //   layerId: pickedFeature.primitive.layerId,
                //   layerName: pickedFeature.primitive.id
                // };
              }
            }
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)


      }
    },
    setTreeData(source) {
@@ -720,19 +1038,19 @@
        return father.pid == 430; // 返回一级菜单
      });
    },
    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);
    },
    // 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]
@@ -756,7 +1074,7 @@

    border: 1px solid #409eff;
    margin: 10px;
    max-height: 300px;
    max-height: 600px;
    overflow: auto;
  }
  .pdfClass {