超图GIS入门iserver搭建，前端调用iserver加载三维场景demo
前言
前段时间因为对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定位导航，测量绘画，数据流模拟显示航线信息，人流量分析
