前言
前段時間因為對3D製圖感興趣，學習了一下國內製作GIS的公司產品技術，並以一個demo為示例演示
從製作一個三維場景地圖——>安裝iserver服務——>釋出製作的地圖——>最後通過前端載入地圖顯示操作等
分為幾個步驟來逐步講解。
GIS介紹，為什麼選擇它？
iserver安裝和介面呼叫
製作一個簡單的demo
一.GIS介紹，為什麼選擇它？
超圖是全球第三大、亞洲最大的地理資訊系統(GIS)軟體廠商,主要從事地理資訊系統相關軟體技術研發與應用服務。
為什麼選它？因為它是國產了，上手比較簡單，因為是中文的，我也不用去找其它國外的破解版。省心、省力、省時、省錢
正所謂沒有最牛的語言、框架。直接拋開外在客觀因素、外在條件去聊方案都是耍流氓。
二.環境安裝
我用的是安裝在本地的服務，一套服務都可以用超圖的進行搭建，它的功能還是挺多的，還處於慢慢完善的階段。
首先開啟超圖的技術資源中心http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx
找到雲GIS服務，選擇 SuperMap iServer 10i(2021)
下載該服務包，版本建議下載V10.1.2以上版本，老版本毛病太多了。電腦系統和安裝包格式根據個人需求進行下載，我配置的是本地的，所以下載的是windowns版本64位V10.1.2 的zip格式壓縮包
下載解壓後，開啟資料夾找到“bin”目錄下的“startup.bat”啟動程式，啟動服務
我們跳過一直點選下一步的繁瑣步驟和等待，快進到最後
SuperMap iServer預設的埠為：8090，伺服器啟動後，會自動釋出預設的示例服務。
通過http://
本地訪問http://localhost:8090即可開啟頁面，如下圖：
輸入賬號密碼配置使用者這些應該都會，不用詳細說了；接著我們檢視系統環境，全部為綠色直接下一步就行了
在進入建立賬戶的第三步之前，許可驅動需要安裝一下；從開始選單進入許可中心；
第一次進入會出現下圖提示；
點選“是”就行了，它會自動安裝一個
如果無法自動安裝，則需要返回網頁手動下載一個許可中心，解壓後點選安裝即可
臨時許可為90天試用期，過期需要去網站申請更新即可
顯示配置完成，我們的iserver服務就已經搭建成功了，可以進入主介面了
選擇一個服務介面點進去，到裡面檢視該介面資料的其它內容，有很多種方式供呼叫，選擇自己開發適合的呼叫即可，像xml，json，HTML等等
三.呼叫三維GIS場景
首先我們先釋出一個已製作好的三維場景（製作地圖需要用到其它軟體製作，這個我們後面再講，大家可以用iserver中一些自帶的場景進行呼叫，也可以的）
這裡我們先用自帶的一個服務進行製作
首先我們開啟VS或者其它前端軟體，建議HTML頁面
（關於 SuperMap iClient3D for WebGL，大家不想自己麻煩建一個3D的js配置檔案，我建議去http://support.supermap.com.cn:8090/webgl/web/index.html 官網去下載一個它已有的資源包，後續根據自己需要再做調整）
這裡我們下載一個資源包，開啟資源包，在webgl目錄下新建我們的HTML頁面
在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
新增地圖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);
}
三維場景載入出來了。注意的是由於我是用自己電腦做的，所以介面地址是localhost，如果服務在其它電腦上，儘量用IP地址。
下圖為場景的操作輪盤，360*旋轉視角，180度翻轉，放大縮小
然後就是關於載入三維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/沙盤遊戲一樣嗎，放大縮小，點選建築物這些都差不多，顯示建築物名稱，屬性值，經緯度這些也類似
個人視角：這個相當於你們玩吃雞的視角感，拉伸拉遠，視角轉向檢視前後左右這些，點選周圍樹木，房子這些檢視地理位置，物品屬性值
今天就到這了，等我把這些介面全翻譯了再整點新花樣
後續會繼續更新：三維GIS定位導航，測量繪畫，資料流模擬顯示航線資訊，人流量分析
