搜尋此網誌

2016年4月20日 星期三

WebGL Earth 初體驗

自從Google Earth宣布停止服務後
大家一直期待會有下一代出現
但除了Google與Esri合作的 Desktop 版之外
到目前為止仍沒有Web版的替代方案

於是有需求的人都轉向open source去了
接下來介紹這個 WebGL Earth http://www.webglearth.org/
由javascript所構成
官方網站上也有一些example可以看 http://examples.webglearth.com/

接下來我們就來初體驗一下吧


Hello word 
指定寬高的div圖台

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="http://www.webglearth.com/v2/api.js"></script>  
  6.     <script>  
  7.     function initialize() {  
  8.         var options = {  
  9.             zoom: 3.0,  
  10.             position: [24.176899, 120.651872]  
  11.         };  
  12.         var earth = new WE.map('earth_div', options);  
  13.         WE.tileLayer('http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', {  
  14.             tileSize: 256,  
  15.             tms: true  
  16.         }).addTo(earth);  
  17.     }  
  18.     </script>  
  19. </head>  
  20.   
  21. <body onload="initialize()">  
  22.     <h1>WebGL Earth API: Hello World</h1>  
  23.     <div id="earth_div" style="width:1024px;height:768px;border:1px solid gray; padding:2px;"></div>  
  24. </body>  
  25.   
  26. </html>  
Hello World2
全螢幕的圖台
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="http://www.webglearth.com/v2/api.js"></script>  
  6.     <script>  
  7.     function initialize() {  
  8.         var options = { zoom: 10.0, position: [24.176899, 120.651872] };  
  9.         var earth = new WE.map('earth_div', options);  
  10.         WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
  11.             attribution: '© OpenStreetMap contributors'  
  12.         }).addTo(earth);  
  13.     }  
  14.     </script>  
  15.     <style>  
  16.     html,  
  17.     body {  
  18.         padding: 0;  
  19.         margin: 0;  
  20.     }  
  21.      
  22.     #earth_div {  
  23.         top: 0;  
  24.         right: 0;  
  25.         bottom: 0;  
  26.         left: 0;  
  27.         position: absolute !important;  
  28.     }  
  29.     </style>  
  30.     <title>WebGL Earth API: Hello World2</title>  
  31. </head>  
  32.   
  33. <body onload="initialize()">  
  34.     <div id="earth_div"></div>  
  35. </body>  
  36.   
  37. </html>  
Overlays
套疊多個底圖

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="http://www.webglearth.com/v2/api.js"></script>  
  6.     <script>  
  7.     function initialize() {  
  8.         var options = { zoom: 10.0, position: [24.176899, 120.651872] };  
  9.         var earth = new WE.map('earth_div', options);  
  10.         WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
  11.             attribution: '© OpenStreetMap contributors'  
  12.         }).addTo(earth);  
  13.         /* 
  14.         WE.tileLayer('http://data.webglearth.com/natural-earth-color/{z}/{x}/{y}.jpg', { 
  15.             tileSize: 256, 
  16.             tms: true 
  17.         }).addTo(earth); 
  18.         */  
  19.   
  20.         var toner = WE.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {  
  21.           attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.',  
  22.           opacity: 0.6  
  23.         });  
  24.         toner.addTo(earth);  
  25.     }  
  26.     </script>  
  27.     <style>  
  28.     html,  
  29.     body {  
  30.         padding: 0;  
  31.         margin: 0;  
  32.     }  
  33.      
  34.     #earth_div {  
  35.         top: 0;  
  36.         right: 0;  
  37.         bottom: 0;  
  38.         left: 0;  
  39.         position: absolute !important;  
  40.     }  
  41.     </style>  
  42.     <title>WebGL Earth API: Overlays</title>  
  43. </head>  
  44.   
  45. <body onload="initialize()">  
  46.     <div id="earth_div"></div>  
  47. </body>  
  48.   
  49. </html>  

Markers
劃設點位
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="http://www.webglearth.com/v2/api.js"></script>  
  6.     <script>  
  7.     function initialize() {  
  8.         var options = { zoom: 15.0, position: [24.176899, 120.651872] };  
  9.         var earth = new WE.map('earth_div', options);  
  10.         WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
  11.             attribution: '© OpenStreetMap contributors'  
  12.         }).addTo(earth);  
  13.   
  14.         var marker1 = WE.marker([24.176899, 120.651872]).addTo(earth);  
  15.         marker1.bindPopup("<b>Marker!</b><br>I am a popup.<br /><span style='font-size:10px;color:#999'>Tip: 逢甲大學..</span>", {maxWidth: 150, closeButton: true}).openPopup();  
  16.   
  17.         var marker2 = WE.marker([24.172357, 120.645607], 'marker.png', 24, 34).addTo(earth);  
  18.         marker2.bindPopup("<table><tr><td><b>沒有Close的Marker</b></td></tr><tr><td>我在西屯路</td></tr><tr><td><img src='test.jpg'></td></tr></table>", {maxWidth: 120, closeButton: false});  
  19.     }  
  20.     </script>  
  21.     <style>  
  22.     html,  
  23.     body {  
  24.         padding: 0;  
  25.         margin: 0;  
  26.     }  
  27.      
  28.     #earth_div {  
  29.         top: 0;  
  30.         right: 0;  
  31.         bottom: 0;  
  32.         left: 0;  
  33.         position: absolute !important;  
  34.     }  
  35.     </style>  
  36.     <title>WebGL Earth API: Markers</title>  
  37. </head>  
  38.   
  39. <body onload="initialize()">  
  40.     <div id="earth_div"></div>  
  41. </body>  
  42.   
  43. </html>  
 Polygon
劃設Polygon

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="http://www.webglearth.com/v2/api.js"></script>  
  6.     <script>  
  7.     function initialize() {  
  8.         var options = { zoom: 15.0, position: [24.176899, 120.651872] };  
  9.         var earth = new WE.map('earth_div', options);  
  10.         WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
  11.             attribution: '© OpenStreetMap contributors'  
  12.         }).addTo(earth);  
  13.   
  14.         var polygonA = WE.polygon([[24.176233, 120.651915], [24.176194, 120.658825],  
  15.           [24.174941, 120.659812], [24.171770, 120.661056], [24.169656, 120.656207], [24.173219, 120.655563]]  
  16.                 );  
  17.         polygonA.addTo(earth);  
  18.   
  19.         var polygonB = WE.polygon([[24.172475, 120.645521], [24.171718, 120.647055],  
  20.           [24.171241, 120.647540], [24.171963, 120.648408], [24.171276, 120.649199], [24.170333, 120.649671],  
  21.           [24.169565, 120.649161], [24.168482, 120.647566], [24.168901, 120.647004], [24.169926, 120.645945],  
  22.           [24.171369, 120.644248]], {  
  23.           color: '#f0f',  
  24.           opacity: 1,  
  25.           fillColor: '#0f0',  
  26.           fillOpacity: 0.5,  
  27.           editable: true,  
  28.           weight: 2  
  29.         }).addTo(earth);  
  30.     }  
  31.     </script>  
  32.     <style>  
  33.     html,  
  34.     body {  
  35.         padding: 0;  
  36.         margin: 0;  
  37.     }  
  38.      
  39.     #earth_div {  
  40.         top: 0;  
  41.         right: 0;  
  42.         bottom: 0;  
  43.         left: 0;  
  44.         position: absolute !important;  
  45.     }  
  46.     </style>  
  47.     <title>WebGL Earth API: Polygon</title>  
  48. </head>  
  49.   
  50. <body onload="initialize()">  
  51.     <div id="earth_div"></div>  
  52. </body>  
  53.   
  54. </html>  
心得小記
目前所提供的功能都還算是陽春
沒辦法直接套疊shape file或kml
Point或Polygon都要轉成json才能套疊
提供有興趣的人參考看看

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)