天天看點

Google Earth & Asp.Net 一步一步從入門到精通(一)一個加載KML文檔的例子

     Google Earth 和 Google Maps 以其強大的功能,低廉的價格及Google的影響力,快速發展已經成為GIS開發的首選,在這個系列裡面我将開始記錄學習Google Earth 開發的一些過程,指在和有意從事GIS開發的朋友一起學習(我不是GE高手-_-!!)。

1.北京東三環國貿,SOHO和CCTV

Google Earth & Asp.Net 一步一步從入門到精通(一)一個加載KML文檔的例子

2.國家體育館及遊泳館

Google Earth & Asp.Net 一步一步從入門到精通(一)一個加載KML文檔的例子

     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.運作效果如下圖

Google Earth &amp; Asp.Net 一步一步從入門到精通(一)一個加載KML文檔的例子

   是的,隻需要簡單的javaScript語句就可以實作GIS的開發,利用更多Google Earth 接口可以開發出豐富的GIS應用,朋友們快快嘗試一下吧。

繼續閱讀