0

The code is as follows

@Input( 'coreMap' ) coreMap :CoreMapComponent
  vectorLayer : VectorLayer;
  modifyLayer : Modify;
  draw: Draw;
  vectorSource: VectorSource;
  style: Style;
  snap: Snap;

  ngOnInit(){
    this.vectorSource = new VectorSource({wrapX: false});
    this.style = new Style({
      geometry: 'circle',
      fill: new Fill({
        color: '#ffcc33'
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    })
      this.vectorLayer = new VectorLayer({
        source: this.vectorSource,
        style: this.style
      });
    this.modifyLayer = new Modify({source: this.vectorSource});
    }

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

  addInteraction() {
    this.coreMap.map.addInteraction(this.modifyLayer);
    this.draw = new Draw({
      source: this.vectorSource,
      type: 'Circle'
    });
    this.coreMap.map.addInteraction(this.draw);
    this.snap = new Snap({source: this.vectorSource});
    this.coreMap.map.addInteraction(this.snap);
  }

  changeInteraction(){
    this.coreMap.map.removeInteraction(this.draw);
    this.coreMap.map.removeInteraction(this.snap);
    this.addInteraction();
  }

This will allow me to bring up the circle drawing tool and set the size ect but when I double click to end the drawing it doesn't save anything on the map, I thought maybe my new layer is being put at the bottom of the array but ol documentation says it should be at the top of the array.

*** Update

If I remove the styles from the new layer everything seems to work, why is this? As I am planning on making the styles customisable.

0

I see that I made a mistake by adding the incorrect geometry: 'circle', property by assuming that this refers to the actual shape of the object when in fact it refers to things such as the scale and so forth.

this.style = new Style({
      fill: new Fill({
        color: '#ffcc33'
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    })

Fixes this 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.