zoukankan      html  css  js  c++  java
  • Google Earth API开发者指南

    第一个小程序——“Hello World”

      记得在学校上编程课时,无论是Basic还是C,课本第一个示 例都是“Hello World”。今天,我们开始学习Google Earth API,仍然以这个最 简单的小示例开始。下列JavaScript源代码教您如何创建一个包含Google Earth的网 页。

    <html>
    <head>
    <title>Hello Google Earth!</title>
    <!-- *** Replace the key below below with your own API key, available athttp://code.google.com/apis/maps/signup.html *** -- >
    <script src="http://www.google.com/jsapikey=ABCDEF";></script >
    <script>
    google.load("earth", "1");
    var Google Earth = null;
    function init() {
    google.earth.createInstance("map3d", initCallback, failureCallback);
    }
    function initCallback(object) {
    Google Earth = object;
    Google Earth.Google EarthtWindow().setVisibility(true);
    }
    function failureCallback(object) {
    }
    </script>
    </head>
    <body onload= init() ;
    <div>
    Hello, Earth!
    </div>
    <div id= map3d_container
    style= border: 1px solid silver; height: 600px; 800px; >
    <div id= map3d  style= height: 100%; ></div>
    </div>
    </body>
    </html>

      您可以直接把这段代码复制下来,把里面的“Key”换成您 自己申请的Key值(详见序)。如果您不方便申请Key,又想看看这段源代码的运行效 果,那么也没关系,您可以点击查看这个链接(http://www.google.com/earth/plugin/examples/helloearth/)——前提是您必须已安装了Google Earth插件。

      上面这段代码中,您需要注意四个方面(上述代码中已用绿 色粗体字显示):
      Google Earth API脚本语句必须包含script标签,即“<script>”。
      用div标签把Google Earth窗口框起来。
      用JavaScript函数来创建Google Earth对象。
      在body标签的onLoad事件来初始化Google Earth对象。

    下面就对上述要点做一简单说明:

    加载Google Earth API

      <script src="http://www.google.com/jsapikey=ABCDEF";></script >

      想必大家都已经知道,在编写Google Earth网页时,必须先 申请key。http://www.google.com/jsapikey=ABCDEF是一个链接,链接 那一头包含了您要使用Google Earth API所需要的所有Javascript元件、标签和定 义文件。此例中key值为假设值“ABCDEF”。

    DOM
      <div id= map3d_container
      style= border: 1px solid silver; height: 600px; 800px; >
      <div id= map3d  style= height: 100%; ></div>
      </div>

      由于要在网页上显示Google Earth窗口,所以必须给它留 些位置。这人“位置”就是用已命名的div标签来创建,并以此来获取浏览器文档对 象模型的参考。在这个示例中,div标签被命名为“map_3d_container”,其长宽均 由相应属性设定。

    加载Google Earth

      <body onload= init()  id= body >

      当HTML页面编译时,文档对象模型(DOM)以及所有外部图 像、脚本均被融合到文档(document)对象中。为了确保页面完全加载后地图能显示 在指定位置,我们可以单步调试,当<body>标签内的onLoad事件被触发时,仅 执行Google Earth对象的函数,仔细观察运行效果。这样做是为了避免不确定因素或人为失误, 使我们对地图的绘制与显示得以掌控。

    创建地标

      地标是Google Earth里最常用的功能之一,它用一颗小图 钉来表示地标制作/发布者的指定方位。您可以对地标进行编辑——修改名称或图标 ,也可以加入其他地理属性一。下列代码创建了一个地标,该地标位于Google位于美 国硅谷总部的园区。

    var placemark = Google Earth.createPlacemark(  );
    placemark.setName("You are at Google");
    Google Earth.Google EarthtFeatures().appendChild(placemark);
    // Create style map for placemark
    var normal = Google Earth.createIcon(  );
    normal.setHref( http://maps.google.com/mapfiles/kml/paddle/red- circle.png );
    var iconNormal = Google Earth.createStyle(  );
    iconNormal.Google EarthtIconStyle().setIcon(normal);
    var highlight = Google Earth.createIcon(  );
    highlight.setHref( http://maps.google.com/mapfiles/kml/paddle/red- circle.png );
    var iconHighlight = Google Earth.createStyle(  );
    iconHighlight.Google EarthtIconStyle().setIcon(highlight);
    var styleMap = Google Earth.createStyleMap(  );
    styleMap.setNormalStyle(iconNormal);
    styleMap.setHighlightStyle(iconHighlight);
    placemark.setStyleSelector(styleMap);
    // Create point
    var la = Google Earth.Google EarthtView().copyAsLookAt (Google Earth.ALTITUDE_RELATIVE_TO_GROUND);
    var point = Google Earth.createPoint(  );
    point.setLatitude(la.Google EarthtLatitude());
    point.setLongitude(la.Google EarthtLongitude());
    placemark.setGoogle Earthometry(point);

    地标效果如下图所示

    创建地标过程中,您必须指定两项内容:

      地标名称。上例中,地标名称为“You are at Google”。

      地标位置。即明确的经纬度和任意海拨。上例中,经纬度由 “LookAt”指定(“LookAt”用来定义视角,即浏览地标的方向、角度、高度)。

    创建气泡提示

      创建地标之后,您可以添加一个“气泡提示”,对地标加以 说明。“气泡提示”完全支持HTML格式,也就是说,说明内容可以包含文本、图片、 表格、超链接等。目前“气泡”有三种类型:

      特征气泡
      文字气泡
      DIV气泡
      下列代码将创建一个特征气泡:
      var b = Google Earth.createFeatureBalloon(  );
      b.setFeature(marker);
      b.setMaxWidth(800);
      Google Earth.setBalloon(b);

      下列代码将创建一个文字气泡,文字显示为珠穆朗玛峰,字 体设为粗体大号:

      var b = Google Earth.createHtmlStringBalloon(  );
      b.setMaxWidth(300);
      b.setFeature(feature);
      b.setContentString (
      <b.setContentString (
      <img src="http://www.google.com/intl/en_ALL/imaGoogle Earths/logo.gif";> ;  +
      <font size=20>Mount Everest</font><br><font size=-2>on top of the world   +  window</font> );
      Google Earth.setBalloon(b);

      效果如下图所示:

      下列代码将创建DIV 气泡:

      var b = Google Earth.createHtmlDivBalloon(  );
      b.setMaxWidth(800);
      b.setFeature(feature);
      var div = document.createElement( DIV );
      div.innerHTML =
    <img src="http://www.google.com/googlegulp/imaGoogle Earths/logo.gif";> <br>
    +  <a href="http://www.google.com/googlegulp/";>Google Gulp</a> ;
      b.setContentDiv(div);
      Google Earth.setBalloon(b);

      您可以通过改变字体、文字颜色、图片以及排版格式来进 行自定义。如果要关闭说明框,可以用下面这条Javascript语句:Google Earth.setBalloon (null);

    如何控制游览视角

      您可以用LookAt对象来指定Google Earth察看点、察看距离 及角度。下例代码把察看位置向北移动7度(经度),向东移动7度(纬度)。
      var lookAt = Google Earth.Google EarthtView().copyAsLookAt (Google Earth.ALTITUDE_RELATIVE_TO_GROUND);
      lookAt.setLatitude(lookAt.Google EarthtLatitude() + 7.0);
      lookAt.setLongitude(lookAt.Google EarthtLongitude() + 7.0);
      Google Earth.Google EarthtView().setAbstractView(lookAt);

    创建路径

      在Google Earth内可创建多种类型的路径,并且可根据您 的数据进行定制。路径由“lineString”对象创建,可以通过定义一串连续的线段来 创建弯折路径。当使用lineString对象时,您必须指定lineString是否与地面相连。 Tessellate属性可以将直线分割成若干线段。

      var lineString;
      lineString = Google Earth.createLineString(  );
      var lineStringPlacemark = Google Earth.createPlacemark(  );
      lineStringPlacemark.setGoogle Earthometry(lineString);
      lineString.setTessellate(true);
      Google Earth.Google EarthtDocument().Google EarthtFeatures().appendChild(lineStringPlacemark);
      addToLineString(lineString, 0, 0, 0);
      addToLineString(lineString, .1, .05, 0);
      addToLineString(lineString, 0, .10, 0);
      addToLineString(lineString, .1, .15, 0);
      addToLineString(lineString, 0, .20, 0);
      addToLineString(lineString, .1, .25, 0);

      下图即为Google Earth中创建的路径:

    改变路径样式

      可以通过指定颜色和宽度来确定路径样式。下列JavaScript 代码针对上述路径,增加了线条宽度,并把颜色改为蓝色。样式更改后效果如下图所 示。
      var lineStyle = lineStringPlacemark.Google EarthtStyleSelector ().Google EarthtLineStyle();
      lineStyle.setWidth(lineStyle.Google EarthtWidth() + 2);
      lineStyle.Google EarthtColor().set( 66ff0000 );

    创建多边形

      您可以通过多边形功能来创建房屋或其他形状。下列代码, 创建了一个矩形,其内外边框均设为白色。
      var polygonPlacemark = Google Earth.createPlacemark(  );
      polygonPlacemark.setGoogle Earthometry(Google Earth.createPolygon(  ));
      var outer = Google Earth.createLinearRing(  );
      polygonPlacemark.Google EarthtGoogle Earthometry().setOuterBoundary(outer);
      Google Earth.Google EarthtDocument().Google EarthtFeatures().appendChild(polygonPlacemark);
      // Square outer boundary
      var center = Google Earth.createLookAt(  );
      center = Google Earth.Google EarthtView().copyAsLookAt (Google Earth.ALTITUDE_RELATIVE_TO_GROUND);
      var coords = outer.Google EarthtCoordinates();
      var lat = center.Google EarthtLatitude();
      var lon = center.Google EarthtLongitude();
      coords.pushLatLngAlt(lat - .05, lon - .05, 0);
      coords.pushLatLngAlt(lat - .05, lon + .05, 0);
      coords.pushLatLngAlt(lat + .05, lon + .05, 0);
      coords.pushLatLngAlt(lat + .05, lon - .05, 0);
      // Create a square inner boundary
      polygonPlacemark.Google EarthtGoogle Earthometry().Google EarthtInnerBoundaries().
      appendChild(Google Earth.createLinearRing(  ));
      coords = polygonPlacemark.Google EarthtGoogle Earthometry().Google EarthtInnerBoundaries ().Google EarthtFirstChild().
      Google EarthtCoordinates();
      coords.pushLatLngAlt(lat - .02, lon - .02, 0);
      coords.pushLatLngAlt(lat - .02, lon + .02, 0);
      coords.pushLatLngAlt(lat + .02, lon + .02, 0);
      coords.pushLatLngAlt(lat + .02, lon - .02, 0);

      效果如下图所示

    更改多边形样式
      跟路径一样,您可以通过改变颜色和边框宽度,自己设定多边形样式。见下例 ,把矩形边设为红色,边框为蓝色。
      var lineStyle = polygonPlacemark.Google EarthtStyleSelector ().Google EarthtLineStyle();
      lineStyle.setWidth(lineStyle.Google EarthtWidth() + 2);
      lineStyle.Google EarthtColor().set( 66ff0000 );
      polygonPlacemark.Google EarthtStyleSelector().Google EarthtPolyStyle().Google EarthtColor().set ( 660000ff );

    使用在线地标

      在线地标,顾名思义,必然有一项属性超链接,该链接指向 存放在网络上的地标文件,包含以下三类:
      图标文件、地面叠加图、屏幕叠加图。
      模型(SketchUp文件尤佳)。
      KML或KMZ文件。
      链接文件可以存放在本地,也可存放在远程服务器上。在线地标的最大优势就 是可以方便有效地管理、使用大容量或更新频繁的文件。如果在本地打开大容量地标 文件,那对机器硬件将是一大考验。
      下列代码将创建一款在线地标:

      svar networkLink = Google Earth.createNetworkLink("");
      networkLink.setDescription("NetworkLink open to fetched content");
      networkLink.setName("Open NetworkLink");
      networkLink.setFlyToView(true);
      var link = Google Earth.createLink("");
      link.setHref("http://kml-samples.googlecode.com"; +
    "/svn/trunk/kml/NetworkLink/placemark.kml");
      networkLink.setLink(link);
      Google Earth.Google EarthtFeatures().appendChild(networkLink);

    管理事件

      JavaScript语言是基于事件驱动的,也就是说,事件的产生 将激发JavaScript作出反应,程序把结果反馈给用户。例如,在浏览器内,用户的键 盘、鼠标动作将触发文档对象模型(DOM)内的事件。事件内的代码会先将其监听模 块注册,当事件激活/产生时,便立即执行相关反馈代码。

      Google Earth API的事件由Google Earthvent命名空间里的函数来控制 的。每一个Google Earth API对象都对应若干事件。例如,“KmlPlacemark”对象 有“Click”(单击),“dblclick”(双击),“move”(移动)等事件。每种事件都只 适应特定操作,比如,用户在Google Earth里移动鼠标就会触发“mousemove”事 件。在下列代码中,您将看到事件是如何被管理的:

      function myEventListener(kmlEvent) {
      var tarGoogle EarthtType = kmlEvent.Google EarthtTarGoogle Eartht().Google EarthtType();
      var currentTarGoogle EarthtType = kmlEvent.Google EarthtCurrentTarGoogle Eartht().Google EarthtType();
      var button = kmlEvent.Google EarthtButton());
      var clientX = kmlEvent.Google EarthtClientX();
      var clientY = kmlEvent.Google EarthtClientY();
      var screenX = kmlEvent.Google EarthtScreenX();
      var screenY = kmlEvent.Google EarthtScreenY();
      var latitude = kmlEvent.Google EarthtLatitude();
      var longitude = kmlEvent.Google EarthtLongitude();
      var altitude = kmlEvent.Google EarthtAltitude();
      var didHitGlobe = kmlEvent.Google EarthtDidHitGlobe();
      var altKey = kmlEvent.Google EarthtAltKey();
      var ctrlKey = kmlEvent.Google EarthtCtrlKey();
      var shiftKey = kmlEvent.Google EarthtShiftKey();
      var timeStamp = kmlEvent.Google EarthtTimeStamp();
      }
      // This will trigGoogle Earthr myEventListener() when user clicks on  placemark ,
      // and will pass in a KmlEvent object.
      google.earth.addEventListener(placemark, "mousedown", myEventListener);
      // This will trigGoogle Earthr myEventListener() when user clicks on the globe,
      // and will pass in a KmlEvent object.
      google.earth.addEventListener(Google Earth.Google EarthtGlobe(), "mousedown", myEventListener);
      // This will trigGoogle Earthr myEventListener() when user clicks anywhere in the window,
      // and will pass in a KmlEvent object.
      google.earth.addEventListener(Google Earth.Google EarthtWindow(), "mousedown", myEventListener);

  • 相关阅读:
    2014阿里巴巴面试题哈尔滨
    Hadoop分布式集群配置
    Ubuntu上搭建Hadoop环境(单机模式+伪分布模式)
    安装VMware Workstation提示the msi failed的解决办法
    Scalaz(35)- Free :运算-Trampoline,say NO to StackOverflowError
    Scalaz(34)- Free :算法-Interpretation
    Scalaz(33)- Free :算式-Monadic Programming
    Scalaz(32)- Free :lift
    Scalaz(31)- Free :自由数据结构-算式和算法的关注分离
    Scalaz(30)- Free :Natural Tranformation ~>
  • 原文地址:https://www.cnblogs.com/gywei/p/3346110.html
Copyright © 2011-2022 走看看