前言
前段時間因為對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定位導航，測量繪畫，數據流模擬顯示航線信息，人流量分析
