CODEWITHSUNDEEP
javascriptopenlayers
CodeBuggy
CodeBuggy

Reputation: 499

how to draw a LinearRing in Openlayers

I have written the below code to create a LinearRing.But nothing comes on the screen when I run this code

 var circleGeom = new ol.geom.Circle(center, 250, 'XY');
 var circleFeature = new ol.Feature();
 var cordPoly = new ol.geom.Polygon.fromCircle(circleGeom);
 var coordinates = cordPoly.getCoordinates();
 var linearRing = new ol.geom.LinearRing(coordinates);
 circleFeature.setGeometry(linearRing);
 vectorlayer.getSource().addfeatures([circleFeature]);

Can anyone help me find the issue here?

Upvotes: 0

Views: 1373

Answers (2)

user4800797
user4800797

Reputation: 

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 2,
      color: "red"
    })
  })
});

var circleGeom = new ol.geom.Circle([0, 0], 100, 'XY');
vectorLayer.getSource().addFeature(new ol.Feature(ol.geom.Polygon.fromCircle(circleGeom, 10)));

var map = new ol.Map({
  layers: [vectorLayer],
  target: document.getElementById("map"),
  view: new ol.View({
    center: [0, 0],
    zoom: 16
  })
});
html,
body,
#map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<body>
  <div id="map" class="map"></div>
</body>

According to the documentation, a LinearRing cannot be rendered on its own. Please try:

circleFeature.setGeometry(cordPoly);

Upvotes: 1

Mike
Mike

Reputation: 17932

If you want it to behave as a circular line you need to create a linestring from the corrdinates 

 var circleGeom = new ol.geom.Circle(center, 250, 'XY');
 var circleFeature = new ol.Feature();
 var cordPoly = ol.geom.Polygon.fromCircle(circleGeom);
 var coordinates = cordPoly.getCoordinates();
 var lineString = new ol.geom.LineString(coordinates[0]);
 circleFeature.setGeometry(lineString);
 vectorlayer.getSource().addfeatures([circleFeature]);

Upvotes: 1

Related Questions