WebGL自学课程(15):WebGL在WebGIS上的应用——WebGlobe
2013-06-18 13:20
239 查看
好久没写博客了,最近在工作之余用WebGL做了个WebGlobe,类似于Google Earth之类的东西,当然肯定没人家那个强大了。没有使用任何的WebGL图形库,自己把WebGL绘图命令封装成了一个轻量级的渲染引擎,想通过自己去亲自编码实现洞察Google Earth这种东西是怎么做出来的。整个Demo就一个文件,一共40kb,纯js实现,没有使用任何的第三方图形库或第三方js库。可以加载Google、OpenStreetMap、Nokia、Bing、ArcGIS Server发布的切片地图服务、天地图、Soso地图的切片地图服务,也可以加载混合的地图服务,根据当前位置自动更新切片,支持缩放渲染等交互式操作,实现了Google
Earth最基本的功能(当然效果肯定没人家的好),当然现在还有诸多bug,需要慢慢修改,浏览器要求支持WebGL,比如Chrome或Firefox、猎豹等浏览器,欢迎大家留言拍砖吐槽。
大家也可以通过一下的地址访问Demo:http://121.199.12.49:8080/WebGlobe/Demo.html
之前跟HiWebGL的站长商量了一下,想把Demo放到上面去,站长很爽快的答应了,地址如下:http://hiwebgl.com/iSpring/WebGlobe/Demo.html
关于WebGlobe的理论基础可参见本人的另一篇文章《WebGL自学课程(15):WebGlobe实现的基本算法原理》
Google效果:
![](https://img-blog.csdn.net/20130621084050890?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VucXVuc3VucXVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
OpenStreetMap效果:
![](https://img-blog.csdn.net/20130621084123578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VucXVuc3VucXVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
Nokia效果:
![](https://img-blog.csdn.net/20130621084141484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VucXVuc3VucXVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
Bing效果:
![](https://img-blog.csdn.net/20130625221759375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VucXVuc3VucXVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
天地图效果:
![](https://img-blog.csdn.net/20130626224629843?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VucXVuc3VucXVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
soso卫星地图效果:
![](https://img-blog.csdn.net/20130626224706875?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VucXVuc3VucXVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
混合效果:
Earth最基本的功能(当然效果肯定没人家的好),当然现在还有诸多bug,需要慢慢修改,浏览器要求支持WebGL,比如Chrome或Firefox、猎豹等浏览器,欢迎大家留言拍砖吐槽。
大家也可以通过一下的地址访问Demo:http://121.199.12.49:8080/WebGlobe/Demo.html
之前跟HiWebGL的站长商量了一下,想把Demo放到上面去,站长很爽快的答应了,地址如下:http://hiwebgl.com/iSpring/WebGlobe/Demo.html
关于WebGlobe的理论基础可参见本人的另一篇文章《WebGL自学课程(15):WebGlobe实现的基本算法原理》
Google效果:
OpenStreetMap效果:
Nokia效果:
Bing效果:
天地图效果:
soso卫星地图效果:
混合效果:
相关文章推荐
- WebGL自学课程(16):WebGlobe实现的基本算法原理
- WebGL自学课程(7):WebGL加载跨域纹理出错Cross-origin image load denied by Cross-Origin Resource Sharing policy.
- 未来的 Web:九个不可思议的 WebGL 应用试验
- WebGL自学课程(4):WebGL矩阵、Camera基础操作
- WebGL自学课程(2):使用自定义glTranslate与glRotate
- 未来的 Web:九个不可思议的 WebGL 应用试验
- HT for Web自定义3D模型的WebGL应用
- 《30天学习30种新技术》-Day 15:Meteor —— 从零开始创建一个 Web 应用
- 论web开发中浏览器选择的重要性——以Bmob云数据库、WebGL应用等为例
- Java Web整合开发(15) -- Struts 1.x 高级应用
- 课程 Java Web程序设计15: 使用和部署Web应用
- WebGL自学课程(8):WebGL+ArcGIS JS API实现TerrainMap
- 课程 Java Web程序设计16: 用web.xml控制Web应用的行为
- WebGL自学课程(13):获得三维拾取向量
- 未来的Web:九个不可思议的WebGL应用试验
- HT for Web自定义3D模型的WebGL应用
- Day 15:Meteor —— 从零开始创建一个 Web 应用
- WebGL自学课程(3):原生WebGL+ArcGIS JS API绘制旋转的地球
- WebGL自学课程(6):WebGL加载跨域纹理出错Uncaught Error: SECURITY_ERR: DOM Exception 18
- 【张孝祥并发课程笔记】15:java5同步集合类的应用