offene Ebenen 3 Wie zeichne ein Polygon programmatisch?

Question

Wie zeichne ein Polygon verwenden offene Ebene 3 programmatisch?

ich habe ein JSON-Array-Koordinate:

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

und jetzt will ich es auf der Karte öffnen Schichten Gebrauch ziehen. wie es geht?

Answer 1

Sie müssen den ol.geom.Polygon Konstruktor verwenden. Dieser Konstruktor erwartet ein Array von Ringen, wobei jeder Ring ein Array von Koordinaten ist.

In Ihrem Fall ist dies, wie Sie das Polygon erstellen werden (dies setzt voraus, Ihr Array von lnglat Paaren gestattet 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]); 

Nun, wenn Sie dieses Polygon in einer Karte mit Blick angezeigt werden sollen Mercator, dessen Projektion ist Web (EPSG:3857) Sie müssen das Polygon EPSG:4326-EPSG:3857 zu transformieren:

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

Und anzuzeigen tatsächlich das Polygon Sie müssen w rap es in einem Feature-Objekt, und fügen Sie es zu einer Vektor-Schicht (eine Vektorquelle wirklich, siehe unten), die Sie auf die Karte wie jede andere Ebene hinzufügen:

// 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);