Google Earth API开发者指南(初级)

Google Earth API开发者指南(初级)

Google Earth API开发者指南(序)http://bbs.godeyes.cn/Announce/Announce.asp?BoardID=100&ID=335615



第一个小程序——“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 at http://code.google.com/apis/maps/signup.html *** -->
    <script src="http://www.google.com/jsapi?key=ABCDEF";></script>
    <script>

google.load("earth", "1");



var ge = null;



function init() {
  google.earth.createInstance("map3d", initCallback, failureCallback);

}



function initCallback(object) {
  ge = object;
  ge.getWindow().setVisibility(true);

}



function failureCallback(object) {

}


    </script>
  </head>
  <body οnlοad='init()';


      <div>
        Hello, Earth!
      </div>


      <div id='map3d_container'
           style='border: 1px solid silver; height: 600px; width: 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/jsapi?key=ABCDEF";></script>

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



DOM

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

</div>

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



加载Google Earth

<body οnlοad='init()' id='body'>

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





创建地标

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

var placemark = ge.createPlacemark('');

placemark.setName("You are at Google");

ge.getFeatures().appendChild(placemark);



// Create style map for placemark

var normal = ge.createIcon('');

normal.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');

var iconNormal = ge.createStyle('');

iconNormal.getIconStyle().setIcon(normal);

var highlight = ge.createIcon('');

highlight.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');

var iconHighlight = ge.createStyle('');

iconHighlight.getIconStyle().setIcon(highlight);

var styleMap = ge.createStyleMap('');

styleMap.setNormalStyle(iconNormal);

styleMap.setHighlightStyle(iconHighlight);

placemark.setStyleSelector(styleMap);
 

// Create point

var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

var point = ge.createPoint('');

point.setLatitude(la.getLatitude());

point.setLongitude(la.getLongitude());

placemark.setGeometry(point);

地标效果如下图所示

850)this.width=850;" style="CURSOR: hand" οnclick=javascript:window.open(this.src); src="http://bbs.godeyes.cn/upload/2008/07/03/165253.jpg" οnlοad="javascript:if(this.width>850)this.width=850;" align=absMiddle border=0>



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

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

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





创建气泡提示

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

?      特征气泡

?      文字气泡

?      DIV气泡

下列代码将创建一个特征气泡:

var b = ge.createFeatureBalloon('');

b.setFeature(marker);

b.setMaxWidth(800);

ge.setBalloon(b);



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

var b = ge.createHtmlStringBalloon('');

b.setMaxWidth(300);

b.setFeature(feature);

b.setContentString (

'<b.setContentString (

'<img src="http://www.google.com/intl/en_ALL/images/logo.gif";>' +

'<font size=20>Mount Everest</font><br><font size=-2>on top of the world ' + 'window</font>');

ge.setBalloon(b);

效果如下图所示:

850)this.width=850;" style="CURSOR: hand" οnclick=javascript:window.open(this.src); src="http://bbs.godeyes.cn/upload/2008/07/03/165414.jpg" width=850 οnlοad="javascript:if(this.width>850)this.width=850;" align=absMiddle border=0>



下列代码将创建DIV 气泡:

var b = ge.createHtmlDivBalloon('');

b.setMaxWidth(800);

b.setFeature(feature);

var div = document.createElement('DIV');

div.innerHTML =
        '<img src="http://www.google.com/googlegulp/images/logo.gif";><br>'
        + '<a href="http://www.google.com/googlegulp/";>Google Gulp</a>';

b.setContentDiv(div);

ge.setBalloon(b);



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





如何控制游览视角

您可以用LookAt对象来指定Google Earth察看点、察看距离及角度。下例代码把察看位置向北移动7度(经度),向东移动7度(纬度)。

var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

lookAt.setLatitude(lookAt.getLatitude() + 7.0);

lookAt.setLongitude(lookAt.getLongitude() + 7.0);

ge.getView().setAbstractView(lookAt);





创建路径

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

var lineString;

lineString = ge.createLineString('');

var lineStringPlacemark = ge.createPlacemark('');

lineStringPlacemark.setGeometry(lineString);

lineString.setTessellate(true);

ge.getDocument().getFeatures().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中创建的路径:

850)this.width=850;" style="CURSOR: hand" οnclick=javascript:window.open(this.src); src="http://bbs.godeyes.cn/upload/2008/07/03/165502.jpg" οnlοad="javascript:if(this.width>850)this.width=850;" align=absMiddle border=0>



改变路径样式

可以通过指定颜色和宽度来确定路径样式。下列JavaScript代码针对上述路径,增加了线条宽度,并把颜色改为蓝色。样式更改后效果如下图所示。

var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();

lineStyle.setWidth(lineStyle.getWidth() + 2);

lineStyle.getColor().set('66ff0000');

850)this.width=850;" style="CURSOR: hand" οnclick=javascript:window.open(this.src); src="http://bbs.godeyes.cn/upload/2008/07/03/165552.jpg" οnlοad="javascript:if(this.width>850)this.width=850;" align=absMiddle border=0>
 



创建多边形

您可以通过多边形功能来创建房屋或其他形状。下列代码,创建了一个矩形,其内外边框均设为白色。

var polygonPlacemark = ge.createPlacemark('');

polygonPlacemark.setGeometry(ge.createPolygon(''));

var outer = ge.createLinearRing('');

polygonPlacemark.getGeometry().setOuterBoundary(outer);

ge.getDocument().getFeatures().appendChild(polygonPlacemark);



// Square outer boundary

var center = ge.createLookAt('');

center = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

var coords = outer.getCoordinates();

var lat = center.getLatitude();

var lon = center.getLongitude();

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.getGeometry().getInnerBoundaries().
  appendChild(ge.createLinearRing(''));

coords = polygonPlacemark.getGeometry().getInnerBoundaries().getFirstChild().
  getCoordinates();

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);



效果如下图所示

850)this.width=850;" style="CURSOR: hand" οnclick=javascript:window.open(this.src); src="http://bbs.godeyes.cn/upload/2008/07/03/165621.jpg" οnlοad="javascript:if(this.width>850)this.width=850;" align=absMiddle border=0>



更改多边形样式

跟路径一样,您可以通过改变颜色和边框宽度,自己设定多边形样式。见下例,把矩形边设为红色,边框为蓝色。

var lineStyle = polygonPlacemark.getStyleSelector().getLineStyle();

lineStyle.setWidth(lineStyle.getWidth() + 2);

lineStyle.getColor().set('66ff0000');

polygonPlacemark.getStyleSelector().getPolyStyle().getColor().set('660000ff');

850)this.width=850;" style="CURSOR: hand" οnclick=javascript:window.open(this.src); src="http://bbs.godeyes.cn/upload/2008/07/03/165645.jpg" οnlοad="javascript:if(this.width>850)this.width=850;" align=absMiddle border=0>
 



使用在线地标

在线地标,顾名思义,必然有一项属性超链接,该链接指向存放在网络上的地标文件,包含以下三类:

?      图标文件、地面叠加图、屏幕叠加图。

?      模型(SketchUp文件尤佳)。

?      KML或KMZ文件。

链接文件可以存放在本地,也可存放在远程服务器上。在线地标的最大优势就是可以方便有效地管理、使用大容量或更新频繁的文件。如果在本地打开大容量地标文件,那对机器硬件将是一大考验。

下列代码将创建一款在线地标: s

var networkLink = ge.createNetworkLink("");

networkLink.setDescription("NetworkLink open to fetched content");

networkLink.setName("Open NetworkLink");

networkLink.setFlyToView(true);  

var link = ge.createLink("");

link.setHref("http://kml-samples.googlecode.com"; +
             "/svn/trunk/kml/NetworkLink/placemark.kml");

networkLink.setLink(link);

ge.getFeatures().appendChild(networkLink);



管理事件

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



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

function myEventListener(kmlEvent) {
  var targetType = kmlEvent.getTarget().getType();
  var currentTargetType = kmlEvent.getCurrentTarget().getType();
  var button = kmlEvent.getButton());
  var clientX = kmlEvent.getClientX();
  var clientY = kmlEvent.getClientY();
  var screenX = kmlEvent.getScreenX();
  var screenY = kmlEvent.getScreenY();
  var latitude = kmlEvent.getLatitude();
  var longitude = kmlEvent.getLongitude();
  var altitude = kmlEvent.getAltitude();
  var didHitGlobe = kmlEvent.getDidHitGlobe();
  var altKey = kmlEvent.getAltKey();
  var ctrlKey = kmlEvent.getCtrlKey();
  var shiftKey = kmlEvent.getShiftKey();
  var timeStamp = kmlEvent.getTimeStamp();

}



// This will trigger myEventListener() when user clicks on 'placemark',

// and will pass in a KmlEvent object.

google.earth.addEventListener(placemark, "mousedown", myEventListener);



// This will trigger myEventListener() when user clicks on the globe,

// and will pass in a KmlEvent object.

google.earth.addEventListener(ge.getGlobe(), "mousedown", myEventListener);



// This will trigger myEventListener() when user clicks anywhere in the window,

// and will pass in a KmlEvent object.

google.earth.addEventListener(ge.getWindow(), "mousedown", myEventListener);
展开阅读全文

没有更多推荐了,返回首页