npm install @supermap/iclient-ol

<link  rel='stylesheet' />

<link  rel='stylesheet' />

{
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/@supermap')]
},

  import Map from 'ol/Map';
  import View from 'ol/View';
  import TileLayer from 'ol/layer/Tile';
  import * as control from 'ol/control';
  import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';

<div id="map"></div>

        var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
        this.map = new Map({
          target: 'map',
          controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
          view: new View({
            center: [106.86, 39.71],
            // maxZoom: 18,
            // minZoom: 2,
            zoom: 5,
            projection: 'EPSG:4326',
          })
        });
        var layer = new TileLayer({
          source: new TileSuperMapRest({
            url: url,
            wrapX: true
          }),
          projection: 'EPSG:4326'
        });
        this.map.addLayer(layer);

<link rel="stylesheet" href="./static/Cesium/Widgets/widgets.css" rel="external nofollow" >
<script type="text/javascript" src="./static/Cesium/Cesium.js"></script>
<script type="text/javascript" src="./static/Cesium/Workers/zlib.min.js"></script>

<div id="map" style="width: 100%;height:95%"></div>

var viewer = new Cesium.Viewer('map')

var viewer = new Cesium.Viewer('map', {
    //創(chuàng)建地形服務(wù)提供者的實(shí)例，url為SuperMap iServer發(fā)布的TIN地形服務(wù)
    terrainProvider: new Cesium.CesiumTerrainProvider({
    url: 'http://localhost:8090/iserver/services/3D-DiXing/rest/realspace/datas/地形_Terrain',  // 加載地形圖，是datas下面的鏈接
    isSct: true,//地形服務(wù)源自SuperMap iServer發(fā)布時(shí)需設(shè)置isSct為true
    invisibility: true
  }),
});

// 添加底層影像
var layer = new Cesium.SuperMapImageryProvider({
    url: 'http://localhost:8090/iserver/services/YingXiang/rest/maps/影像底圖'  //影像服務(wù)的地址 rest格式
});
var imgLayer = this.viewer.imageryLayers.addImageryProvider(layer)

// 簡單定義相機(jī)視角位置
this.scene.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(108.19, 40.39, 1000000)
});

// 添加河流S3M圖層，open會將改文件路徑下的所有圖層信息導(dǎo)入地圖
var promise = this.scene.open("http://localhost:8090/iserver/services/CJ/rest/CJ");
Cesium.when.all([promise], function (layers) {
  let layer = that.scene.layers.find('長江')  // 根據(jù)名稱查詢圖層 這個(gè)名字是圖層連接對應(yīng)的名字，不是自己起的
  layer.style3D.bottomAltitude = 1150  // 設(shè)置該層在地圖的高度，根據(jù)需要是否設(shè)置
  this.viewer.zoomTo(layer);   // 圖層定位到該模型位置
})

// 添加草地 MVT 圖層
this.mc = {
  url: 'http://localhost:8090/iserver/services/CAODI/rest/maps/CD',   //MVT的服務(wù)地址
  canvasWidth: 512,
  name: '草地',  // 圖層的名字，不是自己起的，是這個(gè)連接對應(yīng)的圖層名字
  viewer: that.viewer
}
this.McMvtMap = this.scene.addVectorTilesMap(this.mc);

this.scene.removeVectorTilesMap(McMvtMap.name);

this.scene.globe.depthTestAgainstTerrain = false;