0

Currently working with OL 4.6.5 and Angular 6 and for the life of me have read the documentation and API references on the OL site http://openlayers.org/en/v4.6.5/doc/

And despite following there examples of how to add layers such as

  var osmLayer = new ol.layer.Tile({source: osmSource});
  map.addLayer(osmLayer);

  @Input( 'coreMap' ) coreMap;
  vector : VectorLayer;
  source;
  ngOnInit(){
    console.log(this.coreMap);
    console.log(this.coreMap.layerManager);```

      var vector = new ol.layer.Vector({
        source: new ol.layer.Vector(),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#ffcc33'
            })
          })
        })
      });
      this.vector = vector;
    }
  addLayer(){
    this.coreMap.map.addLayer(this.vector)
  } 

The coreMap being the base level of the map (It was created by someone else on the project so I'm picking up from how they have set it up)

I can see elsewhere they have written it like so

this.coreMap.layerManager.addLayer( this.drawLayer )

Which I've also tried and yielding the same result of circular structure error & layer.getLayerArray is not a function.

0

So after delving into the source code I've managed to actually add the layer like so.

  @Input( 'coreMap' ) coreMap :CoreMapComponent
  vector : VectorLayer;
  ngOnInit(){
    var source = new VectorSource({wrapX: false});
    var style = new Style({
      geometry: 'circle',
      fill: new Fill({
        color: 'red'
      }),
      stroke: new Stroke({
        color: 'red',
        width: 5
      })
    })
      var vector = new VectorLayer({
        source: source,
        style: style
      });
  this.vector = vector;
    }
  addLayer(){
    this.coreMap.layerManager.addLayer(this.vector);
  }

  getLayers(){
    console.log(this.coreMap.map.getLayers().getArray());
  }

The tutorials on the ol site are somewhat vague and misleading at least in my case or not on par with there version numbers, shame I did make a mistake on assigning ol.layer.vector twice on the original code block rather than ol.source.vector on the second instance although that still didn't seem to rectify the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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