superMap cesium 实现地图

实现效果：

在入口文件中引入cesium：
lib文件：lib文件下载地址

  <script type="text/javascript" src="./lib/cesium/1.54.0/Cesium.js"></script>
   <script type="text/javascript" src="./lib/CesiumHeatmap/CesiumHeatmap.js"></script>

<template>
  <div class="map-content">
    <div id="mapHome3d"></div>
  </div>
</template>

<script>
let viewer = null;
export default {
  name: "map3D",
  data(){
    return{

    }
  },
  mounted() {
    viewer = new Cesium.Viewer("mapHome3d", {
      animation: false, // 动画小组件
      baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
      fullscreenButton: false, // 全屏组件
      vrButton: false, // VR模式
      geocoder: false, // 地理编码（搜索）组件
      homeButton: false, // 首页，点击之后将视图跳转到默认视角
      infoBox: false, // 信息框
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, // 时间轴
      navigationHelpButton: false, // 帮助提示，如何操作数字地球。
      // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
      navigationInstructionsInitiallyVisible: false,
      scene3DOnly: false,
      shouldAnimate: false,
      sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    });
    Cesium.Fullscreen.requestFullscreen(document.body)
    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = "none";
    viewer.scene.globe.depthTestAgainstTerrain = true;
    this.add3D();
    this.addScene();
  },
  methods:{
    add3D(){
      var layer = new Cesium.SuperMapImageryProvider({
        name: "imageProvider",
        minimumLevel: 1, //起始级别
        url: "http://XXXXX", //影像服务的地址
      });
      var imgLayer = viewer.imageryLayers.addImageryProvider(layer);


      viewer.scene.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
            104.055899335148,
            30.581568202223,
            3100
        ),
        orientation: {
          heading: -6.4053426301495345,
          pitch: -0.70632707158103625,
          roll: 6.283185307179586,
        },
      });
      viewer.scene.globe.depthTestAgainstTerrain = false;
    },
    addScene(){
      let scene = viewer.scene;
      //替换为需要使用的服务地址
      let promise = scene.open(
          //服务地址
          "http://XXXXXXX"
      );
      Cesium.when(
          promise,
          function (layers) {
            var layer = scene.layers.find("Config");

            //设置相机位置，定位至模型
            scene.camera.setView({
              //将经度、纬度、高度的坐标转换为笛卡尔坐标
              destination: Cesium.Cartesian3.fromDegrees(
                  104.055899335148,
                  30.581568202223,
                  3100
              ),
              orientation: {
                heading: -6.4053426301495345,
                pitch: -0.70632707158103625,
                roll: 6.283185307179586,
              },
            });
          },
          function () {
            var title = "加载SCP失败，请检查网络连接状态或者url地址是否正确？";
          }
      );
    },
  }
}
</script>

<style lang="less" scoped>
@import "src/assets/style/map3DStyle.less";

</style>

map3DStyle:

.map-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#mapHome3d{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    ::v-deep .cesium-viewer {
        width: 100% !important;
        height: 100% !important;
    }

    ::v-deep .cesium-viewer-cesiumWidgetContainer {
        width: 100% !important;
        height: 100% !important;
    }

    ::v-deep  .cesium-viewer-zoomIndicatorContainer{
        display: none !important;//隐藏底部圆圈
    }
    ::v-deep .cesium-widget {
        width: 100% !important;
        height: 100% !important;
    }
    ::v-deep .cesium-widget canvas {
        width: 100% !important;
        height: 100% !important;
    }

}