javascript - How to update kml file/layer dynamically? -
i using kml
file displaying map custom boundary lines. kml file downloaded website. in file, inside placemark
tag there no point
tag display icons. eg:
<placemark> <name>spot 2</name> <description>.....</description> <styleurl>....</styleurl> <multigeometry><polygon><outerboundaryis><linearring><coordinates> ......... </coordinates></linearring></outerboundaryis></polygon></multigeometry> </placemark>
that placemark
tag contains in kml file. , need,
1) how can add point
tag placemark
tag. there way add dynamically?. kml file has 5000 , above placemarks. 2) point tag coordinates refers center of polygon.
i.e) need following
<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>
note:
i using geoxml3 parser display kml layer in google maps.
this html file,
<!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>
this sample kml file,
<?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> ......... ...........
geoxml3 parses kml native google.maps.polygon objects. can process polygons in afterparse
function:
var myparser = new geoxml3.parser({ map: map, afterparse: usethedata }); var kml = myparser.parse('kml/so_20150619a.kml'); function usethedata(doc) { (var i=0; < doc[0].gpolygons.length; i++) { var centroid = new google.maps.marker({map:map,position: get_polygon_centroid(doc[0].gpolygons[i].getpath().getarray())}); } }
to centroid of polygon:
// 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; ( 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); }
note above "really works" regular polygons, irregular polygons concave edges center might not "in" polygon.
Comments
Post a Comment