1

Open Layers の新しいバージョン (3) を試しています。アイコン機能の例を少し変更したので、多角形が表示されます。数時間検索、読み取り、試行してきましたが、何が間違っているのかわかりません。

機能を動的に追加および削除したいので、geoJSON を使用したくありません。

これは私がこれまでに持っているコードです:

<script type="text/javascript"> 
  var point1 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
  var point2 = ol.proj.transform([35.41, 9.82], 'EPSG:4326', 'EPSG:3857');
  var point3 = ol.proj.transform([33.41, 11.82], 'EPSG:4326', 'EPSG:3857');
  var polyFeat = new ol.Feature({
    geometry: new ol.geom.Polygon([point1, point2, point3])
  });

  var polyStyle = new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'blue'
    }),
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    })
  });

  polyFeat.setStyle(polyStyle);

  var vectorSource = new ol.source.Vector({
    features: [polyFeat]
  });

  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
      url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
    })
  });

  var map = new ol.Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3
    })
  });
</script>

ポリゴンが表示されないのはなぜですか?

4

1 に答える 1

2

あなたの問題を解決するための2つの小さなこと：

まず、多角形を閉じることをお勧めします。そのため、最初の点と同じ座標で 4 番目の点を宣言します。

var point4 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');

次に、ジオメトリnew ol.geom.Polygon([point1, point2, point3])は次のようになりますnew ol.geom.Polygon([[point1, point2, point3, point4]])

ここで重要なことは、point4 の追加ではなく、配列ポイントをポイントの配列の配列に変換することです。OpenLayers 3コンストラクターが期待するものを期待しているという APIを参照してください。 ol.geom.PolygonArray.<Array.<ol.Coordinate>>

于 2014-11-01T01:55:49.790 に答える