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>

多边形以红色边框呈现为ok，但没有任何填充颜色。我试图在KML内外接触价值，但没有成功。

任何帮助将不胜感激。

Answer 1

好的，令人难以置信，但确实如此……似乎应该逆时针排列KML图层上的点，以允许Gmaps API渲染填充颜色。

我不完全理解为什么会这样，但是似乎可以正常工作。

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

Answer 2

看起来Google Maps KML渲染器现在对弯曲方向很敏感（您在问题中未提供）。

This works：

const bodyParser = require('body-parser');
...
app.use(bodyParser.json());

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>

This doesn't：

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

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>

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

渲染的KML图层无法填充多边形

2 个答案: