如何动态更新 kml 文件/图层

How to update kml file/layer dynamically?

本文关键字：kml 文件 图层 更新 何动态 动态      更新时间：2023-09-26

我正在使用一个kml文件来显示带有自定义边界线的地图。该 kml 文件是从某个网站下载的。在该文件中，placemark 标记内没有显示图标的point标记。例如：

<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图层。

这是我的 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>
.........
...........

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

请注意，上述内容仅"真正适用于"常规多边形，因此中心边缘凹陷的不规则多边形可能不在多边形中。

工作示例

KML 是一个 XML 文档，然后您可以使用普通的 xmlDOC 操作函数添加，例如 

xmlDoc=loadXMLDoc("yourfile.klm");
newel=xmlDoc.createElement("yourElementToAdd");
x=xmlDoc.getElementsByTagName("yourElementToAppend")[0];
x.appendChild(newel);
相关文章：