代码改变世界

Google Earth & Asp.Net 一步一步从入门到精通（一）一个加载KML文档的例子

2009-03-06 22:31  闫妍  阅读(300)  评论(0)  编辑  收藏  举报

     Google Earth 和 Google Maps 以其强大的功能，低廉的价格及Google的影响力，快速发展已经成为GIS开发的首选，在这个系列里面我将开始记录学习Google Earth 开发的一些过程，指在和有意从事GIS开发的朋友一起学习（我不是GE高手-_-!!）。

1.北京东三环国贸，SOHO和CCTV

2009-03-05_174428

2.国家体育馆及游泳馆

2009-03-05_174901

     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" onclick="fetchKmlFromInput()" value="呈现"/> ' +
                      '<a href="' + defUrl + '" > 下载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.运行效果如下图

2009-03-06_222157

   是的，只需要简单的javaScript语句就可以实现GIS的开发，利用更多Google Earth 接口可以开发出丰富的GIS应用，朋友们快快尝试一下吧。