网页三维地图技术初探

http://blog.csdn.net/svap1/article/details/28861487

根据是否需要加载地图服务器中的资源将网页三维地图技术分为两大类:

一、需要服务器配合的

1、cesiumjs
   网址: http://www.cesiumjs.org
    许可证: Apache 2.0 license
    可以在调整经纬度,但是不能调整人眼的视角,也就是地球的轴线不能在显示器的平面中旋转。
优点:可以绘制三维数据,圆柱圆锥、卫星







2、openwebglobe
许可证:Open source licenced under MIT


3、d3cesium
是cesium中的一个示例,在d3中也有这个示例。
许可证:Cesium is open source under the Apache 2.0 license. It is free for commercial and non-commercial use.
缺点:画 的柱子三维化不够,只能两个方向旋转
优点:页面右侧的功能选项按钮可以可以加载不同的地图样式,也可以选择地图的展示方式(平面、球体、斜视)




二、不需要服务器配合

1、webglearth
许可证:   GPLv3 license
要加载在线地图资源,有教程和说明。
The easiest way how to embed a 3D globe in any webpage. Simple but still very powerful API. No plugin needed.



2、jquery.earth-3d
许可证:jquery.earth3d.js is, as the sphere.js plugin, under MIT licence.
缺点:只能在一个方向旋转,地球是一个canvas图层、飞机的航线又是另一个canvas图层


3-1、d3 globe
许可证:Library released under  BSD license
参考d3示例中的Faux-3d Shaded Globe。
优点:可以二维旋转,三维显示,使用 d3js的技术,加载文字、改变区域的颜色较好控制。
缺点:画三维的柱子较困难

    本人做的效果如下图:
    
    已经可以做到离线版,加载的是world-110m.json这个解析力的地图
    可以实现平面内左右前后旋转(但是有一定的限制),但是不能旋转地球轴线方向
    可以加载各个国家的首都、主要城市,并在地图上加以文字(中英文)标注。

3-2、d3 Faux-3D Arcs
网址: http://bl.ocks.org/dwtkns/4973620
许可证:Library released under  BSD license

可以画点到点之间的连线图


4、planetaryjs

        网址:http://planetaryjs.com/
      许可证: 100% free and open source, licensed under  the MIT license
        利用了d3.js 、   Moment.js 等技术
        它比d3 globe 更进一步,截至目前里面有三个实例,其中第三个实例除了加载显示三维地图外,
        还可以加载地震数据,这个数据是随时间变化而加载的

    

5  、 chromeexperiments


简介:The WebGL Globe is an open platform for geographic data visualization. We encourage you to copy the code, add your own data, and create your own.

特点:
Latitude / longitude data spikes
Color gradients, based on data value or type
Mouse wheel to zoom
More features are under development...

    大多数的示例都是加载经纬度高度等的数据



备注 :
1、地图数据获取来源: http://www.naturalearthdata.com/
2、查看在线卫星数据(对地球表面拍照的照片) http://science.nasa.gov/


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值