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

最新推荐文章于 2024-06-13 15:59:53 发布

老孟爱吃Taco

最新推荐文章于 2024-06-13 15:59:53 发布

阅读量2.3k

点赞数 3

分类专栏：超图webgl自主客户端 SuperMap 三维文章标签： javascript html 3d

本文链接：https://blog.csdn.net/weixin_42532695/article/details/125131936

版权

SuperMap 同时被 3 个专栏收录

30 篇文章 6 订阅

订阅专栏

三维

27 篇文章 8 订阅

订阅专栏

超图webgl自主客户端

11 篇文章 5 订阅

订阅专栏

作者：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>

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