cesium只展示某个区域市省地图

效果如下所示：

主要是调用_c_add_geojson_area方法

代码如下：geojson数据获取：DataV.GeoAtlas地理小工具系列

<template>
  <div class="mapBox">
    <div id="cesium" ref="cesium"></div>
  </div>
</template>

<script>
import mapMixin from "./js/mapMixin";
import geojson from "./js/data/town.json";
export default {
  data() {
    return {
      viewer:null,
      tilesets:null
    }
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南东北，默认显示中国
      this.viewer = new Cesium.Viewer("cesium", {
        animation: false, //是否显示动画控件
        homeButton: false, //是否显示home键
        geocoder: false,// 查询
        baseLayerPicker: false, //是否显示图层选择控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false, //是否全屏显示
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: false, //是否显示点击要素之后显示的信息
        sceneModePicker: false, //是否显示投影方式控件  三维/二维
        navigationHelpButton: false, //是否显示帮助信息控件
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        }),
        terrainProvider: new Cesium.CesiumTerrainProvider({ 
          url: "http://data.marsgis.cn/terrain"
        }),
        skyAtmosphere:false,
        // orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
      });
      // 设置基本属性
      this.viewer.scene.sun.show = false; 
      this.viewer.scene.moon.show = false;
      this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
      this.viewer.scene.undergroundMode = true; 
      this.viewer.scene.globe.show = true; 
      this.viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        this.viewer.resolutionScale = window.devicePixelRatio;
      }
      this.viewer.scene.fxaa = true;
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // 隐藏版权
      this.viewer._cesiumWidget._creditContainer.style.display = "none";

      this.viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          120.952811,31.854272,
          6000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-40),
          roll: Cesium.Math.toRadians(0), //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。
        },
      });
      mapMixin.viewer = this.viewer

      mapMixin._c_add_geojson_area(geojson)   // 只显示区域地图
    },
  },
  }
</script>
<style lang='scss'>
.mapBox{
  width: 100%;
  height: 100%;
  #cesium{
    width: 100%;
    height: 100%;
    padding:20px;
    box-sizing: border-box;
  }
  .cesium-selection-wrapper,.cesium-selection-wrapper-visible{
    display: none!important;
  }
}
</style>

 _c_add_geojson_area方法代码如下：

// 只展示geojson地图
    _c_add_geojson_area: function(geojson){
      console.log(geojson.features[0].geometry.coordinates[0]);
      let arr = []
      geojson.features[0].geometry.coordinates[0][0].forEach(item => {
        arr.push(item[0])
        arr.push(item[1])
      });
      console.log(arr);
      var polygonWithHole = new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([73.0, 53.0, 73.0, 0.0, 135.0, 0.0, 135.0, 53.0]), 
            [new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(arr))]
          )
      });
      var geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole);
      let instances = [];
      instances.push(new Cesium.GeometryInstance({
          geometry: geometry,
          attributes: {
              color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#081122"))
          }
      }));
      function addRect(instances, left, down, right, up) {
        instances.push(new Cesium.GeometryInstance({
          geometry: new Cesium.RectangleGeometry({
            rectangle: Cesium.Rectangle.fromDegrees(left, down, right, up)
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#081122"))
          }
        }));
      }
      addRect(instances, -180.0, -90.0, 73.0, 90.0);
      addRect(instances, 135.0, -90.0, 180.0, 90.0);
      addRect(instances, 73.0, 53.0, 135.0, 90.0);
      addRect(instances, 73.0, -90.0, 135.0, 0.0);
      this.viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: instances,
        appearance: new Cesium.PerInstanceColorAppearance({
          flat: true,
          translucent: false
        })
      }));
    },