openlayers - OpenLayers-既存のlonLatポイントからポリゴンを描画するにはどうすればよいですか？

Question

データベースに、ユーザー定義のポリゴンからの経度-緯度の頂点があります。私の質問は、どうすればそれらを再作成して地図に表示できるかということです。これはGoogleMapsAPIを使用して行うのは非常に簡単ですが、OpenLayersを使用してこれを行う方法に関するドキュメントや例は見つかりません。誰かがこれをした経験がありますか？

Answer 1

多くの実験の後、私はそれを行う方法を見つけました：

let sitePoints = [];
let siteStyle = {
  // style_definition
};

let epsg4326 = new OpenLayers.Projection("EPSG:4326");
for (let i in coordinates) {
  let coord = coordinates[i];
  let point = new OpenLayers.Geometry.Point(coord.lng, coord.lat);
  // transform from WGS 1984 to Spherical Mercator
  point.transform(epsg4326, map.getProjectionObject());
  sitePoints.push(point);
}
sitePoints.push(sitePoints[0]);

let linearRing = new OpenLayers.Geometry.LinearRing(sitePoints);
let geometry = new OpenLayers.Geometry.Polygon([linearRing]);
let polygonFeature = new OpenLayers.Feature.Vector(geometry, null, siteStyle);
vectors.addFeatures([polygonFeature]);

Answer 2

OpenLayers 6

OpenLayers 6の場合は少し異なり、理解するのに少し時間がかかりました。そこで、OL6に関連するコードをここに貼り付けます。

coordinatesタイプは[[[number]]]（ポリゴンのGeoJson標準）です。

styles範囲外です（誰かが興味を持っている場合はここに貼り付けることができますが、アプリごとに定義を変えることができます）。

var VectorSource = ol.source.Vector;
var {Tile, Vector} = ol.layer; //import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
var TileLayer = Tile;
var VectorLayer = Vector;

var map = new ol.Map(...);

function drawPolygonOnMap(coordinates) {
    const polygonFeature = new ol.Feature(
        new ol.geom.Polygon(coordinates).transform('EPSG:4326','EPSG:3857'));


    let source = new VectorSource({
      features: [polygonFeature]
    });

    var layer = new VectorLayer({
      source: source,
      style: styles
    });

    map.addLayer(layer);
}