9

enter image description hereAs my project requirement I want to draw a polygon look like this (>. In this case draw polygon sides too dense for arc. Successfully draw this using LineString but how to draw it using polygon. Need polygon because I have to fill color in between.

code in OpenLayers 2

var linearRing = new OpenLayers.Geometry.LinearRing(vertices);
        return new OpenLayers.Geometry.Polygon([linearRing]);

Here vertices is the array of points successfully drawn like the image In OpenLayers 3

var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(markers, 'XY'),

            })]
        })
        //style: iconStyle
    });

    map.addLayer(layerLines);

Working but can't fill the in between area.

If we replace geometry: new ol.geom.LineString(markers, 'XY'), line by this

geometry: new ol.geom.Polygon(markers, 'XY'), 

then it can't draw a polygon

3
  • I think the question needs clarification.
    – erilem
    Dec 10, 2014 at 7:00
  • Please tell me what kind of clarification do you need?
    – Sowvik Roy
    Dec 10, 2014 at 7:02
  • Welcome to GIS SE! I think you are trying to use true curves in OpenLayers. I suspect @erilem may be looking for you to include the code you used to successfully do it as a linestring, and perhaps a more detailed picture.
    – PolyGeo
    Dec 10, 2014 at 7:15

2 Answers 2

10

This code is working correctly. where vertices are the array of coordinates

var feature = new ol.Feature({
            geometry: new ol.geom.Polygon([vertices])
        });

feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
var vectorSource= new ol.source.Vector({
        features: [feature ]
    });

 var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
 var map = new ol.Map({
        target: $('#map')[0],
        layers: [
            new ol.layer.Tile({
                source: new ol.source.TileJSON({
                    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
                })
            }),
            vectorLayer 
        ],
        view: new ol.View({
            center: ol.proj.transform([104.07143559628913, 30.669867138240782], 'EPSG:4326', 'EPSG:3857'),
            zoom: 12
        })
    });

Demo

2

I confirm the other answer is working with openlayer 3.16

 _area_polyline = new ol.Feature({ geometry : new ol.geom.LineString(_area_polygon_coord[_area]) });


        // must have this transform, otherwise, no line showup.
        _area_polyline.getGeometry().transform('EPSG:4326', 'EPSG:3857');

        _area_polyline.setStyle(
                                       new ol.style.Style({
                                           stroke: new ol.style.Style({
                                               color: '#FF8C00',
                                               width: 20
                                           })
                                       })
                                     );


        _area_boundaryline_vectorSource = new ol.source.Vector({
            features: [_area_polyline]
        });

        _area_boundaryline_layer = new ol.layer.Vector({
        source: _area_boundaryline_vectorSource
    })

    map.addLayer(_area_boundaryline_layer);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.