个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 19:25:39 25 4
gpt4 key购买 nike

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

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

这就是我的 kml 文件中包含的 placemark 标签。我需要，

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>
.........
...........

最佳答案

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

关于javascript - 如何动态更新 kml 文件/图层？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30930166/

25 4 0
文章推荐： mysql - 无法通过远程访问连接到mysql服务器
文章推荐： mysql - 如何使用我的站点目录中的现有文件创建 WordPress 数据库文件？
文章推荐： javascript - 如何在不使用 jQuery 或 javascript 更改浏览器设置的情况下保留 cookie？
文章推荐： android - 为什么 EditText 和 NavigationIcon 之间的宽度不相等
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com