WebGL自學課程(3):原生WebGL+ArcGIS JS API繪製旋轉的地球

阿新 • • 發佈：2019-02-02

注：轉載請註明出處

通過ArcGIS JS API獲取地理資料，然後用原生WebGL將其繪製成旋轉的地球。一共需要241271個點，繪製了247個國家或地區。

截圖：

以下是程式碼：

<!doctype html>
<html>
	<head>
		<title>World</title>
        <meta http-equiv="Content-Type" content="text/html" />
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
            html,body,div{margin:0;padding:0}
        </style>
        <script id="shader-vs" type="x-shader/x-vertex">
            attribute vec3 aPosition;

            uniform mat4 uModelView;
            uniform mat4 uProj;

            void main()
            {
                gl_Position = uProj * uModelView * vec4(aPosition,1.0);
            }
        </script>
        <script id="shader-fs" type="x-shader/x-fragment">
            void main()
            {
                gl_FragColor = vec4(0,0,0.9,1.0);
            }
        </script>
		<script type="text/javascript" src="http://localhost/arcgis_js_api/library/2.7/jsapi/"></script>
        <script type="text/javascript">
            var canvas = null;
            var gl = null;
            var shaderProgram = null;
            var aPositionLocation;
            var uModelViewLocation;
            var uProjLocation;

            var vertexPositionBuffer = null;
			var mvMatrix = null;
            var projMatrix = null;
            var mvMatrixStack = [];
			var angle=0;
			
			var countries;
			var R = 20;
			var bStop = false;
			
			var count=0;

            function mvPushMatrix(){
                var array = [];
                for(i=0;i<mvMatrix.length;i++){
                    array.push(mvMatrix[i]);
                }
                var matrix = new Float32Array(array);
                mvMatrixStack.push(matrix);
            }

            function mvPopMatrix(){
                if(mvMatrixStack.length==0){
                    throw "Invalid PopMatrix";
                }
                mvMatrix = mvMatrixStack.pop();
            }

            function initWebGL(canvas){
                try{
                    gl = canvas.getContext("experimental-webgl",{antialias:true});
                }
                catch(e){
                    alert("瀏覽器不支援WebGL!");
                }

                if(!gl)
                    alert("瀏覽器不支援WebGL!");
            }

            function getShader(gl,id){
                var shaderScript = document.getElementById(id);
                if(!shaderScript)
                    return null;

                var shader = null;
                if(shaderScript.type=="x-shader/x-vertex"){
                    shader = gl.createShader(gl.VERTEX_SHADER);
                }
                else if(shaderScript.type=="x-shader/x-fragment"){
                    shader = gl.createShader(gl.FRAGMENT_SHADER);
                }
                else{
                    return null;
                }

                gl.shaderSource(shader,shaderScript.text);
                gl.compileShader(shader);

                if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
                    alert(gl.getShaderInfoLog(shader));
                    gl.deleteShader(shader);
                    return null;
                }

                return shader;
            }

            function initShaders(){
                var vertexShader = getShader(gl,"shader-vs");
                var fragmentShader = getShader(gl,"shader-fs");

                shaderProgram = gl.createProgram();
                gl.attachShader(shaderProgram,vertexShader);
                gl.attachShader(shaderProgram,fragmentShader);
                gl.linkProgram(shaderProgram);

                if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
                    alert("Could not link program");
                    gl.deleteProgram(shaderProgram);
                    gl.deleteShader(vertexShader);
                    gl.deleteShader(fragmentShader);
                    return;
                }

                gl.useProgram(shaderProgram);

                aPositionLocation = gl.getAttribLocation(shaderProgram,"aPosition");
                gl.enableVertexAttribArray(aPositionLocation);

                uModelViewLocation = gl.getUniformLocation(shaderProgram,"uModelView");
                uProjLocation = gl.getUniformLocation(shaderProgram,"uProj");
            }

            function initBuffer(){
                vertexPositionBuffer = gl.createBuffer();
                //gl.bindBuffer(gl.ARRAY_BUFFER,vertexPositionBuffer);
                /*var vertices = [ 0.0,  1.0,  0.0,
                                -1.0, -1.0,  0.0,
                                 1.0, -1.0,  0.0];
                gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);*/
            }
			
			function getPerspectiveMatrix(fov,aspect,near,far){
                var a = 1.0/Math.tan(fov / 2 * Math.PI / 180);
                var b = far/(far-near);
                var c = -near*far/(far-near);
                
                var perspectiveMatrix = new Float32Array([
                    a/aspect, 0, 0, 0,
                    0, a, 0, 0,
                    0, 0, b, c,
                    0, 0, 1, 0
                ]);

                return perspectiveMatrix;
            }
			
			function drawScene(){
				count = 0;
                
                gl.viewport(0,0,canvas.width,canvas.height);
                gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
				
				if(!countries)
					return;
				projMatrix = getPerspectiveMatrix(90,canvas.width/canvas.height,1.0,100.0);
				mvMatrix = new Float32Array([1.0,0.0,0.0,0.0,
											 0.0,1.0,0.0,0.0,
											 0.0,0.0,1.0,0.0,
											 0.0,0.0,0.0,1.0]);
													 
				mvPushMatrix();
					translate(mvMatrix,0,0,-(R*1.5));
					if(!bStop){
						angle++;						
					}
					rotateMatrix44(mvMatrix,angle*Math.PI/180,0,1,0);
					
					gl.uniformMatrix4fv(uModelViewLocation,false,mvMatrix);
                    gl.uniformMatrix4fv(uProjLocation,false,projMatrix);
					gl.bindBuffer(gl.ARRAY_BUFFER,vertexPositionBuffer);
					
					for(var i=0;i<countries.length;i++){
						var country = countries[i];
						drawCountry(country);
					}
					
					console.log(count);
							       
				mvPopMatrix();
            }
			
			function drawCountry(country){
				if(country){						
					for(var j=0;j<country.geometry.rings.length;j++){
						var ring = country.geometry.rings[j];
						var vertices = [];
						if(ring.vertices){
							vertices = ring.vertices;
						}
						else{
							if(ring.length > 3){
								for(var k=0;k<ring.length;k++){
									var coord = ring[k];
									var vertice = getXYZ(coord[0],coord[1],R);
									vertices.push(vertice[0]);
									vertices.push(vertice[1]);
									vertices.push(vertice[2]);
								}
								ring.vertices = vertices;
								count += vertices.length/3;
							}
						}
						if(vertices.length>9)
							drawPrimitive(vertices);
					}
				}
			}
			
			function drawPrimitive(vertices){
				//gl.bindBuffer(gl.ARRAY_BUFFER,vertexPositionBuffer);
				gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);
				//gl.bindBuffer(gl.ARRAY_BUFFER,vertexPositionBuffer);
                gl.vertexAttribPointer(aPositionLocation,3,gl.FLOAT,false,0,0);
                //gl.uniformMatrix4fv(uModelViewLocation,false,mvMatrix);
                //gl.uniformMatrix4fv(uProjLocation,false,projMatrix);
                gl.drawArrays(gl.LINE_LOOP,0,vertices.length/3);
			}
			
			function getXYZ(longitude,latitude,r){
				var vertice = [];
				var radianLog = Math.PI/180*longitude;
				var radianLat = Math.PI/180*latitude;
				var sin1 = Math.sin(radianLog);
				var cos1 = Math.cos(radianLog);
				var sin2 = Math.sin(radianLat);
				var cos2 = Math.cos(radianLat);
				var x = r*sin1*cos2;
				var y = r*sin2;
				var z = r*cos1*cos2;
				vertice.push(x);
				vertice.push(y);
				vertice.push(z);
				return vertice;
			}
			
			function translate(M16,x,y,z){
				M16[12] += x;
				M16[13] += y;
				M16[14] += z;
				return M16;
			}

			function rotateMatrix44(M16, angle, x, y, z) {
				var length, s, c;
				var xx, yy, zz, xy, yz, zx, xs, ys, zs, one_c;

				s = Math.sin(angle);
				c = Math.cos(angle);

				length = Math.sqrt( x*x + y*y + z*z );

				// Rotation matrix is normalized
				x /= length;
				y /= length;
				z /= length;

				//#define M(row,col)  m[col*4+row]

				xx = x * x;
				yy = y * y;
				zz = z * z;
				xy = x * y;
				yz = y * z;
				zx = z * x;
				xs = x * s;
				ys = y * s;
				zs = z * s;
				one_c = 1.0 - c;

				M16[0] = (one_c * xx) + c;//M(0,0)
				M16[4] = (one_c * xy) - zs;//M(0,1)
				M16[8] = (one_c * zx) + ys;//M(0,2)
				//M16[12] = 0.0;//M(0,3) 表示平移X

				M16[1] = (one_c * xy) + zs;//M(1,0)
				M16[5] = (one_c * yy) + c;//M(1,1)
				M16[9] = (one_c * yz) - xs;//M(1,2)
				//M16[13] = 0.0;//M(1,3)  表示平移Y

				M16[2] = (one_c * zx) - ys;//M(2,0)
				M16[6] = (one_c * yz) + xs;//M(2,1)
				M16[10] = (one_c * zz) + c;//M(2,2)
				//M16[14] = 0.0;//M(2,3)  表示平移Z

				M16[3] = 0.0;//M(3,0)
				M16[7] = 0.0;//M(3,1)
				M16[11] = 0.0;//M(3,2)
				M16[15] = 1.0;//M(3,3)

				return M16;
			}
			
			function initRequestAnimationFrame(){
				window.requestAnimationFrame = window.requestAnimationFrame
										|| window.mozRequestAnimationFrame
										|| window.webkitRequestAnimationFrame
										|| window.msRequestAnimationFrame
										|| window.oRequestAnimationFrame
										|| function(callback) {
											setTimeout(callback, 1000 / 60);
										};
			}
			
			function tick() {				
                window.requestAnimationFrame(tick);
                drawScene();
            }

            function startWebGL(){
                canvas = document.getElementById("iCanvas");
                initWebGL(canvas);
                initShaders();
                initBuffer();

                gl.clearColor(0.9,0.9,0.9,1.0);
                gl.enable(gl.DEPTH_TEST);
				//gl.clearDepth(1.0);
                gl.depthFunc(gl.LEQUAL);
				//gl.lineWidth(2);//設定了lineWidth，沒有效果
				initRequestAnimationFrame();
                tick();
            }
			
			function doQuery(){
				var query = new esri.tasks.Query();
				query.where = "1=1";
				query.outSpatialReference = new esri.SpatialReference({wkid:4326}); 
				query.returnGeometry = true;
				var queryTask = new esri.tasks.QueryTask("http://localhost/ArcGIS/rest/services/World/MapServer/9");
				queryTask.execute(query,function(featureSet){					
					countries = featureSet.features;
					console.log(countries);
				});
			}
			
			function stop(){
				bStop = !bStop;
			}
			
			function init(){
				var btnQuery = dojo.byId("btnQuery");
				dojo.connect(btnQuery,"onclick","doQuery");
				var btnStop = dojo.byId("btnStop");
				dojo.connect(btnStop,"onclick","stop");
				
				startWebGL();
			}
			
			dojo.addOnLoad(init);
        </script>
	</head>
	<body onload="startWebGL();">
        <canvas id="iCanvas" width="600" height="600" style="margin-left:100px;margin-top:30px;border:1px solid #000;"></canvas>
		<input type="button" id="btnQuery" value="繪製"></input>
		<input type="button" id="btnStop" value="旋轉/停止旋轉"></input>
	</body>
</html>

注：轉載請註明出處

WebGL自學課程(3):原生WebGL+ArcGIS JS API繪製旋轉的地球

注：轉載請註明出處通過ArcGIS JS API獲取地理資料，然後用原生WebGL將其繪製成旋轉的地球。一共需要241271個點，繪製了247個國家或地區。截圖：以下是程式碼： <!doctype html> <html> <h

WebGL自學課程(5):使用一張貼圖紋理繪製地球

注：轉載請註明出處在《WebGL自學課程(3):原生WebGL+ArcGIS JS API繪製旋轉地球》一文中講述瞭如何利用地圖資料繪製地球的輪廓，但是缺少色彩。本文就是想通過貼圖的方式讓地球穿上一層靚麗的外衣，並可以通過滑鼠拖拽等對繪製的地球進行互動式操作。由於本人《

WebGL自學課程(8):WebGL+ArcGIS JS API實現TerrainMap

轉載請註明出處以前在Esri的部落格上看到了一篇用Silverlight+Balder實現TerrainMap的文章，實現的功能是將指定的二維投影地理範圍轉換成三維地形圖，這是連結地址http://maps.esri.com/sldemos/terrainmap/defa

WebGL自學課程(1)：原生WebGL簡單Demo

以下是一個原生WebGL簡單Demo： <!doctype html> <html> <head> <title>World</title> <meta http-equiv="Con

WebGL自學課程(10):通過OpenStreetMap獲取資料繪製地球

好久沒寫部落格了，今天再寫一篇。前幾天想通過OpenStreetMap訪問資料來繪製一個最最最最最簡單的WebGoogleEarth的雛形，這個Demo比較簡單，只是簡單的獲取OpenStreetMap某一個切片層級下面的所有的切片，然後按照正確的貼圖方式繪製在地球上，也就

WebGL自學課程(7):WebGL載入跨域紋理出錯Cross-origin image load denied by Cross-Origin Resource Sharing policy.

最近在學習WebGL，用圖片對WebGL進行紋理貼圖，其中圖片是從其他網站跨域獲取的，用Chrome 22執行網頁，開始的時候出現了錯誤Uncaught Error: SECURITY_ERR: D

[第三堂課]c#自學課程(3)

zcl 運算符 http 優先優先級百度雲盤錄制變量 nes 3章變量與常量 1）變量概念 2）變量類型 3）變量操作 4）常量 4章表達式與運算符 1)表達式 2)運算符 3)運算符優先級錄制視頻：百度雲盤：https://pan.baidu.com

【總結整理】arcgis js api的Map類

div eal sna ice click esri 顯示 navi 完成 ArcGis for javascrept_ESRI_Map類: 　　1. 構造方法：esri.Map(); 　　　　參數: extent 如果設置了該選項,一旦這個選項的投

ArcGIS JS API 實現路徑軌跡回放

效果圖：原理：建立兩個graphic圖層lineLayer、carLayer，在兩點之間進行插值，把小車圖片建立成graphic,然後顯示隱藏。簡單來說就是：根據設定的時間間隔，在兩個點之間建立n個點，然後代表小車的gr

ArcGIS JS API中切換頁面後元件報Tried to register widget with id==" " but that id is already registered

由於ArcGIS JavaScript API 基於dojo框架，在dojo中，除了沿用Dom結點， dojo 還自定義了一類結點用“dojoType" 進行標識。dojo 稱這些結點為widget。我們在向地圖中新增一些控制元件時，這些控制元件其實就是widg

本地IIS部署的arcgis js api ，載入地圖樣式改變 --解決方案

之前部署了離線的arcgis js api ，在載入地圖的時候google 瀏覽器總是提示跨域的問題，而且地圖的樣式也發生了變化，但是引用官網的線上api的時候就不會出現的這種問題，意識到是部署的api哪裡還沒有做好，查閱資料許久才找到解決方案，特寫下這篇部落格(其實都已經過去好長時間了 = =)

arcgis js api Map類小結

今天開始了公司Gis的專案，主要負責地圖的載入與功能的實現，主要也就是用arcgis js api，之前也是看了接近大半個月的的 api和相關的demo，但是真正上手專案還是有區別啊，好多功能自己做演示根本想不到，特此做一次map類的總結（也以此來提醒自己別忘了多多寫blog多多總結 &

arcgis js api呼叫SOE 設定代理後呼叫報No 'Access-Control-Allow-Origin' header is present on the requested ...

使用ArcGIS API for JavaScript 呼叫SOE，在設定了代理之後進行請求報“No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'nul

ArcGIS JS API ：熱力圖不同級別下的優化方法

get heatmap heat nbsp api UNC 優化 ren radi 我們在地圖縮放的不同級別下，熱力圖的顯示效果會不同，由於點密度與模糊參數默認是固定的，因此需要對參數進行動態修改，以滿足不同縮放級別下可以得到較好的顯示效果。思路是監聽地圖縮放級別

ArcGIS JS API ：如何在地圖上做出點位脈沖閃爍的效果

width 要素 opacity block 留言 for 是我動手嘗試日常地圖表達中我們通常使用的地圖符號多是靜態地圖符號，時間久了會造成視覺審美疲勞，也沒有現代感。在這種背景下，對現有地圖符號進行簡單處理，即可得到色彩鮮艷，對比度強烈，活靈活現的地圖表達

WebGL樹形結構的模型渲染流程原生WebGL場景中繪製多個圓錐圓柱原生WebGL場景中繪製多個圓錐圓柱

　　今天和大家分享的是webgl渲染樹形結構的流程。用過threejs，babylonjs的同學都知道，一個大模型都是由n個子模型拼裝而成的，那麼如何依次渲染子模型，以及渲染每個子模型在原生webgl中的流程是怎樣的呢，我就以osg框架為原本，為同學們展示出來。　　首先介紹osg框架，該框架是基於open

原生webgl基礎學習（一）引言

一.筆者自述對於原生WebGL的學習，相信對於很多搞前端圖形開發的小夥伴的痛點是花了很多時間，卻收效甚微；好在現在存在諸如Three.js、Babylon.js、cesium.js等功能強大和齊全的WebGL第三方庫；有了這些第三方庫，我們可

原生WebGL基礎學習（二）用WebGL繪製一個三角形

在開始之前，需要知道著色器的相關知識，可以參考：webgl介紹裡面的著色器介紹，本文的demo 用到的著色器為： <script id="vertex-shader" type="x-shader/x-vertex"> attribu

遊戲開發黑科技（WebGL，Stage3D，OpenGL，TS/JS/H5）

《碼農文章收藏記事本》軟體介紹：本軟體工具由本部落格作者編寫開發，介面高仿QQ收藏的操作方式。「碼農文章收藏記事本」是一款用於在電腦上寫日記或收集文件的軟體。支援常用的文字編輯排版功能，具有

原生webgl學習（四） WebGL繪製矩形

上節課筆者繪製了一個顏色隨頂點位置變化的三角形，實現平移、旋轉和縮放變換的矩陣計算，並提供了一個可供互動的選單欄工具：原生webgl學習（三） WebGL中的矩陣運算：平移、旋轉和縮放；在前面我們已經畫了兩次三角形了，這次，改變一些套路，我們畫矩形。畫矩形的程式碼跟上

WebGL自學課程(3):原生WebGL+ArcGIS JS API繪製旋轉的地球

相關推薦