作者: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>
最后运行看一下加载的效果。(天呢它没有底图了!)
关于自主客户端第一篇就到这里了,后面的内容后续在继续更新好啦。应该会很快的!不会托更很久的。