# Vue 使用超圖 SuperMap
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;
好了，具體就是這些，本博完。
【版權宣告】本博文著作權歸作者所有，任何形式的轉載都請聯絡作者獲取授權並註明出處！【重要說明】本文為本人的學習記錄，論點和觀點僅代表個人而不代表當時技術的真理，目的是自我學習和有幸成為可以向他人分享的經驗，因此有錯誤會虛心接受改正，但不代表此刻博文無誤！
【部落格園地址】JayveeWong： http://www.cnblogs.com/wjw1014
【CSDN地址】JayveeWong： https://blog.csdn.net/weixin_42776111
【Gitee地址】Jayvee：https://gitee.com/wjw1014
【GitHub地址】Jayvee：https://github.com/wjw1014