WebGL自学课程(10):通过OpenStreetMap获取数据绘制地球

25 篇文章 8 订阅
25 篇文章 3 订阅

好久没写博客了,今天再写一篇。前几天想通过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>

注:转载请注明出处

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值