WebGL自学课程(10):通过OpenStreetMap获取数据绘制地球
好久没写博客了，今天再写一篇。前几天想通过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>
注：转载请注明出处