0

The following code should have 3 features:

  1. Draw a polygon on load
  2. On draw end send coordinates
  3. On modify end send coordinates

2&3 work as expected. I added the drawn polygon last, there is no error on the console, but no polygon is drawn.

Also, it has no errors building in npm.

import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {Draw, Modify, Snap} from 'ol/interaction.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {OSM,TileJSON, Vector as VectorSource} from 'ol/source.js';
      import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';

      import Feature from 'ol/Feature';
      import Polygon from 'ol/geom/Polygon';
    import Point from 'ol/geom/Point';
    import Transform from 'ol/Proj';

      var raster = new TileLayer({
        source: new OSM()
      });

      var source = new VectorSource();
      var vector = new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        })
      });
      var feature = new Feature({
        geometry: new Polygon([
            [-13041991.514129914,8126540.3085058555],
            [-13766003.046047103,7167714.225696605],
            [-12562578.472725287,6668733.305050973],
            [-11486345.114470007,7099226.648353085],
            [-11730943.60498257,8439626.376361936],
            [-13041991.514129914,8126540.3085058555]
          ])
    });
    var vectorSource= new VectorSource({
        features: [feature ]
    });

    var vectorLayer = new VectorLayer({
        source: vectorSource
    });

      var map = new Map({
        layers: [raster, vector],
        target: 'map',
        view: new View({
          center: [-11000000, 4600000],
          zoom: 4
        })
      });

      var modify = new Modify({source: source});
      modify.on('modifyend',function(e){
        console.log("feature id is",e.features.getArray()[0].getGeometry().getCoordinates()[0]);
        });
      map.addInteraction(modify);
      console.log(map);
      var draw, snap; // global so we can remove them later
      var typeSelect = document.getElementById('type');

      function addInteractions() {
        draw = new Draw({
          source: source,
          type: typeSelect.value
        });
        draw.on('drawend',function(e){
            console.log(e.feature.getGeometry().getCoordinates()[0]);
        })
        map.addInteraction(draw);
        snap = new Snap({source: source});
        map.addInteraction(snap);
      }

      /**
       * Handle change event.
       */
      typeSelect.onchange = function() {
        map.removeInteraction(draw);
        map.removeInteraction(snap);
        addInteractions();
      };

      addInteractions();
0

You need to add the polygon layer to the map. As it is, you add the raster and the empty layer that will contains the new/edited drawings, but not the source data:

 var map = new Map({
    layers: [raster, vector, vectorLayer],
    target: 'map',
    view: new View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });
  • I appreciate your comment. I added vectorLayer as you said, with no effect. – TDawg Sep 11 '18 at 18:17

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.