渲染的 KML 图层不填充多边形

Question

我正在尝试在 Gmaps API 项目上渲染一些简单的 kml 图层，但我发现，无论我怎样尝试，多边形都不会填充。

我使用以下代码加载 KML 图层：

var kmlLayerCenter = new   google.maps.KmlLayer('<kmlFileRoute>', {
        suppressInfoWindows: true,
        preserveViewport: true,
        map: map
    });

这是 KML 代码：

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document id="root_doc">
    <Folder>
      <name>Distrito_Centro_KML</name>
      <Placemark>
        <Style>
          <LineStyle>
            <color>ff0000ff</color>
          </LineStyle>
          <PolyStyle>
            <fill>1</fill>
            <color>ff0000ff</color>
            <outline>1</outline>
          </PolyStyle>
        </Style>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates>
                -5.67256283331951,43.5397440536399 
                ----- LOTS OF POINTS ------
                -5.67256283331951,43.5397440536399
              </coordinates>
            </LinearRing>    
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
  </Document>
</kml>

带红色边框的多边形渲染正常，但没有任何填充颜色。我尝试在 KML 中到处触摸值，但没有成功。

任何帮助将不胜感激。

Answer 1

看起来 Google Maps KML 渲染器现在对缠绕方向很敏感（您在问题中没有提供）。

This works:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: 'terrain'
  });

  var kmlLayerCenter = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122b.kml',
    suppressInfoWindows: true,
    // preserveViewport: true,
    map: map
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

 <coordinates>
    -5.67256283331951,44.5397440536399
    -5.9439,45.254695
    -5.408402,45.284535
    -5.67256283331951,44.5397440536399
 </coordinates>

This doesn't:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: 'terrain'
  });

  var kmlLayerCenter = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122.kml',
    suppressInfoWindows: true,
    // preserveViewport: true,
    map: map
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

<coordinates>
    -5.67256283331951,44.5397440536399
    -5.408402,45.284535
    -5.9439,45.254695
    -5.67256283331951,44.5397440536399
</coordinates>

唯一不同的是缠绕方向（中间两点的顺序）

Answer 2

好吧，令人难以置信但真实...似乎 KML 图层上的点应该逆时针排序以允许 Gmaps API 呈现填充颜色。

我完全不明白为什么会这样，但它似乎工作正常。

我找到了有关解决方案的信息 here，虽然 geocodezip 答案或多或少在同一方向上，但直到我反转坐标字符串中的每个点才出现填充颜色。

渲染的 KML 图层不填充多边形

Rendered KML layer doesn't fills polygons

google-maps

kml

fill