2017-08-22 13 views
0

enter image description hereopenstreetmapで国を塗りつぶすことはできません

私は任意の色で塗りつぶしています。国境を読み込んでいます:http://www.openstreetmap.org/api/0.6/relation/148838/full、それは動作しません。罫線は着色されていますが、図形が塗りつぶされていません。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 

<body> 
<div style="margin: 30px;"> 
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css"> 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> 
    <script src="https://openlayers.org/en/v4.3.1/build/ol.js"></script> 
    <div id="map" class="map" style="width: 500px; height: 500px;"></div> 
    <script> 
     var map = new ol.Map({ 
      layers: [ 
       new ol.layer.Tile({ 
        source: new ol.source.OSM() 
       }) 
      ], 
      target: 'map', 
      view: new ol.View({ 
       center: ol.proj.fromLonLat([0, 0]), 
       zoom: 1 
      }) 
     }); 

     var areaLayer = new ol.layer.Vector({ 
      title: 'Boundaries', 
      source: new ol.source.Vector({ 
       url: 'http://www.openstreetmap.org/api/0.6/relation/148838/full', 
       format: new ol.format.OSMXML() 
      }), 
      style: new ol.style.Style({ 
       zIndex: 100, 
       stroke: new ol.style.Stroke({ 
        color: 'rgba(246, 99, 79, 1.0)', 
        width: 3 
       }), 
       fill: new ol.style.Fill({ 
        color: 'rgba(246, 99, 79, 1.0)' 
       }) 
      }) 
     }); 

     map.addLayer(areaLayer); 
    </script> 

</div> 
</body> 
</html> 

がどのように色で国を埋めるために:

私は、次のコードを使用していますか?

答えて

1

呼び出しているOSM APIは、塗りつぶしの色をサポートしない線ストリングジオメトリを返します。

あなたは好奇心旺盛であれば、以下のように、あなたはGEOMを表示することができます。

areaLayer.getSource().getFeatures()[0].getGeometry() 

私も(オール-debug.jsとするのが最良)を開発するときにデバッグバージョンを使用することをお勧めします。

+0

ありがとうございました!したがって、このXMLフィードデータを使用してポリゴンを塗りつぶす方法はありませんか? – corvax

+0

多国籍国の境界線を見つける必要があります。これは困難ではありません。「geojson country boundaries」のウェブ検索では多くのオプションがあります。 –

関連する問題