Vue 使用超圖SuperMap的實踐
目錄
- 前言
- 相關資料
- 專案引入二維超圖
- 超圖二維案例
- 引庫
- vue 引入 3D 超圖
- 第一種匯入地形圖和影像
- 載入 S3M 圖層
- 新增 MVT 圖層
前言
怎麼講呢，稀裡糊塗的接了個電話，稀裡糊塗的收到個臨時任務，稀裡糊塗的出了一次差，稀裡糊塗的搞了幾天超圖，超圖這個東西確實厲害，但是需要消耗一定的時間才能學會，因為他的功能相對來說比較強大，功能點實在是太多，不是一時半會就可以入門開發的，加油吧！我也是一個小白，但是推了好久，還是在這裡稍微整理一下vue專案引入超圖的一些方法和步驟，希望在以後可以幫助一些需要使用但是又沒有方向的同行小白。僅供參考，不可盡信。
相關資料
可能是用的人或者是團體相對來說少一些，所以說網上的資料會少一點，但是還是有幾個需要和大家分享一下。
超圖官網： 穿梭門
超圖案例：穿梭門
超圖3D：穿梭門
OpeaLayers： 穿梭門
在這幾個網站中你肯定可以找到對應的資料或者是API的介面，但是官網給出的案例都是程式碼的，如果需要在vue專案裡面用，可能需要將對應的js程式碼轉換為vue的語法使用，其實轉的時候不需要明白具體每一行程式碼的意思，因為案例裡面的程式碼並沒有具體的介紹，如果想搞清楚的話需要自己去單個查詢api，但是這是一個很龐大的任務量，以後可以慢慢研究，如果著急的話只需要明白程式碼塊就可以。
vue專案引入二維超圖
接下來就是vue專案引入二維的超圖。
我們以OpenLayers為例，文件。
文件裡面介紹了很多的引入方式，然後如果是Vue專案的話請使用npm引入的方式。
npm install @supermap/iclient-ol
安裝完成之後，node_modules 資料夾就會有一個 supermap 的資料夾，恭喜你，安裝成功！
安裝完成之後，再 index.html 檔案中引入檔案。
<link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers..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.http://www.cppcns.comjs 檔案中加入 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 檔案。
<linkwQpOgOvXHv rel="stylesheet" href="./static/Cesium/Widgets/widgets.css" rel="external nofollow" >
<script type="text/" src="./static/Cesium/Cesium.js"></script>
<script type="text/script" 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("hhttp://www.cppcns.comttp://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;
到此這篇關於Vue 使用超圖SuperMap的實踐的文章就介紹到這了,更多相關Vue 使用超圖SuperMap 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！