[GIS] In OpenLayers 3, how to draw an extent as a LinearRect

featuresopenlayersopenlayers-2vector

In OpenLayers 2, this was an easy feat. I was able to simply instantiate a LinearRect given the coordinates of my BoundingBox, and then add the LinearRect as a feature to a vector layer I had added to the map. In OpenLayers 3, I can't seem to find any easy way to do this using extents. Say I have the current extent (it is transformed to match OSM, since the back-end for this application serves EPSG:4326):

# Colorado Springs
extent = ol.proj.transformExtent([aoi.west, aoi.south, aoi.east, aoi.north], "EPSG:4326", "EPSG:900913")

I am trying to add this extent to the map using the following code:

lr = new ol.geom.LinearRing([
  [aoi.west, aoi.north],
  [aoi.east, aoi.north],
  [aoi.west, aoi.south],
  [aoi.east, aoi.south]
]).transform("EPSG:4326", "EPSG:900913")

layer = new ol.layer.Vector
  source: new ol.source.Vector()
  style: new ol.style.Style
    fill: new ol.style.Stroke
      color: '#ffcc33'
      width: 2
    stroke: new ol.style.Stroke
      color: '#ffcc33'
      width: 2
    image: new ol.style.Circle
      radius: 7
      fill: new ol.style.Fill
        color: '#ffcc33'
  features: [
    new ol.Feature
      color: '#BADA55'
      where: 'inner'
      geometry: lr
  ]

map.addLayer(layer)

There are no errors thrown – the only problem is that the shape is not displayed on the map (although the base OSM layer is). Checking the maps layers (console.log map.getLayers().getArray()) reveals that the vector layer is making its way into the map.

For reference, the aoi object looks like this:

aoi = { west: -104.8, south: 39.8, east: -104.7, north: 39.9 }

Best Answer

You're passing the features object to the ol.layer.Vector object, but you should pass it to the ol.source.Vector object instead. I don't understand how it does not throw any errors as you at least miss commas between object properties.

Related Question