Google Earth 和 Google Maps 以其強大的功能,低廉的價格及Google的影響力,快速發展已經成為GIS開發的首選,在這個系列裡面我将開始記錄學習Google Earth 開發的一些過程,指在和有意從事GIS開發的朋友一起學習(我不是GE高手-_-!!)。
1.北京東三環國貿,SOHO和CCTV
2.國家體育館及遊泳館
Google Earth 的Web應用程式提供了一套完善的javascript API 接口,并在Google官方提供了豐富的例題,供學習,下面一個例題也是我取自Google 的Demo, 很多朋友都非常熟悉了,如果你和我一樣剛開始接觸可以複制下面的代碼快速去體會和使用,為自己開辟一個新的職業捷徑,隻要有javaScript的基礎即可。
1.下載下傳一個Google Earth 用戶端插件安裝上
2.申請一個自己的ID,(不申請也沒關系,直接複制下面的代碼就可以運作:)
3.把下面的代碼複制到aspx檔案中運作即可,這是一個通過URL加載kml檔案的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>預覽GE配置檔案</title> <script src="JavaScript/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA7WGF96hesauuOvt92hVLGRSCo55h5L89YfkfbOZYeht3olu9OBQ-iPLPnY04cIbcfiDwRhN8JorTRg"></script> <script type="text/javascript"> var ge; google.load("earth", "1"); function init() { // 向Content中添加标簽和Google Earth 執行個體 var content = document.getElementById('content'); var defUrl = 'http://earth-api-samples.googlecode.com/svn/trunk/examples/static/red.kml'; var inputHTML = '<input type="text" id="kml-url" size="50" ' + 'value="' + defUrl + '"/>' + '<input type="submit" οnclick="fetchKmlFromInput()" value="呈現"/> ' + '<a href="' + defUrl + '" target="_blank" rel="external nofollow" > 下載下傳KML檔案 </a> ' + ' <br />'; content.innerHTML = inputHTML; google.earth.createInstance('content', initCB, failureCB); } //初始化執行個體的方法 function initCB(instance) { ge = instance; ge.getWindow().setVisibility(true); // 添加一個導航控件 ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); // 添加層 ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); // 前往指定位置 var la = ge.createLookAt(''); la.set(37, -122, 0, // 高度 ge.ALTITUDE_RELATIVE_TO_GROUND, 0, // heading 0, // straight-down tilt 5000 // range (inverse of zoom) ); ge.getView().setAbstractView(la); document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString(); } function failureCB(errorCode) { } var currentKmlObject = null; //加載KML文檔 function fetchKmlFromInput() { // 如果KML存在則移除掉原有的KML檔案 if (currentKmlObject) { ge.getFeatures().removeChild(currentKmlObject); currentKmlObject = null; } var kmlUrlBox = document.getElementById('kml-url'); var kmlUrl = kmlUrlBox.value; google.earth.fetchKml(ge, kmlUrl, finishFetchKml); } function finishFetchKml(kmlObject) { // 檢查加載屬性是否成功 if (kmlObject) { // 添加KML currentKmlObject = kmlObject; ge.getFeatures().appendChild(currentKmlObject); } else { alert('加載KML 失敗!'); } } google.setOnLoadCallback(init); </script> </head> <body style="font-family: Arial; font-size: 13px; border: 0 none;"> <div> 預覽指定GE 配置效果</div> <div id="content" style="width: 550px; height: 550px;"> Loading... </div> <br /> <br /> GE 插件版本: <div id="installed-plugin-version" style="display: inline;"> </div> </body> </html>
4.運作效果如下圖
是的,隻需要簡單的javaScript語句就可以實作GIS的開發,利用更多Google Earth 接口可以開發出豐富的GIS應用,朋友們快快嘗試一下吧。