0

I am using openlayer v5 and styling feature with no of different different style by using LineString gemetry. Styling feature code:

applyStyle(feature,resolution){
var styleArray = [
      new ol.style.Style({ // feature style
        stroke: new ol.style.Stroke({
          color: 'green',
          width: 6,
          lineCap: 'square'
        }),
        text: new Text({
          text: 'gas',
          textAlign: 'start',
          offsetX: 1,
          offsetY: 1,
          fill: new Fill({
            color: 'white'
          })
        })
      }),
      new ol.style.Style({  //feature sub style geometry
        geometry: function (feature) {
          var line = feature.getGeometry();
          var coords = [];
          line.forEachSegment(function (from, to) {
            // for each segment calculate a parallel segment with a
            // distance of 4 pixels
            var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
            var dist = 5 * resolution;

            var newFrom = [
              Math.sin(angle) * dist + from[0],
              -Math.cos(angle) * dist + from[1]
            ];
            var newTo = [
              Math.sin(angle) * dist + to[0],
              -Math.cos(angle) * dist + to[1]
            ];
            coords.push(newFrom);
            coords.push(newTo);
          });

          return new ol.geom.LineString(coords);
        },
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 5,
          lineCap: 'square'
        }),
        text: new Text({
          text: 'redtext',
          textAlign: 'start',
          offsetX: 1,
          offsetY: 1,
          fill: new Fill({
            color: 'white'
          })
        })
      })
      ];
feature.setStyle(styleArray);  

} 

this.map.on('singleclick', function (evt: any) {
      console.log("single click");

      var features: any = self.map.getFeaturesAtPixel(evt.pixel);

      features.forEach(feature => {
        var styles = feature.getStyle();

        delete styles[0]; //deleting feature style from array only
        console.log();
        styles.forEach(style => {
          console.log();
          var line: any = style.getGeometry();
          var sss = style.getLineString();     //not working
          var lineString = line.getLineString(); //not working
          var geometry = style.getCoordinates(); //not working
          console.log();
        })
      });         
});

In above code on map single click event i tried getGeometry() but it's not returning geometry or coordinate.

sub geometry image

Any help to get sub style geometry on single click.

cj devin
  • 1,045
  • 3
  • 13
  • 48
  • try to console `style` before calling `style.getGeometry` – Chase Choi Sep 07 '18 at 05:48
  • console of style is {"fill_":null,"image_":null,"renderer_":null,"stroke_":{"color_":"#85ACBD","lineCap_":"square","lineDash_":null,"width_":16},"text_":{"text_":"water","textAlign_":"start","fill_":{"color_":"white"},"maxAngle_":0.7853981633974483,"placement_":"point","overflow_":false,"stroke_":null,"offsetX_":1,"offsetY_":1,"backgroundFill_":null,"backgroundStroke_":null,"padding_":null}} here geometry is not coming.so how i know in which style single click because feature contains multiple style..so there any way to know about which style click of feature? – cj devin Sep 07 '18 at 07:08
  • If the geometry option is a function `getGeometry()` returns the function so you need to call it to get the geometry `style.getGeometry()(feature);` Also deleting the first style each time you click you will delete what was the second style next click. Use `styles.slice(1).forEach` to avoid that. – Mike Mar 20 '19 at 14:48

0 Answers0