如何動態更新kml文件/圖層？

我正在使用kml文件來顯示具有自定義邊界線的地圖。該kml文件是從某個網站下載的。在該文件中，在placemark標記內沒有用於顯示圖標的標記point。例如：如何動態更新kml文件/圖層？

<Placemark> 
    <name>Spot 2</name> 
    <description>.....</description> 
    <styleUrl>....</styleUrl> 
    <MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates> 
    ......... 
    </coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry> 
</Placemark>

這就是placemark標籤包含在我的kml文件中。我需要，

1）如何爲所有placemark標記添加point標記。有什麼辦法可以動態添加嗎？我的kml文件有5000個以上的地標。 2）點標記座標將指向多邊形的中心。

即）我需要以下

<Placemark> 
    <name>Spot 2</name> 
    <description>.....</description> 
    <styleUrl>....</styleUrl> 
    <MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates> 
    ......... 
    </coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry> 
    <Point> 
     <coordinates>144.253,-36.6632,0</coordinates> 
    </Point> 
</Placemark>

注：

我使用geoxml3分析器可以顯示在谷歌地圖KML層。

這是我的html文件，

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>KML Layers</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script> 
    <script> 
function initialize() { 
    var usa = new google.maps.LatLng(41.875696,-87.624207); 
    var mapOptions = { 
    zoom: 4, 
    center: usa, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

var myParser = new geoXML3.parser({ 
    map: map 
    }); 
    var kml = myParser.parse('http://localhost/test/DFWNorth.kml'); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

這是我的樣本KML文件，

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2" 
    xmlns:gx="http://www.google.com/kml/ext/2.2"> 
<Document> 
    <name>Real Estate Portal USA Parcels</name> 
    <open>1</open> 

    <Style id="parcel"> 
    <LineStyle> 
     <color>ff48a7ff</color> 
     <width>1</width> 
    </LineStyle> 
    <PolyStyle> 
     <outline>1</outline> 
     <color>00ffffff</color> 
    </PolyStyle> 
    </Style> 

    <Style id="hl_parcel"> 
    <IconStyle> 
     <scale>0.3</scale> 
     <Icon> 
     <href>http://bus.w.pw/R.png</href> 
     </Icon> 
    </IconStyle> 
    <LabelStyle> 
     <color>9900ffff</color> 
     <scale>1</scale> 
    </LabelStyle> 
    <LineStyle> 
     <color>ff00ffff</color> 
     <width>1.5</width> 
    </LineStyle> 
    <PolyStyle> 
     <outline>1</outline> 
     <color>5f000000</color> 
    </PolyStyle> 
    </Style> 
    <Folder> 
    <open>1</open> 
    <name>Selected Parcels</name> 
    <Placemark> 
     <name><![CDATA[1100 N 27TH Ave]]></name> 
     <description> 
............ 
</description> 
     <styleUrl>#hl_parcel</styleUrl> 
     <MultiGeometry> 
     <Polygon> 
      <outerBoundaryIs> 
      <LinearRing> 
       <coordinates>-97.032117983752471,32.928768626517076 -97.024643584146915,32.923035186813181 -97.024619516424863,32.923056622674181 -97.023311876445746,32.922172553473487 -97.023027365973348,32.921986354508512 -97.022978167636879,32.921954156605246 -97.022101518923066,32.921458657105333 -97.021852382220004,32.921328433111441 -97.021603007761968,32.921212207649802 -97.021353262564418,32.921103685381986 -97.020040739077089,32.92059307329437 -97.019977072943703,32.920561642411542 -97.019978949582082,32.920357989560173 -97.019981935486342,32.920034178750491 -97.032338461906804,32.92018039810069 -97.03217983292177,32.928807043604458 -97.032117983752471,32.928768626517076</coordinates> 
      </LinearRing> 
      </outerBoundaryIs> 
     </Polygon> 
    </MultiGeometry> 
    </Placemark> 
......... 
...........

來源

2015-06-19 Vignesh Bala

您是否需要KML中多邊形中心的座標？由於您使用的是geoxml3，因此您可以計算多邊形邊界的中心並動態地在其中放置標記。 – geocodezip

如何使用geoxml3計算多邊形的中心？請向我展示一些參考資料 –

請發佈您正在嘗試修改的代碼的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）。 – geocodezip

geoxml3將KML解析爲本地google.maps.Polygon對象。您可以在afterParse功能處理這些多邊形：

var myParser = new geoXML3.parser({ 
    map: map, 
    afterParse: useTheData 
}); 
var kml = myParser.parse('kml/SO_20150619a.kml'); 
function useTheData(doc) { 
    for (var i=0; i < doc[0].gpolygons.length; i++) { 
    var centroid = new google.maps.Marker({map:map,position: get_polygon_centroid(doc[0].gpolygons[i].getPath().getArray())}); 
    } 
}

爲了獲得多邊形的質心：

// from http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of-a-concave-irregular-polygon-in-javascript 
function get_polygon_centroid(pts) { 
    var first = pts[0], last = pts[pts.length-1]; 
    if (first.lat() != last.lat() || first.lng() != last.lng()) pts.push(first); 
    var twicearea=0, 
    x=0, y=0, 
    nPts = pts.length, 
    p1, p2, f; 
    for (var i=0, j=nPts-1 ; i<nPts ; j=i++) { 
     p1 = pts[i]; p2 = pts[j]; 
     f = p1.lat()*p2.lng() - p2.lat()*p1.lng(); 
     twicearea += f;   
     x += (p1.lng() + p2.lng()) * f; 
     y += (p1.lat() + p2.lat()) * f; 
    } 
    f = twicearea * 3; 
    return new google.maps.LatLng(y/f, x/f); 
}

注意上面只有「真正起作用」爲規則多邊形，所以不規則多邊形與凹中心的邊緣可能不在「多邊形內」。

Working example

來源

2015-06-20 04:47:00 geocodezip

它確實工作。非常感謝 –

KML是一個XML文檔，那麼你可以用正常的xmlDoc中操作的功能，例如增加

xmlDoc=loadXMLDoc("yourfile.klm"); 

newel=xmlDoc.createElement("yourElementToAdd"); 

x=xmlDoc.getElementsByTagName("yourElementToAppend")[0]; 
x.appendChild(newel);

來源

2015-06-19 06:08:21 scaisEdge

那沒關係。但我需要根據地標的多邊形的中心添加座標。怎麼做？ –

對於objtain多邊形的中心，你必須得到標籤的內容分裂並提取最小拉特，最大拉特，最小lng，最大lng和最終計算中心 – scaisEdge

好的我會試試 –

如何動態更新kml文件/圖層？

回答

相關問題