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.
NieuwlandGeo / SLDReader / src / styles / polygonStyle.js View on Github 
}
const stroke = style.stroke && style.stroke.styling;
const fill = style.fill && style.fill.styling;
return new Style({
fill:
fill &&
new Fill({
color:
fill.fillOpacity && fill.fill && fill.fill.slice(0, 1) === '#'
? hexToRGB(fill.fill, fill.fillOpacity)
: fill.fill,
}),
stroke:
stroke &&
new Stroke({
color:
stroke.strokeOpacity &&
stroke.stroke &&
stroke.stroke.slice(0, 1) === '#'
? hexToRGB(stroke.stroke, stroke.strokeOpacity)
: stroke.stroke || '#3399CC',
width: stroke.strokeWidth || 1.25,
lineCap: stroke.strokeLinecap && stroke.strokeLinecap,
lineDash: stroke.strokeDasharray && stroke.strokeDasharray.split(' '),
lineDashOffset: stroke.strokeDashoffset && stroke.strokeDashoffset,
lineJoin: stroke.strokeLinejoin && stroke.strokeLinejoin,
}),
});
}function pointClickedStyle(feature) {
var defaultStyle = new Style({
image: new Circle({
fill: new Fill({
color: 'rgba(255, 156, 156, 0.4)'
}),
stroke: new Stroke({
color: '#cc3333',
width: 1
}),
radius: 5
})
});
if (angular.isDefined(config.queryPoint)) {
if (config.queryPoint == "hidden") {
defaultStyle.getImage().setRadius(0);
}
else if (config.queryPoint == "notWithin") {
if (me.selector.getFeatures().getLength() > 0) {
defaultStyle.getImage().setRadius(0);
}
}export function createDrawInteractionStyle(color?: [number, number, number]): olstyle.Style {
color = color || [0, 153, 255];
return new olstyle.Style({
stroke: new olstyle.Stroke({
color: color.concat([1]),
width: 2
}),
fill: new olstyle.Fill({
color: color.concat([0.2])
}),
image: new olstyle.Circle({
radius: 8,
stroke: new olstyle.Stroke({
color: color.concat([1])
}),
fill: new olstyle.Fill({
color: color.concat([0.2])
})
})
});
}url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
})
}),
new VectorLayer({
source: new VectorSource({
features: [pointFeature, lineFeature, polygonFeature]
}),
style: new Style({
image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: 'data/icon.png'
})),
stroke: new Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new Fill({
color: [0, 0, 255, 0.6]
})
})
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});if (type === "Circle") {
let coordinates = geom.getCenter();
return new Point(coordinates);
}
return null;
}
})];
return styles;
}
if (geomType === "Text" && tempStyle.font) {
return [getTextStyle(tempStyle, textValues[0], options.style.useSelectedStyle || options.style.highlight)];
}
if (geomType === "MultiPolygon" || geomType === "Polygon") {
let styles = [
new Style({
stroke: options.style.useSelectedStyle ? new Stroke({
color: [255, 255, 255, 1],
width: tempStyle.weight + 2
}) : null
}),
new Style({
stroke: new Stroke( tempStyle.stroke ? tempStyle.stroke : {
color: options.style.useSelectedStyle ? blue : colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
lineDash: options.style.highlight ? [10] : [0],
width: tempStyle.weight || 1
}),
image: isDrawing ? image : null,
fill: new Fill(tempStyle.fill ? tempStyle.fill : {
color: colorToRgbaStr(options.style && tempStyle.fillColor || "#0000FF", tempStyle.fillOpacity || 1)
})
})
];getStyleByLine (options) {
let style = null
if (!options) {
style = new olStyle.Style({
stroke: new olStyle.Stroke({
width: 4,
color: '#0000EE'
})
})
} else {
style = new olStyle.Style({})
if (options['stroke'] && this._getStroke(options['stroke'])) {
style.setStroke(this._getStroke(options['stroke']))
}
if (options['text'] && this._getText(options['text'])) {
style.setText(this._getText(options['text']))
}
if (options['fill'] && this._getFill(options['fill'])) {
style.setFill(this._getFill(options['fill']))
}
}setSquareIcon() {
let fill = undefined;
let stroke = undefined;
let radius = this.iconSize * 0.5;
if (this.iconColor) {
fill = new Fill(({ color: this.convertSymbolColor }));
}
if (this.iconOutlineColor || this.iconOutlineWidth) {
stroke = new Stroke(({
color: this.convertSymbolOutlineColor,
width: this.iconOutlineWidth
}));
}
this.image = new RegularShape({
fill: fill,
stroke: stroke,
points: 4,
radius: radius,
angle: Math.PI / 4 + this.angle
});
}function ($rootScope, OlMap, config) {
var me = this;
this.selectedFeatures = new collection();
this.multiFalseStored = {};
let selectStyle = new Style({
fill: new Fill({
color: "rgba(108, 184, 222, 0.1)",
}),
stroke: new Stroke({
color: '#00ffe2',
width: 2
})
});
me.selector = new select({
condition: click,
toggleCondition: click,
filter: function(feature, layer) {
if(layer.get('selectable')){
if (layer.get('selectable').multi === true){
return layer.get('selectable').enabled == true ;
}
else if (layer.get('selectable').multi == false){
if (me.multiFalseStored[layer.ol_uid]) {function getMarkStroke(mark) {
const { stroke } = mark;
let olStroke;
if (stroke && stroke.styling && !(Number(stroke.styling.strokeWidth) === 0)) {
const { stroke: cssStroke, strokeWidth: cssStrokeWidth } = stroke.styling;
olStroke = new Stroke({
color: cssStroke || 'black',
width: cssStrokeWidth || 2,
});
}
return olStroke;
}return new Style({
image: new CircleStyle({
radius: radius,
fill: fillColor ? new Fill({ color: fillColor }) : null,
stroke: new Stroke({
color: borderColor,
width: borderWidth,
}),
}),
});
} else {
return new Style({
image: new CircleStyle({
radius: radius,
fill: fillColor ? new Fill({ color: fillColor }) : null,
stroke: new Stroke({
color: borderColor,
width: borderWidth,
}),
}),
text: new StyleText({
text: text.toString(),
fill: new Fill({ color: textFillColor }),
}),
});
}
};
