首页 > 代码库 > 网页三维地图技术初探

网页三维地图技术初探

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

一、需要服务器配合的

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







2、openwebglobe
网址:http://www.openwebglobe.org/
许可证: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.
缺点:画 的柱子三维化不够,只能两个方向旋转
优点:页面右侧的功能选项按钮可以可以加载不同的地图样式,也可以选择地图的展示方式(平面、球体、斜视)
网址:http://cesiumjs.org/d3cesium/




二、不需要服务器配合

1、webglearth
网址:http://www.webglearth.org/
许可证: 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.
网址:http://sebastien.drouyer.com/jquery.earth-3d/
缺点:只能在一个方向旋转,地球是一个canvas图层、飞机的航线又是另一个canvas图层


3-1、d3 globe
许可证:Library released under BSD license
网址:http://bl.ocks.org/dwtkns/4686432
参考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
网址:    http://www.chromeexperiments.com/globe


简介: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...

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

    http://www.chromeexperiments.com/detail/cloud-globe/这个只给了个介绍


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