Vue 使用超圖 SuperMap

前言

怎么講呢，稀里糊塗的接了個電話，稀里糊塗的收到個臨時任務，稀里糊塗的出了一次差，稀里糊塗的搞了幾天超圖，超圖這個東西確實厲害，但是需要消耗一定的時間才能學會，因為他的功能相對來說比較強大，功能點實在是太多，不是一時半會就可以入門開發的，加油吧！我也是一個小白，但是推了好久，還是在這里稍微整理一下vue項目引入超圖的一些方法和步驟，希望在以后可以幫助一些需要使用但是又沒有方向的同行小白。僅供參考，不可盡信。

相關資料

可能是用的人或者是團體相對來說少一些，所以說網上的資料會少一點，但是還是有幾個網站需要和大家分享一下。

超圖官網： 穿梭門

超圖案例：穿梭門

超圖3D： 穿梭門

OpeaLayers： 穿梭門

在這幾個網站中你肯定可以找到對應的資料或者是API的接口，但是官網給出的案例都是js代碼的，如果需要在vue項目里面用，可能需要將對應的js代碼轉換為vue的語法使用，其實轉的時候不需要明白具體每一行代碼的意思，因為案例里面的代碼並沒有具體的介紹，如果想搞清楚的話需要自己去單個查詢api，但是這是一個很龐大的任務量，以后可以慢慢研究，如果着急的話只需要明白代碼塊就可以。

vue項目引入二維超圖

接下來就是vue項目引入二維的超圖。

我們以OpenLayers為例，文檔。

文檔里面介紹了很多的引入方式，然后如果是Vue項目的話請使用npm引入的方式。

npm install @supermap/iclient-ol

安裝完成之后，node_modules 文件夾就會有一個 supermap 的文件夾，恭喜你，安裝成功！

安裝完成之后，再 index.html 文件中引入CSS文件。

<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' />

然后就可以了，項目里面就成功的添加了 SuperMap。

但是有一個問題哈，就是項目ES6的語法能不能轉為ES5的，這個可能需要配置一下，不然后期的項目在使用超圖加載數據的時候會哐哐報錯。

在 webpack.base.conf.js 文件中加入 supermap 的轉換。

{
   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';

這些庫是根據官網文檔里面給的引入的，也就是OpenLayers API文檔。

具體引入什么庫，我們可以根據需要，從官網上去抄幾個案例，然后案例上面用到的庫，我們就可以去 OpenLayers API文檔里面對應的去查。

比如說在官網的案例里面有這樣一段代碼， var layer = new ol.layer.Tile 不知道轉換成vue應該引入什么庫的時候，我們可以去opealayers查一下。

就是類似這樣查。

HTML

接來編寫一個html用來展示地圖。

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

TS

然后是 ts 代碼。

        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);

然后二維的就可以正常顯示出來了。

如果需要其他的功能可以去官網案例查看，直接拿過來使用，但是需要將js代碼轉換成vue的語法，ok！

vue 引入 3D 超圖

3D的話稍微費勁一些，可以參考一下超圖3D文檔。官網上使用的都是js的方式，vue安裝的話需要一個包，這個自己可以找時間下載一下子。

包的下載位置

下載下來之后，我把他放進了 static 文件夾下面。

然后在 index.html 中引入 widgets.css、Cesium.js 和 zlib.min.js 文件。

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

然后就沒有了，直接在需要使用超圖3D的界面編寫就可以了，同樣，可以參照超圖3D官網提供的3D案例進行測試，需要將js代碼轉換為vue的代碼。

這里呢，我就簡單介紹幾個圖層引入的demo吧，還是需要一個div用來展示地圖，忘記說了， 這個div一定要記得設置寬度和高度哈，不然的話可能顯示不出來，切記切記！

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

然后是ts代碼，這個不需要像二維一樣引入這種各樣的庫，直接編碼就行。

簡單的，創建一個三維的地球

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

就這一行代碼，如果可以顯示一個三維地球的話，就說明引入的成功，沒有問題，可以繼續向下開發了。

然后詳細的代碼我就不分享了，需要的話從案例上面找着轉換。

我分享一下常見的幾種圖層的引入吧，其實官網也有說過，我都測試過，所以說直接給大家看一下。

第一種導入地形圖和影像

比如說我要導入北京某一個地方的GIS信息，想百度只能看平面圖，那是二維的，看不到高度，但是超圖引入地形圖之后可以看到地勢信息，比如說高度之類的，這個時候我們需要一個某區域地形的鏈接，還有這個區域的影像鏈接，然后地形在下面，具有高度，把鋪在上面的影像地圖給支棱起來，我應該說明白了是吧？代碼如下：

添加地形圖

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 圖層

這個地方是將這個文件目錄下的所有S3M圖層全部加載進來，根據需要可以只加載某幾個，可以參考一下官方文檔。

// 添加河流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 圖層

// 添加草地 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);

上面的代碼就完成了MVT圖層的添加。

然后還有刪除

this.scene.removeVectorTilesMap(McMvtMap.name);

就這些，還有一行代碼，最好加上。

this.scene.globe.depthTestAgainstTerrain = false;

好了，具體就是這些，本博完。