WebGL自学课程(10):通过OpenStreetMap获取数据绘制地球
2012-09-13 19:18
531 查看
好久没写博客了,今天再写一篇。前几天想通过OpenStreetMap访问数据来绘制一个最最最最最简单的WebGoogleEarth的雏形,这个Demo比较简单,只是简单的获取OpenStreetMap某一个切片层级下面的所有的切片,然后按照正确的贴图方式绘制在地球上,也就是说这个Demo没有考虑图层的动态管理等等。最后将渲染的代码以EarthOSM类的形式封装到了自己的World.js中,可以用鼠标进行三维交互,World.js的链接地址是http://blog.csdn.net/sunqunsunqun/article/details/7885639.
下面是截图:
下面是放大后的截图:
以下是前端代码:
注:转载请注明出处
下面是截图:
下面是放大后的截图:
以下是前端代码:
<!DOCTYPE HTML> <html> <head> <title>WebGL Terrain Map</title> <meta http-equiv="Content-Type" content="text/html"/> <meta name="charset" content="utf-8"/> <style type="text/css"> html, body { margin: 0; padding: 0; width: 100%; height: 100% ;font-family:"Times New Roman",Georgia,Serif;} div { margin: 0; padding: 0 } .head{width:100%; height:25px; background-color:#5998DD;color:#ffffff;font-size:13px; line-height:25px;border-top-left-radius:5px;border-top-right-radius:5px;-webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;} .tip{font-size:8px;display:block;height:8px;margin-left:3px;margin-top:9px;} </style> <script src='http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1' data-dojo-config='parseOnLoad: true'> <script type="text/javascript" src="World0.3.4.js"></script> <script type="text/javascript" src="CanvasEventHandler.js"></script> <script type="text/javascript"> var vertexShaderContent,fragmentShaderContent,camera,scene,renderer,earthOSM; function getShaderContent(shaderType){ var shaderUrl; if(shaderType == "VERTEX_SHADER"){ shaderUrl = "VertexShader.txt"; } else if(shaderType == "FRAGMENT_SHADER"){ shaderUrl = "FragmentShader.txt"; } var xhrArgs = { url:shaderUrl, handleAs:"text", sync:true, preventCache:true, load:function(data){ if(shaderType == "VERTEX_SHADER"){ vertexShaderContent = data; } else if(shaderType == "FRAGMENT_SHADER"){ fragmentShaderContent = data; } }, error:function(error){ alert("获取ShaderContent出错!"); } }; dojo.xhrGet(xhrArgs); } function startWebGL(){ getShaderContent("VERTEX_SHADER"); getShaderContent("FRAGMENT_SHADER"); renderer = new World.WebGLRenderer(dojo.byId("canvasId"),vertexShaderContent,fragmentShaderContent); //World.enableAmbientLight(); //World.enableParallelLlight(new World.Vector(0,-30,-50),new World.Vertice(0,0,0.8)); World.disableAmbientLight(); World.disableParallelLlight(); camera = new World.PerspectiveCamera(90,1,1.0,200.0); camera.look(new World.Vertice(0,0,60),new World.Vertice(0,0,0)); scene = new World.Scene(); earthOSM = new World.EarthOSM(40,5); scene.add(earthOSM); renderer.bindScene(scene); renderer.bindCamera(camera); renderer.setIfAutoRefresh(true); } function initEvents(){ dojo.connect(dojo.byId("canvasId"),"mousedown",onMouseDown); dojo.connect(dojo.byId("canvasId"),"onmouseup",onMouseUp); dojo.connect(dojo.byId("canvasId"),'mousewheel',onMouseWheel); dojo.connect(dojo.byId("canvasId"),'DOMMouseScroll',onMouseWheel); } function initAll(){ initEvents(); startWebGL(); } dojo.addOnLoad(initAll); </script> </head> <body> <canvas id="canvasId" width="625" height="625"></canvas> </body> </html>
注:转载请注明出处
相关文章推荐
- 获取国内任意一个城市的OpenStreetMap数据的一种方法
- WebGL自学课程(5):使用一张贴图纹理绘制地球
- OpenStreetMap初探(六)——获取地图数据
- OpenStreetMap 获取地图数据
- 转 OpenStreetMap初探(六)——获取地图数据
- WebGL自学课程(3):原生WebGL+ArcGIS JS API绘制旋转的地球
- 关于OpenStreetMap数据
- 如何通过后台代码获取map类型如下所示的数据:
- 用java解析在OpenStreetMap上下载的地图数据
- [原]导入OpenStreetMap海图数据,并在GeoServer上发布
- 背水一战 Windows 10 (101) - 应用间通信: 通过协议打开指定的 app 并传递数据以及获取返回数据, 将本 app 沙盒内的文件共享给其他 app 使用
- OpenStreetMap地图数据介绍(转)
- osm 数据格式(openstreet map)与Route --by wangsh
- 利用OpenStreetMap(OSM)数据搭建一个地图服务
- 解析OSM数据(C++ Parser OpenStreetMap Data)
- [原]在GeoServer中为OpenStreetMap数据设置OSM样式
- Js中不能获取后端通过ModelAndView中的map数据?
- openstreetmap地图数据转换为one能识别的wkt格式
- OpenStreetMap数据导入
- 使用1角分高程数据为OpenStreetMap服务器添加海洋等深线