前言

怎么講呢，稀里糊涂的接了個(gè)電話(huà)，稀里糊涂的收到個(gè)臨時(shí)任務(wù)，稀里糊涂的出了一次差，稀里糊涂的搞了幾天超圖，超圖這個(gè)東西確實(shí)厲害，但是需要消耗一定的時(shí)間才能學(xué)會(huì)，因?yàn)樗墓δ芟鄬?duì)來(lái)說(shuō)比較強(qiáng)大，功能點(diǎn)實(shí)在是太多，不是一時(shí)半會(huì)就可以入門(mén)開(kāi)發(fā)的，加油吧！我也是一個(gè)小白，但是推了好久，還是在這里稍微整理一下vue項(xiàng)目引入超圖的一些方法和步驟，希望在以后可以幫助一些需要使用但是又沒(méi)有方向的同行小白。僅供參考，不可盡信。

相關(guān)資料

可能是用的人或者是團(tuán)體相對(duì)來(lái)說(shuō)少一些，所以說(shuō)網(wǎng)上的資料會(huì)少一點(diǎn)，但是還是有幾個(gè)網(wǎng)站需要和大家分享一下。

超圖官網(wǎng)： 穿梭門(mén)

超圖案例：穿梭門(mén)

超圖3D：穿梭門(mén)

OpeaLayers： 穿梭門(mén)

在這幾個(gè)網(wǎng)站中你肯定可以找到對(duì)應(yīng)的資料或者是API的接口，但是官網(wǎng)給出的案例都是js代碼的，如果需要在vue項(xiàng)目里面用，可能需要將對(duì)應(yīng)的js代碼轉(zhuǎn)換為vue的語(yǔ)法使用，其實(shí)轉(zhuǎn)的時(shí)候不需要明白具體每一行代碼的意思，因?yàn)榘咐锩娴拇a并沒(méi)有具體的介紹，如果想搞清楚的話(huà)需要自己去單個(gè)查詢(xún)api，但是這是一個(gè)很龐大的任務(wù)量，以后可以慢慢研究，如果著急的話(huà)只需要明白代碼塊就可以。

vue項(xiàng)目引入二維超圖

接下來(lái)就是vue項(xiàng)目引入二維的超圖。

我們以O(shè)penLayers為例，文檔。

文檔里面介紹了很多的引入方式，然后如果是Vue項(xiàng)目的話(huà)請(qǐng)使用npm引入的方式。

npm install @supermap/iclient-ol

安裝完成之后，node_modules 文件夾就會(huì)有一個(gè) supermap 的文件夾，恭喜你，安裝成功！

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

<link  rel='stylesheet' />

<link  rel='stylesheet' />

然后就可以了，項(xiàng)目里面就成功的添加了 SuperMap。

但是有一個(gè)問(wèn)題哈，就是項(xiàng)目ES6的語(yǔ)法能不能轉(zhuǎn)為ES5的，這個(gè)可能需要配置一下，不然后期的項(xiàng)目在使用超圖加載數(shù)據(jù)的時(shí)候會(huì)哐哐報(bào)錯(cuò)。

在 webpack.base.conf.js 文件中加入 supermap 的轉(zhuǎn)換。

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

這樣應(yīng)該就沒(méi)有問(wèn)題了，然后二維的相對(duì)簡(jiǎn)單，我們簡(jiǎn)單來(lái)一個(gè)案例。

超圖二維案例

引庫(kù)

首先在需要使用超圖的頁(yè)面引入一些庫(kù)。

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

這些庫(kù)是根據(jù)官網(wǎng)文檔里面給的引入的，也就是OpenLayers API文檔。

具體引入什么庫(kù)，我們可以根據(jù)需要，從官網(wǎng)上去抄幾個(gè)案例，然后案例上面用到的庫(kù)，我們就可以去 OpenLayers API文檔里面對(duì)應(yīng)的去查。

比如說(shuō)在官網(wǎng)的案例里面有這樣一段代碼， var layer = new ol.layer.Tile 不知道轉(zhuǎn)換成vue應(yīng)該引入什么庫(kù)的時(shí)候，我們可以去opealayers查一下。

就是類(lèi)似這樣查。

HTML

接來(lái)編寫(xiě)一個(gè)html用來(lái)展示地圖。

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

然后二維的就可以正常顯示出來(lái)了。

如果需要其他的功能可以去官網(wǎng)案例查看，直接拿過(guò)來(lái)使用，但是需要將js代碼轉(zhuǎn)換成vue的語(yǔ)法，ok！

vue 引入 3D 超圖

3D的話(huà)稍微費(fèi)勁一些，可以參考一下超圖3D文檔。官網(wǎng)上使用的都是js的方式，vue安裝的話(huà)需要一個(gè)包，這個(gè)自己可以找時(shí)間下載一下子。

包的下載位置

下載下來(lái)之后，我把他放進(jìn)了 static 文件夾下面。

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

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

然后就沒(méi)有了，直接在需要使用超圖3D的界面編寫(xiě)就可以了，同樣，可以參照超圖3D官網(wǎng)提供的3D案例進(jìn)行測(cè)試，需要將js代碼轉(zhuǎn)換為vue的代碼。

這里呢，我就簡(jiǎn)單介紹幾個(gè)圖層引入的demo吧，還是需要一個(gè)div用來(lái)展示地圖，忘記說(shuō)了， 這個(gè)div一定要記得設(shè)置寬度和高度哈，不然的話(huà)可能顯示不出來(lái)，切記切記！

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

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

簡(jiǎn)單的，創(chuàng)建一個(gè)三維的地球

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

就這一行代碼，如果可以顯示一個(gè)三維地球的話(huà)，就說(shuō)明引入的成功，沒(méi)有問(wèn)題，可以繼續(xù)向下開(kāi)發(fā)了。

然后詳細(xì)的代碼我就不分享了，需要的話(huà)從案例上面找著轉(zhuǎn)換。

我分享一下常見(jiàn)的幾種圖層的引入吧，其實(shí)官網(wǎng)也有說(shuō)過(guò)，我都測(cè)試過(guò)，所以說(shuō)直接給大家看一下。

第一種導(dǎo)入地形圖和影像

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

添加地形圖

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)

這樣的話(huà)，地形和影像就加載進(jìn)去了。

然后可以定位一下相機(jī)位置，就是我們一加載時(shí)候看哪個(gè)部分，不然看到的是一個(gè)地球，需要我們自己放大找。

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

然后第一種地圖加載就可以了。

加載 S3M 圖層

這個(gè)地方是將這個(gè)文件目錄下的所有S3M圖層全部加載進(jìn)來(lái)，根據(jù)需要可以只加載某幾個(gè)，可以參考一下官方文檔。

// 添加河流S3M圖層，open會(huì)將改文件路徑下的所有圖層信息導(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('長(zhǎng)江')  // 根據(jù)名稱(chēng)查詢(xún)圖層 這個(gè)名字是圖層連接對(duì)應(yīng)的名字，不是自己起的
  layer.style3D.bottomAltitude = 1150  // 設(shè)置該層在地圖的高度，根據(jù)需要是否設(shè)置
  this.viewer.zoomTo(layer);   // 圖層定位到該模型位置
})

官方解釋?zhuān)?/a>

添加 MVT 圖層

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

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

然后還有刪除

this.scene.removeVectorTilesMap(McMvtMap.name);

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

this.scene.globe.depthTestAgainstTerrain = false;

到此這篇關(guān)于Vue 使用超圖SuperMap的實(shí)踐的文章就介紹到這了,更多相關(guān)Vue 使用超圖SuperMap 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論