ojk_dtb_manage_ui/src/components/map/CesiumMap.vue

<template>
  <el-dialog v-if="isShow"
             :model-value="isShow"
             title="地理信息"
             :width="1200"
             :close-on-click-modal="false"
             :before-close="handleClose"

  >
    <div id="mapBox" >
      <!--<div id="mapOperation">-->
      <!--  <el-button>点标记</el-button>-->
      <!--  <el-button>线标记</el-button>-->
      <!--  <el-button>面标记</el-button>-->
      <!--</div>-->
      <div id="mapContainer">

      </div>
    </div>

    <template #footer>
      <el-button type="primary">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import 'cesium/Widgets/widgets.css'
import CesiumMarker from "@/static/js/CesiumMarker";

export default {
  data() {
    return {
      viewer: '',
      drawData: {
        points: [],
        lines: [],
        polygons: []
      },
      cesiumConfig: {
        animation: false, //动画控制不显示
        timeline: false, //时间线不显示
        fullscreenButton: false, //全屏按钮不显示
        imageryProvider: new Cesium.SingleTileImageryProvider({
          url: (function createColorCanvas(color) {
            let width = 1,
                height = 1;
            let canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            let ctx = canvas.getContext("2d");
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, width, height);
            return canvas.toDataURL();
          })("#ffffff00"),
          rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        }),
        infoBox: false,
        baseLayerPicker: false, //地图切换不显示
        geocoder: false,
        homeButton: false,
        selectionIndicator: false, // 去除绿色选择框
        sceneModePicker: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible:false,
        scene3DOnly: true, // 仅以3D渲染以节省GPU内存
        useBrowserRecommendedResolution: true, // 以浏览器建议的分辨率渲染
      },
    }
  },
  props: {
    isShow: Boolean,
    item: Object,
    close: Function
  },
  watch: {
    "isShow": function (val) {
      this.initMap();
    }
  },
  mounted() {
    this.$util.loading.handleLoading(true)
    this.initMap();
  },
  methods: {
    initMap() {
      let app = this;
      this.$nextTick(()=>{
        app.viewer = new Cesium.Viewer('mapContainer', app.cesiumConfig);
        app.viewer.scene.preRender.addEventListener(function () {
          app.loading = true;
        })
        app.viewer.scene.postRender.addEventListener(function () {
          app.loading = false;
        })
        // 加载模型
        if (app.item.url && app.item.url!=='') {
          app.add3DTiles(app.viewer, app.item.url)
        } else {
          app.$util.loading.handleLoading(false)
        }
      });
    },
    // 添加模型
    add3DTiles(viewer, url){
      let app = this;
      let tileset = new Cesium.Cesium3DTileset({
        url: url,
        skipLevelOfDetail: true, //开启跳级加载
        maximumScreenSpaceError: 16,
        maximumNumberOfLoadedTiles: 2000,
        maximumMemoryUsage: 512,//tileset可以使用的最大内存
        show: true,
        immediatelyLoadDesiredLevelOfDetail: true,
      });
      tileset.allTilesLoaded.addEventListener(function() {
        app.$util.loading.handleLoading(false)
      });
      tileset.tileFailed.addEventListener(function (err) {
        app.$util.loading.handleLoading(false);
        app.$message({message: '模型加载失败', type: 'error'});
        app.handleClose()
      })
      viewer.scene.primitives.add(tileset);
      tileset.show=true;
      tileset.readyPromise.then(function () {
        viewer.zoomTo(tileset, {
          heading: 2.718565,
          pitch: -0.415366,
          roll: 0.0,
        });
      }).catch(err=>{
        app.$util.loading.handleLoading(false);
        app.$message({dangerouslyUseHTMLString: true, message: '模型加载失败，'+err.statusCode+'：'+err.response, type: 'error'});
        app.handleClose()
      });
      return tileset;
    },
    handleClose() {
      this.close(false)
    }
  }
}
</script>

<style scoped>
#mapBox {
  width: 100%;
  height: 100%;
}
#mapContainer {
  width: 100%;
  height: 100%;
}
#mapOperation {
  margin-bottom: 10px;
}
</style>

<style>
/*隐藏 cesium logo*/
.cesium-widget-credits{
  display: none !important;
}
.el-dialog__body {
  padding-top: 10px;
}
</style>