2015-06-19 3 views
2

Я использую файл 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) Как я могу добавить тег point для всех тегов placemark. Есть ли способ добавить динамически ?. Мой файл 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 в картах Google.

Это мой 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> 
......... 
........... 
+0

вам нужны координаты центра полигона в KML ли? Поскольку вы используете geoxml3, вы можете вычислить центр границ многоугольника и разместить там маркер там динамически. – geocodezip

+0

Как вычислить центр многоугольника с помощью geoxml3? Пожалуйста, покажите мне некоторую ссылку для этого –

+0

Пожалуйста, напишите [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve) кода, который вы пытаетесь изменить. – geocodezip

ответ

1

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

+0

Это действительно работает. Большое спасибо –

1

KML является XML-документ, то вы можете добавить с нормальной манипуляции xmlDOC функции, например

xmlDoc=loadXMLDoc("yourfile.klm"); 

newel=xmlDoc.createElement("yourElementToAdd"); 

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

Thats ok. Но мне нужно добавить координаты по центру многоугольника меток. Как это сделать? –

+0

Чтобы получить центр многоугольника, вы должны получить содержимое тега раскол iand extract min lat, max lat, min lng, max lng adn finaly вычислить центр – scaisEdge

+0

ok Я попробую –

Смежные вопросы