web-dev-qa-db-ja.com

オープンレイヤー3プログラムでポリゴンを描画する方法は？

プログラムでオープンレイヤー3を使用してポリゴンを描画する方法は？

私はjson配列座標を持っています：

[
        {
            "lng": 106.972534,
            "lat": -6.147714
        },
        {
            "lng": 106.972519,
            "lat": -6.133398
        },
        {
            "lng": 106.972496,
            "lat": -6.105892
        }
]

そして今、私はそれを地図上に描きたいのですが、オープンレイヤーを使用します。どうやってするの？

javascriptopenlayers-3
13
yozawiratama

ol.geom.Polygonコンストラクタを使用する必要があります。そのコンストラクターは、リングの配列を想定しています。各リングは座標の配列です。

あなたの場合これはあなたが多角形を作成する方法です（これはlnglatペアの配列がaという名前であると仮定します）：

// A ring must be closed, that is its last coordinate
// should be the same as its first coordinate.
var ring = [
  [a[0].lng, a[0].lat], [a[1].lng, a[1].lat],
  [a[2].lng, a[2].lat], [a[0].lng, a[0].lat]
];

// A polygon is an array of rings, the first ring is
// the exterior ring, the others are the interior rings.
// In your case there is one ring only.
var polygon = new ol.geom.Polygon([ring]);

ここで、このポリゴンをWebメルカトル図法（EPSG:3857）のビューでマップに表示する場合は、ポリゴンをEPSG:4326からEPSG:3857に変換する必要があります。

polygon.transform('EPSG:4326', 'EPSG:3857');

また、ポリゴンを実際に表示するには、ポリゴンをフィーチャオブジェクトでラップし、他のレイヤーと同じようにマップに追加するベクターレイヤー（実際にはベクターソース、以下を参照）に追加する必要があります。

// Create feature with polygon.
var feature = new ol.Feature(polygon);

// Create vector source and the feature to it.
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);

// Create vector layer attached to the vector source.
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add the vector layer to the map.
map.addLayer(vectorLayer);
19
erilem