Search code examples
javascriptopenlayers

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?


Solution

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