代码之家  ›  专栏  ›  技术社区  ›  Bardo

渲染的kml层不填充多边形

  •  0
  • Bardo  · 技术社区  · 6 年前

    我试图在一个gmapapi项目中呈现一些简单的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>
    

    多边形渲染为红色边框,但没有任何填充颜色。我试着在国民党内部到处接触价值观,但没有成功。

    如有任何帮助,我们将不胜感激。

    2 回复  |  直到 6 年前
        1
  •  2
  •   Bardo    6 年前

    好吧,难以置信,但是真的…似乎应该逆时针排列kml层上的点,以允许gmaps api呈现填充颜色。

    我不完全理解这是为什么,但它似乎工作得很好。

    我找到了有关解决方案的信息 此处 ,虽然geocodezip答案或多或少位于同一方向,但直到我反转坐标字符串中填充的每个点为止出现颜色。

    稀释 在这里 虽然geocodezip的答案或多或少是在同一个方向上,但直到我反转坐标字符串中出现填充颜色的每个点。

        2
  •  1
  •   geocodezip    6 年前

    看起来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
    身体,
    α映射{
    身高:100%;
    保证金:0;
    填料:0;
    }
    <DIV ID=“地图”></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>
    

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