快捷導(dǎo)航

Vue 使用超圖SuperMap的實踐

更新時間：2021年12月06日 10:54:42 作者：超級無敵炫酷暴龍戰(zhàn)神

作為一名剛?cè)腴T計算機語言的人來說,要想快速完成測試開發(fā)地圖項目,肯定要接用到SuperMap，本文主要介紹了Vue 使用超圖SuperMap的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

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

vue項目引入二維超圖

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

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

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

npm install @supermap/iclient-ol

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

在這里插入圖片描述

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

<link  rel='stylesheet' />

<link  rel='stylesheet' />

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

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

在 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)該就沒有問題了，然后二維的相對簡單，我們簡單來一個案例。

超圖二維案例

引庫

首先在需要使用超圖的頁面引入一些庫。

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

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

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

比如說在官網(wǎng)的案例里面有這樣一段代碼， var layer = new ol.layer.Tile 不知道轉(zhuǎn)換成vue應(yīng)該引入什么庫的時候，我們可以去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);

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

在這里插入圖片描述

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

vue 引入 3D 超圖

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

包的下載位置

在這里插入圖片描述

下載下來之后，我把他放進了 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>

在這里插入圖片描述

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

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

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

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

簡單的，創(chuàng)建一個三維的地球

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

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

在這里插入圖片描述

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

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

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

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

添加地形圖

var viewer = new Cesium.Viewer('map', {
    //創(chuàng)建地形服務(wù)提供者的實例，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è)置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)

這樣的話，地形和影像就加載進去了。

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

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

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

加載 S3M 圖層

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

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

官方解釋：

在這里插入圖片描述

添加 MVT 圖層

// 添加草地 MVT 圖層
this.mc = {
  url: 'http://localhost:8090/iserver/services/CAODI/rest/maps/CD',   //MVT的服務(wù)地址
  canvasWidth: 512,
  name: '草地',  // 圖層的名字，不是自己起的，是這個連接對應(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的實踐的文章就介紹到這了,更多相關(guān)Vue 使用超圖SuperMap 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
SuperMap

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Vue 使用超圖SuperMap的實踐

目錄

前言

相關(guān)資料

vue項目引入二維超圖

超圖二維案例

引庫

vue 引入 3D 超圖

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

加載 S3M 圖層

添加 MVT 圖層

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具