超圖GIS入門iserver搭建,前端呼叫iserver載入三維場景demo

福祿網路研發團隊發表於2021-11-30

前言

前段時間因為對3D製圖感興趣,學習了一下國內製作GIS的公司產品技術,並以一個demo為示例演示
從製作一個三維場景地圖——>安裝iserver服務——>釋出製作的地圖——>最後通過前端載入地圖顯示操作等
分為幾個步驟來逐步講解。

GIS介紹,為什麼選擇它?

iserver安裝和介面呼叫

製作一個簡單的demo

一.GIS介紹,為什麼選擇它?

超圖是全球第三大、亞洲最大的地理資訊系統(GIS)軟體廠商,主要從事地理資訊系統相關軟體技術研發與應用服務。
為什麼選它?因為它是國產了,上手比較簡單,因為是中文的,我也不用去找其它國外的破解版。省心、省力、省時、省錢
圖片1e8105f7b56f3c5c32dfe081ad888edc9

正所謂沒有最牛的語言、框架。直接拋開外在客觀因素、外在條件去聊方案都是耍流氓。

二.環境安裝

我用的是安裝在本地的服務,一套服務都可以用超圖的進行搭建,它的功能還是挺多的,還處於慢慢完善的階段。
首先開啟超圖的技術資源中心http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx
找到雲GIS服務,選擇 SuperMap iServer 10i(2021)

圖片2e003fcc2d8eaaf381b8a8619bcdb38a1

下載該服務包,版本建議下載V10.1.2以上版本,老版本毛病太多了。電腦系統和安裝包格式根據個人需求進行下載,我配置的是本地的,所以下載的是windowns版本64位V10.1.2 的zip格式壓縮包

圖片3152a76055a009562a25cbfdd080ca97b

下載解壓後,開啟資料夾找到“bin”目錄下的“startup.bat”啟動程式,啟動服務

圖片4d14939c40fbea994919de0e9b7fad329

我們跳過一直點選下一步的繁瑣步驟和等待,快進到最後
SuperMap iServer預設的埠為:8090,伺服器啟動後,會自動釋出預設的示例服務。
通過http://:/iserver即可訪問SuperMap iServer服務的首頁。
本地訪問http://localhost:8090即可開啟頁面,如下圖:

圖片5b7bcedf9a88bac583948ae6c0b12bf64

輸入賬號密碼配置使用者這些應該都會,不用詳細說了;接著我們檢視系統環境,全部為綠色直接下一步就行了

圖片61276f1e29f431ac3338f7cfb1a6f1330

在進入建立賬戶的第三步之前,許可驅動需要安裝一下;從開始選單進入許可中心;
第一次進入會出現下圖提示;

圖片7fc80bdfd6231abf7e6b91a824b9f5e6d

點選“是”就行了,它會自動安裝一個
如果無法自動安裝,則需要返回網頁手動下載一個許可中心,解壓後點選安裝即可

圖片832fbcd34fe84f8851593737a40017978

圖片93e8106868a21a7b0020409e48e4bba7f

臨時許可為90天試用期,過期需要去網站申請更新即可

圖片103cdab0f80017d9d2cb194108425f6379

圖片117d301217daa478b9ecbf98074e74850b

顯示配置完成,我們的iserver服務就已經搭建成功了,可以進入主介面了

圖片12edad0a51f46507076ed73c6e8fc887d2

圖片132cb4a84dab32c65f13e35b10cbeedb76

選擇一個服務介面點進去,到裡面檢視該介面資料的其它內容,有很多種方式供呼叫,選擇自己開發適合的呼叫即可,像xml,json,HTML等等

圖片14ce9d29c565fa39ff1f77a58c6468aff3

三.呼叫三維GIS場景

首先我們先釋出一個已製作好的三維場景(製作地圖需要用到其它軟體製作,這個我們後面再講,大家可以用iserver中一些自帶的場景進行呼叫,也可以的)

圖片156168f80b4b1628f67a2f88e033d36c0e

圖片16f0bfa4d00705145864df059600169beb

這裡我們先用自帶的一個服務進行製作

圖片17f5b0d4a6f1414d0dac2136d3f95d89bf

首先我們開啟VS或者其它前端軟體,建議HTML頁面
(關於 SuperMap iClient3D for WebGL,大家不想自己麻煩建一個3D的js配置檔案,我建議去http://support.supermap.com.cn:8090/webgl/web/index.html 官網去下載一個它已有的資源包,後續根據自己需要再做調整)

這裡我們下載一個資源包,開啟資源包,在webgl目錄下新建我們的HTML頁面

圖片18d92bba3602b5fdf865886d2338c66399

在examples資料夾下新建HTML檔案, 在檔案中通過 script 標籤將Cesium.js檔案引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
</head>
</html>

同時應該根據需要在 head 標籤中引入SuperMap iClient3D for WebGL的其他css檔案和js檔案,如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
</head>
</html>

!17 初始化三維地球!

<script type="text/javascript">
    function onload(Cesium) {
        var viewer = new Cesium.Viewer('CesiumContainer');
    }
</script>

設定地圖風格

預設風格是Cesium自帶的,這裡我們使用我們本地的圖片進行設定

<script type="text/javascript">
    function onload(Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer');
              //使用本地的一張圖片初始化地球,建議圖片長寬比2:1
                viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
                url :  './images/DemoImage.jpg'
            }));
</script>

!17 顏色設定 !

SuperMap iClient3D for WebGL支援對場景的顏色進行設定:
viewer.scene.colorCorrection.show = true;
viewer.scene.colorCorrection.saturation = $("#saturation").val();
viewer.scene.colorCorrection.brightness = $("#brightness").val();
viewer.scene.colorCorrection.contrast = $("#contrast").val();
viewer.scene.colorCorrection.hue = $("#hue").val();
    //顏色校正開關
$("#colorCorrectionShow").on("input change", function() {
viewer.scene.colorCorrection.show = this.checked;
});
    //調節飽和度
$("#saturation").on("input change", function() {
viewer.scene.colorCorrection.saturation = this.value;
});
    //調節亮度
$("#brightness").on("input change", function() {
viewer.scene.colorCorrection.brightness = this.value;
});
    //調節對比度
$("#contrast").on("input change", function() {
viewer.scene.colorCorrection.contrast = this.value;
});
    //調節色調
$("#hue").on("input change", function() {
viewer.scene.colorCorrection.hue = this.value;
});

結果載入出一個球,emmm

圖片1918864f4b1c73b220f27a49a72cc2d57f

新增地圖iServer服務

對於在 iServer上釋出的S3M地圖服務,可以通過以下兩種方式開啟。分別是addS3MTilesLayerByScp介面和open介面
1.addS3MTilesLayerByScp介面的優勢是,可以根據自己的需要選擇部分圖層新增到場景中,提高載入效能,但需要載入多圖層的整個場景時,不如scene.open方便。
2.這裡我們採用最簡單易操作且不易出現遺漏圖層的介面方式,通過open介面將整個場景開啟

<script type="text/javascript">
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene
    var promise = scene.open
('http://localhost:8090/iserver/services/3D-SctScene-8/rest/realspace');
    Cesium.when(promise, function (layers) {
        //設定相機位置、視角,便於觀察場景
        scene.camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(113.93930368774213, 22.558551546996856, 500.79457371673558),
            orientation: {
                heading: 5,
                pitch: -1.5188,
                roll: 6.283185307179563
            }
        });
    
    })
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    onload(Cesium);
}

圖片20d8dd53718f75a10dbf23a017948c4b2f

三維場景載入出來了。注意的是由於我是用自己電腦做的,所以介面地址是localhost,如果服務在其它電腦上,儘量用IP地址。
下圖為場景的操作輪盤,360*旋轉視角,180度翻轉,放大縮小

圖片21708f5093f91884ce8fc510b58e957ff6

然後就是關於載入三維GIS場景後,怎麼操作,這就比較簡單了

這裡我們在加入一個空間查詢的設定,便於後面的資訊操作,用於定位
這個作用就像你打LOL在地上亂點時,英雄就會走到你指定的位置,一個經緯度值,配合路網集就可以進化為類似一個自動導航行走的功能

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
 
    //設定滑鼠左鍵單擊回撥事件
    handler.setInputAction(function(e) {
        //首先移除之前新增的點
        viewer.entities.removeAll();
        //獲取點選位置笛卡爾座標
        var position = scene.pickPosition(e.position);
 
        //將笛卡爾座標轉化為經緯度座標
        var cartographic = Cesium.Cartographic.fromCartesian(position);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height;
        if(height < 0) {
            height = 0;
        }
 
        //建立彈出框資訊,即時檢視獲取的位置資訊
        var entity = new Cesium.Entity({
            name : "位置資訊",
            description : createDescription(Cesium, [longitude, latitude, height])
        });
        viewer.selectedEntity = entity;
 
        //為更直觀地展示查詢的位置,在點選處新增對應點
        viewer.entities.add(new Cesium.Entity({
            point : new Cesium.PointGraphics({
                color : new Cesium.Color(1, 1, 0),
                pixelSize : 10,
                outlineColor : new Cesium.Color(0, 1, 1)
            }),
            position : Cesium.Cartesian3.fromDegrees(longitude, latitude , height + 0.5)
        }));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

新增完成後,我們還要新增一個物體的屬性查詢
作用就是,你打LOL的時候,點選英雄的時候,告訴你英雄的屬性值

//SQL為預留給資料庫用

function doSqlQuery(SQL) {
    var getFeatureParam;
    getFeatureParam = new SuperMap.REST.FilterParameter({
        attributeFilter: SQL //SQL為查詢條件
});

上帝視角:就和你們打LOL/沙盤遊戲一樣嗎,放大縮小,點選建築物這些都差不多,顯示建築物名稱,屬性值,經緯度這些也類似

圖片229bd2f28eed7fe22ac1c439bc1a6db0a9

個人視角:這個相當於你們玩吃雞的視角感,拉伸拉遠,視角轉向檢視前後左右這些,點選周圍樹木,房子這些檢視地理位置,物品屬性值

圖片233336e85b606d96cf6791a7768f3736f9
圖片244b08684bdbe4386f2c63a216c9a166d2

今天就到這了,等我把這些介面全翻譯了再整點新花樣

圖片25468d142195db4de6de3c6938a7109867

後續會繼續更新:三維GIS定位導航,測量繪畫,資料流模擬顯示航線資訊,人流量分析

圖片264f2b58cd81be2a87cc168a08eec26409

福祿·研發中心 空蟬

相關文章