「查看」KML地標的鏈接列表

我想在GE旁邊添加一列，列出所有地標，鏈接或按鈕，當您點擊這些鏈接時，它將退出遊覽並跳轉到（或飛到）該地標的位置並彈出氣球。「查看」KML地標的鏈接列表

KML有一個FlyTo和LookAt在旅程中的列表以及在文檔中的地標:)。

這裏是我的KML地標的一個例子：

<Placemark id="Mussorie"> 
<name>Karen Snyder</name> 
    <description> 
    Karen Snyder is an Arts Specialist learning language and culture through the arts in  Mussorie, India 
    </description> 
    <styleUrl>#Icon</styleUrl> 
    <Point> 
    <coordinates>79.134521,30.040566,0</coordinates> 
    </Point> 
    </Placemark>

這裏是我的JavaScript和HTML：

<html> 
    <head> 
     <title>Shepherd Global Outreach Partners</title> 
     <script src="https://www.google.com/jsapi"> </script> 
     <script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js" type="text/javascript"> </script> 
     <script type="text/javascript"> 
     var ge; 
     var tour; 
     var curr_pm; 
     var obj_pm; 
     var linksit=''; 
     var linksitcount=1; 
     var links = []; 
     google.load("earth", "1"); 

     function init() { 
      var urlquery = location.href.split("?"); 
      if(urlquery[1]) { 
      var urlterms = urlquery[1].split(","); 
      curr_pm = urlterms[0]; 
      } 

      google.earth.createInstance('map3d', initCB, failureCB); 
     } 

     function initCB(instance) { 
      ge = instance; 
      ge.getWindow().setVisibility(true); 
      ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); 

      var href = 'http://www.shepnet.org/GO.kml?ID='+Math.floor((Math.random()*100000)+1) ; 
      google.earth.fetchKml(ge, href, fetchCallback); 

      function fetchCallback(fetchedKml) { 
      // Alert if no KML was found at the specified URL. 
      if (!fetchedKml) { 
       setTimeout(function() { 
        alert('Bad or null KML'); 
       }, 0); 
       return; 
      } 

      // Add the fetched KML into this Earth instance. 
      ge.getFeatures().appendChild(fetchedKml); 

      // Walk through the KML to find the tour object; assign to variable 'tour.' 
      walkKmlDom(fetchedKml, function() { 
       if (this.getType() == 'KmlTour') { 
        tour = this; 
        return false; 
       } 
      }); 

      if (tour) { 
       ge.getTourPlayer().setTour(tour); 
       ge.getTourPlayer().play(); 
       ge.getTourPlayer().setLoop(true) 
      } 

      if (!fetchedKml) { 
       // wrap alerts in API callbacks and event handlers 
       // in a setTimeout to prevent deadlock in some browsers 
       setTimeout(function() { 
       alert('Bad or null KML'); 
       }, 0); 
       return; 
      } 

      // Show the entire KML file in the plugin. 
      currentKmlObject = fetchedKml; 
      ge.getFeatures().appendChild(currentKmlObject); 

      //Walk the DOM looking for a KmlLineString - the Race Path 
      var links = []; 
      walkKmlDom(fetchedKml, function() { 
      if (this.getType() == 'KmlPlacemark') { 
       // create a link to the placemark 
       links.push('<a href="javascript:void(0);" onclick="flyto(\'' + this.getUrl() + '\')"> ' + this.getName() + ' </a><br>'); 
      }}); 

      for (index = 0; index < links.length; ++index) { 
       console.log(links[index]); 
      } 

      } 
     } 

     var flyto = function(url) { 
      // close any currently open balloon. 
      ge.setBalloon(null); 

      // find the placemark from the url parameter 
      var placemark = ge.getElementByUrl(url); 
      if(placemark == null) { 
      console.log("Placemark is null: " + url); 
      return; 
      } 

      // create a lookat based on that feature's geometry 
      var lookAt = ge.createLookAt(''); 
      lookAt.setLatitude(placemark.getGeometry().getLatitude()); 
      lookAt.setLongitude(placemark.getGeometry().getLatitude()) 

      // Update the view in Google Earth using the lookat 
      ge.getView().setAbstractView(lookAt); 

      // open the feature's balloon 
      ge.setBalloon(placemark.getBalloon()); 
     } 

     function failureCB(errorCode) { 
     } 

     function UCLA() { 
      ge.getTourPlayer().reset(); 
      var camera = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND); 
      camera.setLatitude(34.0688272174651); 
      camera.setLongitude(-118.445067424559); 
      camera.setAltitude(10000); 
      ge.getView().setAbstractView(camera); 
     } 

     function pauseTour() { 
      window.open(href = 'http://www.shepnet.org/GO.kml#UCLA'); 
     } 

     function resetTour() { 
      ge.getTourPlayer().reset(); 
     } 
     function exitTour() { 
      ge.getTourPlayer().setTour(null); 
     } 

     google.setOnLoadCallback(init); 

     </script> 
    </head> 
     <body> 
     <div id="map3d" style="height: 768px; width: 1280px;"></div> 
     <div id ="controls"> 
     <input type="button" onClick="flyto('http://www.shepnet.org/GO.kml#UCLA')" value="UCLA"/> 
     <input type="button" onClick="resetTour()" value="Stop/Reset Tour"/> 
     <input type="button" onClick="exitTour()" value="Exit Tour"/> 
     <a href="javascript:void(0);" onClick="flyto('http://www.shepnet.org/GO.kml#Mussorie')"> 'Mussorie' </a> 
     </div> 
     </body> 
    </html>

來源

2013-07-12 Gutseo

您可以修改當前walkKmlDom實現作爲一個已經走在KML DOM和檢查地標。即

walkKmlDom(fetchedKml, function() { 
      if (this.getType() == 'KmlPlacemark' && this.getID().toLowerCase() == curr_pm.toLowerCase()) { 
       obj_pm = this; 
        return false; // stop the DOM walk here. 
      }

只需使用它來構建到地標的鏈接列表。您可以在地標對象上使用getUrl來執行此操作。見https://developers.google.com/earth/documentation/accessors

var links = []; 
walkKmlDom(fetchedKml, function() { 
    if (this.getType() == 'KmlPlacemark') { 
    // create a link to the placemark 
    links.push('<a href="javascript:void(0);" onclick="flyto(' + this.getUrl() + ')"> ' + this.getName() + ' </a>'); 
    // rest of your current conditional logic here 
    // if(this.getID().toLowerCase()) etc.. 
    } 
} 

// do something with links... 
for (index = 0; index < links.length; ++index) { 
    console.log(links[index]); 
}

然後，你需要實現flyto輔助函數實際上飛到位置並打開氣球被點擊的鏈接時。像下面的東西應該工作。

var flyto = function(url) { 
    // close any currently open balloon. 
    ge.setBalloon(null); 

    // find the placemark from the url parameter 
    var placemark = ge.getElementByUrl(url); 
    if(placemark == null) { 
    console.log("Placemark is null: " + url); 
    return; 
    } 

    // create a lookat based on that feature's geometry 
    var lookAt = ge.createLookAt(''); 
    lookAt.setLatitude(placemark.getGeometry().getLatitude()); 
    lookAt.setLongitude(placemark.getGeometry().getLatitude()) 

    // Update the view in Google Earth using the lookat 
    ge.getView().setAbstractView(lookAt); 

    // open the feature's balloon 
    ge.setBalloon(placemark.getBalloon()); 
}

來源

2013-07-14 10:46:40 Fraser

嘿非常感謝你的回覆:)但我似乎仍然有問題，我敢肯定，當我談到這一點時，我總是會犯錯。就像我說的即時通訊新:(:(但我得到這個錯誤，當我創建一個鏈接到flyto功能TypeError：地址爲空 [Break On This Error] \t var point = placemark.getGeometry（）; – Gutseo

好吧，檢查地標是否存在的功能... – Fraser

我不能感謝你足夠的幫助我這個似乎它是通過你給我的腳本添加它需要的URL，但它似乎是網址#placemark實際上並沒有從KML文件中提取地標數據，每個地標都會返回null ..我已經添加了我的地標KML格式的示例以及更新後的HTML，以及您給我的更改。不想再幫忙了，謝謝你幫助我:) – Gutseo

「查看」KML地標的鏈接列表

回答

相關問題