作者：taco

前言：

为了做到日更博主，或者周更博主。准备开一个新坑来提高我的动力。使用超图的webgl产品也大概有一两年左右了，就在前两天看到超图官网更新了新版本的webgl产品，肯定是马不停蹄就去下载了呢。当我下载完成以后，发现了个问题？好像和以前使用的不太一样。它并没有直接去引用Cesium.js这个文件。而是换成了SuperMap3D.js以及initGlobe.js这两个文件。后来得知，新版本的webgl产品为超图发布的自主客户端产品。很开心的是最近正愁不知道写些什么，就拿这个产品试一试。从头开始试试各个功能，以及使用方法。

第一章 SuperMap iClient3D 11i for WebGL快速搭建简单使用

其实和以往的使用方式是一致的，相信熟悉原来产品的朋友们肯定就没必要来看前几章了呢。不过这一系列教程不是针对大佬们食用的！我也还是个小白嘞~

咱是以一个GIS小小白的角度开始说的，咱们得照顾新人对不对~嘿嘿ψ(｀∇´)ψ

进入正题！要使用这款产品，首先我们得知道在哪里去下载它。这里我留下一个连接（传送门）。可以通过这个连接直接跳转至下载地址。当然，我们也可以直接百度搜索“SuperMap技术资源中心”，直接搜到的第一个就是下载的位置。我们找到WEBSDK的位置，然后往下拉就可以发现需要的产品包。这里提供了百度云下载连接，存到自己的网盘里下载就好啦~

顺便我们看一下这里的介绍：

SuperMap iClient3D 11i (2022) Beta for WebGL 基于 WebGL 技术实现的三维客户端开发平台，不依赖开源框架，可用于构建无插件、跨操作系统、跨浏览器的三维 GIS 应用程序，可访问SuperMap iServer发布的多种服务、实现了三维场景可视化浏览、交互操作和地理信息管理等功能。通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。

一，准备工作

1.浏览器

确保浏览器是支持webgl的，求求了！不要再拿上古的IE浏览器了！好歹换成edge吧。这里主要还是推荐谷歌（Chrome）浏览器的。同时也要注意浏览器版本过低也可能导致不支持webgl，如果无法确认自己的浏览器是否支持，可以访问webglreport网站检查一下。

2.Tomcat

各位gis白白们，请你们不要试图解压后直接双击打开html了！这样是没有办法使用的呢！(WebGL出于安全性的考虑，不允许以本地file的方式打开) 我们需要部署到Tomcat中，或者也可以借助其他编译器来进行使用。文章后面会介绍如何部署。听我的一定不要双击去点开它。

3.开发环境（编译器）

大佬们都有自己偏爱的编译器，像什么WebStorm,IDE等等。我这里使用的是Hbuilder，使用起来很是方便，还不需要破解。

4.Webgl产品包

产品包的话可以看上面的连接直接去下载就可以了，这里不做过多描述。

二，产品包清单

build：需要引用的SuperMap3D.js所在的文件，包含css，workers等文件。最主要的文件放置的地方，项目使用的话直接把build文件拷贝至项目使用的目录下即可

docs：Api接口文档所在的位置

examples：主要示例位置，详细的范例程序。建议可以都瞅瞅照着敲一敲

web：一个界面的框架文件，与实际使用的webgl产品关系不是很大，可以忽略不去看

三，Hello world

1，部署使用

这里来介绍两种部署使用的方法，也是开发初期最常使用的方法。新手不用太过于担心这个过程还是比较简单的。

1）部署到tomcat中使用

关于tomcat如何安装使用的话，可以看一下这篇文章，这里不去介绍他怎么安装，当我们安装好后直接将webgl产品包放置webapps下面通过localhost:端口号/文件路径/helloworld.html去打开我们写好的页面。因为后续还需要使用超图的iserver产品发布服务，所以这里直接借用了iServer产品中的tomcat来演示一下下。

我们直接把下载好后的webgl产品包解压到webapps下面，并将其名称修改的简单一些。

找到iserver的bin目录中，双击startup.bat去启动。这个时候会弹出一个命令行界面，也就意味着我们iserver产品启动成功了。

当我们看到命令行中出现了数字带着毫秒的字样，其实就算是已经启动成功了。这个时候，我们在浏览器中输入localhost:8090 就可以进入配置界面。在我们配置好以后就可以正常使用iserver产品了。当然我们最终的目的不是使用iserver而是启动我们的webgl，我们在浏览器中输入localhost:8090/iClient3D/index.html 就可以正常的去查看所需要的示例了。

这个是通过tomcat(iserver)方式去使用webgl产品。作为一个开发者，相信大家其实是都会用的，如果是小白的话希望我这里的介绍也可以学会如何去使用。

2）使用编译器自带工具

懒得起tomcat，只是本地去调试代码的话。我应该怎么做呢？其实很多编译工具都提供了这个功能，这里推荐使用的是Hbuilder。反正我这边使用的还比较多。简单的调试还是很容易上手的。下载好编译器后，将项目或是代码包目录放置进去。直接选择运行至浏览器即可成功运行。

相比放到tomcat中再去运行简单了很多，适合小小白前期使用的超好用软件。

2.Hello World！

当我们部署好以后，就来开始加载我们的第一个球球！

在examples文件夹下新建一个hello文件夹并创建helloworld.html，作为我们第一个球来使用。

通过查看官网的示例会发现主要需要引用的文件包括一下三个文件。其中包含样式文件（pretty）；初始化球的文件(initGlobe.js)，初步观察这个js中包含了球体的各种参数，画布的各种参数。看来后续可以通过修改这个文件内的参数来重新初始化我们的球球;最后还有的就是SuperMap3D.js这个文件，主要的内容还是在这里面去调用的。

<link href="../webgl/css/pretty.css" rel="stylesheet" />
<script type="text/javascript" src="../webgl/js/initGlobe.js"></script>
<script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>

通过initGlobe去初始化我们的球体，因为不算太难，完整代码的话就直接放上来了。

<!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="../webgl/css/pretty.css" rel="stylesheet" /><script type="text/javascript" src="../webgl/js/initGlobe.js"></script><script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script><title>helloworld</title></head><body><div id="Container"></div><script>function onload(SuperMap3D) {initGlobe('Container'); //初始化我们的球球}onload(SuperMap3D);</script></body>
</html>

最后运行看一下加载的效果。（天呢它没有底图了！）

关于自主客户端第一篇就到这里了，后面的内容后续在继续更新好啦。应该会很快的！不会托更很久的。

【超图】SuperMap iClient3D 11i for WebGL新产品食用指南(一)相关推荐

SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效粒子特效简介使用粒子特效完整代码作者: NIck Cheng 粒子特效简介粒子特效通常使用与要表现某些动态 ...
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务申请天地图开发者 token 读懂能力文 ...
SuperMap iClient3D for WebGL教程（Entity）-ModelGraphics
作者:为梦齐舞本文同步更新于简书文章[https://www.jianshu.com/p/bdf397685e8b] ModelGraphics类是隶属于实体对象的一个类型,主要用于创建模型图形,加 ...
SuperMap iClient3D for WebGL在移动端的应用
作者:桔子本文同步发布于https://www.jianshu.com/p/90ac8c364bb4 前言:在这个移动互联网时代,手机可以说是每个人不可或缺的工具,无数的APP可以选择,极大的给生活 ...
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效扩展喷泉特效喷泉特效实现完整代码作者: NIck Cheng 扩展喷泉特效之前的博客已经讲过了如何去生成一 ...
SuperMap iClient3D for WebGL教程（影像篇）-Mapbox
作者:为梦齐舞本文同步更新于简书文章https://www.jianshu.com/p/e19129908252 Mapbox 是一个可以创建各种自定义地图的网站,如 foursquare.Pint ...
SuperMap iClient3D for WebGL教程 Camera
SuperMap iClient3D for WebGL教程 Camera WuYK 在WebGL场景里,有一类很重要的对象,那就是我们的相机Camera对象.这里的Camera相当于人的眼睛,从坐标 ...
SuperMap iClient3D for WebGL教程 Primitive
SuperMap iClient3D for WebGL教程 Primitive WuYK 在Webgl中,实体对象主要由两大类组成,一类是Entity对象,还有一类就是Primitive对象.那么有 ...
SuperMap iClient3D for WebGL教程（空间分析）- 地表开挖及修改
地表开挖主要是为了显示出地下的场景,比如地下管网,而地形修改通常是为了让地表平整,便于跟模型匹配,接下来我们分别说说如何实现地表开挖和地形修改. 地表开挖 1.引用核心样式文件和库文件 <scr ...

【超图】SuperMap iClient3D 11i for WebGL新产品食用指南(一)

前言：