Vue 使用超图SuperMap的实践

目录

• 前言
• 相关资料
• vue项目引入二维超图
• 超图二维案例

• 引库

• 第一种导入地形图和影像
• 加载 S3M 图层
• 添加 MVT 图层

npm install @supermap/iclient-ol

<link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css' rel='stylesheet' />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' 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', {
    //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
    terrainProvider: new Cesium.CesiumTerrainProvider({
    url: 'http://localhost:8090/iserver/services/3D-DiXing/rest/realspace/datas/地形_Terrain',  // 加载地形图，是datas下面的链接
    isSct: true,//地形服务源自SuperMap iServer发布时需设置isSct为true
    invisibility: true
  }),
});

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

// 简单定义相机视角位置
this.scene.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(108.19, 40.39, 1000000)
});

// 添加河流S3M图层，open会将改文件路径下的所有图层信息导入地图
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('长江')  // 根据名称查询图层 这个名字是图层连接对应的名字，不是自己起的
  layer.style3D.bottomAltitude = 1150  // 设置该层在地图的高度，根据需要是否设置
  this.viewer.zoomTo(layer);   // 图层定位到该模型位置
})

// 添加草地 MVT 图层
this.mc = {
  url: 'http://localhost:8090/iserver/services/CAODI/rest/maps/CD',   //MVT的服务地址
  canvasWidth: 512,
  name: '草地',  // 图层的名字，不是自己起的，是这个连接对应的图层名字
  viewer: that.viewer
}
this.McMvtMap = this.scene.addVectorTilesMap(this.mc);

this.scene.removeVectorTilesMap(McMvtMap.name);

this.scene.globe.depthTestAgainstTerrain = false;