1

I try to get feature from map that I add route and marker already but when I click at it. I get nothing from it. Do I miss something? I used typescript(angular 4)

this is map declare:

ngOnInit() {
  this.source = new OlTileWMS({
  url: "url",
  params: {
    "layers": " layername",
    "format": "image/png8",
    "version": "1.3.0",
    "SRS": "EPSG:4326"
  }
});

this.markerSource = new VectorSource({
  features: []
});

var styles = {
  'route': new Style({
    stroke: new ol.style.Stroke({
      width: 7,
      color: [0, 255, 255, 0.95]
    })
  }),
  'icon': new Style({
    image: new Icon({
      anchor: [0.5, 0.5],
      src: 'assets/img/point.png',
      crossOrigin : "Anonymous"
    })
  })
};

var vectorLayer = new VectorLayer({
  source: this.markerSource,
  style: function (feature) {
    // hide geoMarker if animation is active
    return styles[feature.get('type')];
  }
});

this.layer = new OlTileLayer({
  source: this.source
});

this.view = new OlView({
  center: [100.6037284, 13.6768896],// lon lat
  zoom: 10,
  projection: "EPSG:4326",
  minZoom: 5
});

this.map = new OlMap({
  target: 'map',
  layers: [this.layer, vectorLayer],
  view: this.view
})

this.map.render()
}

and this is adding marker path

        var coordinates: [number, number][] = data.map(x => { return 
         [x.longitude, x.latitude] })
        var route = new LineString(coordinates)
        var routeCoords = route.getCoordinates();
        var routeLength = routeCoords.length;
        var feature_array = []
        var routeFeature = new Feature({
          type: 'route',
          geometry: route
        });
        feature_array.push(routeFeature)

        for (let i in routeCoords) {
          this["Marker" + i] = new Feature({
            type: 'icon',
            geometry: new Point(routeCoords[i]),
            name: 'marker' + i,
          });
          feature_array.push(this["Marker" + i])
        }

        this.map.getView().setCenter([coordinates[0][0], coordinates[0][1]])
        this.map.getView().setZoom(15)
        var feature = this.markerSource.getFeatures()


        for (let i in feature) {
          this.markerSource.removeFeature(feature[i])
        }

        this.markerSource.addFeatures(feature_array)
        console.log(this.markerSource.getFeatures());

        //popup
        var popup = new Overlay({
          element: this.element,
          positioning: 'bottom-center',
          stopEvent: false,
          offset: [0, -50]
        });

        this.map.addOverlay(popup);
        this.map.on('singleclick',(evt) => {
            var feature = this.map.forEachFeatureAtPixel(evt.pixel,
            (feature,layer) => {
              return feature;
            });

            console.log(feature);
          //   if (feature) {
          //     var p: ol.geom.Point = <ol.geom.Point>feature.getGeometry();
          //     var coord: ol.Coordinate = p.getCoordinates();
          //     var props = feature.getProperties();
          //     var info = "<h2><a href='" + props.caseurl + "'>" + props.casereference + "</a></h2>";
          //         info += "<p>" + props.locationtext + "</p>";
          //         info += "<p>Status: " + props.status + " " + props.statusdesc + "</p>";
          //     // Offset the popup so it points at the middle of the marker not the tip
          //     popup.setOffset([0, -22]);

          // }
        });
  • There are no features in a WMS layer, there is only an image. To get feature information you need to make a GetFeatureInfo request at a point (pixel) location in the map – nmtoken Jul 18 '18 at 14:32
  • @nmtoken Are there others way for this problem? – Seaty Sw Jul 19 '18 at 3:50

Your Answer

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

Browse other questions tagged or ask your own question.