How to use the ol/style/Stroke function in ol

To help you get started, we’ve selected a few ol examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Viglino / ol-ext / src / interaction / CenterTouch.js View on Github external
var ol_interaction_CenterTouch = function(options)
{	options = options || {};

	// LIst of listerner on the object
	this._listener = {};
	// Filter event
	var rex = /^pointermove$|^pointerup$/;

	// Default style = cross
	this.targetStyle = options.targetStyle ||
		[	new ol_style_Style({ image: new ol_style_RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, snapToPixel:true, stroke: new ol_style_Stroke({ color: "#fff", width:3 }) }) }),
			new ol_style_Style({ image: new ol_style_RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, snapToPixel:true, stroke: new ol_style_Stroke({ color: "#000", width:1 }) }) })
		];
	if (!(this.targetStyle instanceof Array)) this.targetStyle = [this.targetStyle];
	this.composite = options.composite || '';

	// Interaction to defer center on top of the interaction 
	// this is done to enable other coordinates manipulation inserted after the interaction (snapping)
	this.ctouch = new ol_interaction_Interaction(
		{	handleEvent: function(e) 
				{	if (rex.test(e.type) && this.getMap()) 
					{	e.coordinate = this.getMap().getView().getCenter();
						e.pixel = this.getMap().getSize();
						e.pixel = [ e.pixel[0]/2, e.pixel[1]/2 ];
					}
					return true; 
				}
github Viglino / ol-ext / src / interaction / Transform.js View on Github external
ol_interaction_Transform.prototype.setDefaultStyle = function() {
  // Style
  var stroke = new ol_style_Stroke({ color: [255,0,0,1], width: 1 });
  var strokedash = new ol_style_Stroke({ color: [255,0,0,1], width: 1, lineDash:[4,4] });
  var fill0 = new ol_style_Fill({ color:[255,0,0,0.01] });
  var fill = new ol_style_Fill({ color:[255,255,255,0.8] });
  var circle = new ol_style_RegularShape({
      fill: fill,
      stroke: stroke,
      radius: this.isTouch ? 12 : 6,
      points: 15
    });
  circle.getAnchor()[0] = this.isTouch ? -10 : -5;
  var bigpt = new ol_style_RegularShape({
      fill: fill,
      stroke: stroke,
      radius: this.isTouch ? 16 : 8,
      points: 4,
      angle: Math.PI/4
    });
github nasa-gibs / worldview / web / js / map / ui.js View on Github external
var addGraticule = function(opacity, groupStr) {
    groupStr = groupStr || 'active';
    opacity = opacity || 0.5;
    var graticule = self.selected['graticule-' + groupStr];
    if (graticule) {
      return;
    }
    var strokeStyle = new OlStyleStroke({
      color: 'rgba(255, 255, 255,' + opacity + ')',
      width: 2,
      lineDash: [0.5, 4],
      opacity: opacity
    });

    self.selected['graticule-' + groupStr] = new OlGraticule({
      map: self.selected,
      group: groupStr,
      strokeStyle: strokeStyle
    });
    self['graticule-' + groupStr + '-style'] = strokeStyle;
  };
github nasa-gibs / worldview / web / js / map / natural-events / track.js View on Github external
var getLineStyle = function(color, width) {
  return new OlStyleStyle({
    stroke: new OlStyleStroke({
      color: color,
      width: width
    })
  });
};
/**
github ghettovoice / vuelayers / src / ol-ext / style.js View on Github external
case prefixKey('strokeCap'):
      case prefixKey('strokeJoin'):
      case prefixKey('strokeDash'):
      case prefixKey('strokeDashOffset'):
        name = 'line' + name.replace(new RegExp(prefixKey('stroke')), '')
        break
    }
    if (name === 'color') {
      value = normalizeColor(value)
    }
    style[name] = value
    return style
  }, {})

  if (!isEmpty(strokeStyle)) {
    return new Stroke(strokeStyle)
  }
}
github KlausBenndorf / guide4you / src / controls / StaticOverviewMap.js View on Github external
const edgePoint = [mapCenter[0], extent[3]]
        const edgePointPixel = this.ovmap_.getPixelFromCoordinate(edgePoint)

        const arrowPointPixel = [edgePointPixel[0], edgePointPixel[1] - 7]

        const arrowPoint = this.ovmap_.getCoordinateFromPixel(arrowPointPixel)
        this.arrow.setGeometry(new Point(arrowPoint))

        this.arrow.setStyle(new Style({
          image: new RegularShape({
            fill: new Fill({
              color: 'rgb(0,0,0)'
            }),
            points: 3,
            radius: 5,
            stroke: new Stroke({
              width: 0,
              color: 'rgb(0,0,0)'
            }),
            rotation: 0
          })
        }))
      }
    }
  }
}
github terrestris / react-geo / src / Button / MeasureButton / MeasureButton.tsx View on Github external
map
    } = this.props;

    const maxPoints = measureType === 'angle' ? 2 : undefined;
    const drawType = measureType === 'polygon' ? 'MultiPolygon' : 'MultiLineString';

    const drawInteraction = new OlInteractionDraw({
      name: 'react-geo_drawaction',
      source: this._measureLayer.getSource(),
      type: drawType,
      maxPoints: maxPoints,
      style: new OlStyleStyle({
        fill: new OlStyleFill({
          color: fillColor
        }),
        stroke: new OlStyleStroke({
          color: strokeColor,
          lineDash: [10, 10],
          width: 2
        }),
        image: new OlStyleCircle({
          radius: 5,
          stroke: new OlStyleStroke({
            color: strokeColor
          }),
          fill: new OlStyleFill({
            color: fillColor
          })
        })
      }),
      freehandCondition: function() {
        return false;
github SuperMap / iClient-JavaScript / src / openlayers / core / StyleUtils.js View on Github external
static toOLPointStyle(style) {
    if (style.pointFile !== '') {
      return new Style({
        image: new Icon({
          src: style.pointFile
        })
      });
    }
    return new Style({
      image: new CircleStyle({
        radius: style.pointRadius,
        fill: new FillStyle({
          color: style.fillStyle
        }),
        stroke: new StrokeStyle({
          color: style.pointHaloColor,
          width: style.pointHaloRadius
        })
      })
    });
  }
github KlausBenndorf / guide4you / src / Styling.js View on Github external
function addFillsAndStrokes (subStyleConf) {
      subStyleConf = subStyleConf || {}
      let preparedOptions = copy(subStyleConf)

      if (checkFor(subStyleConf, 'fill')) {
        preparedOptions.fill = new Fill(mergeStyleConfigs(subStyleConf.fill, filledStyleConf.fill))
      } else {
        preparedOptions.fill = new Fill(filledStyleConf.fill)
      }

      if (checkFor(subStyleConf, 'stroke')) {
        preparedOptions.stroke = new Stroke(mergeStyleConfigs(subStyleConf.stroke, filledStyleConf.stroke))
      } else {
        preparedOptions.stroke = new Stroke(filledStyleConf.stroke)
      }

      return preparedOptions
    }
github SuperMap / iClient-JavaScript / src / openlayers / overlay / vectortile / VectorTileStyles.js View on Github external
function getDefaultSelectedTextStyle() {
            return new Style({
                text: new Text({
                    font: '15px Microsoft YaHei',
                    fill: new FillStyle({
                        color: 'blue'
                    }),
                    stroke: new StrokeStyle({
                        color: 'white',
                        width: 1
                    })
                })
            });
        }
    }