目录

• 前言
• 一.GIS介绍，为什么选择它？
• 二.环境安装
• 三.调用三维GIS场景
  • 设置地图风格
  • 添加地图iServer服务

前言

前段时间因为对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://:/iserver即可访问SuperMap iServer服务的首页。
本地访问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文件引入

同时应该根据需要在 head 标签中引入SuperMap iClient3D for WebGL的其他css文件和js文件，如下：

!17 初始化三维地球!

设置地图风格

默认风格是Cesium自带的，这里我们使用我们本地的图片进行设置

!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接口将整个场景打开