How to use the ol/style.Fill 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.
vmware-samples / vmware-blockchain-samples / supply-chain / src / app / world-map / world-map.component.ts View on Github 
private initMap() {
const tilePixels = new Projection({
code: 'TILE_PIXELS',
units: 'tile-pixels'
});
// Styles for the country layer - same fill and stroke for flat earth look
const countryStyle = new Style({
fill: new Fill({
color: this.theme.countryFill
}),
stroke: new Stroke({
color: this.theme.countryBorder,
width: 1
})
});
// Fill color for feature bubbles
const nodeFeatureFill = new Fill({ color: this.theme.nodeFill });
const nodeFeatureFillSelected = new Fill({ color: this.theme.nodeFill });
// Overlay container for the tooltip on node hover
this.overlay = new Overlay({
element: this.tooltipContainer.nativeElement,
positioning: 'right',
autoPan: true,code: 'TILE_PIXELS',
units: 'tile-pixels'
});
// Styles for the country layer - same fill and stroke for flat earth look
const countryStyle = new Style({
fill: new Fill({
color: this.theme.countryFill
}),
stroke: new Stroke({
color: this.theme.countryBorder,
width: 1
})
});
// Fill color for feature bubbles
const nodeFeatureFill = new Fill({ color: this.theme.nodeFill });
const nodeFeatureFillSelected = new Fill({ color: this.theme.nodeFill });
// Overlay container for the tooltip on node hover
this.overlay = new Overlay({
element: this.tooltipContainer.nativeElement,
positioning: 'right',
autoPan: true,
autoPanAnimation: {
source: null,
duration: 250
}
});
this.vectorSource = new VectorSource({
wrapX: false,
features: this.featureCollection}), new Style({
image: new Icon({
rotation,
src: extraMarker,
anchor: [markers.size[0] / 2, markers.size[1]],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
size: markers.size,
offset: [markers.colors.indexOf(options.style.iconColor || 'blue') * markers.size[0], markers.shapes.indexOf(options.style.iconShape || 'circle') * markers.size[1]]
}),
text: new Text({
rotation,
text: glyphs[options.style.iconGlyph],
font: '14px FontAwesome',
offsetY: -markers.size[1] * 2 / 3,
fill: new Fill({color: '#FFFFFF'})
})
})].concat(getHighlightStyle(options.style));
}
},fill: new olStyle.Fill({
color: 'rgba(0, 153, 255, 1)'
}),
stroke: style.getStroke(),
snapToPixel: Util.getOlVersion() === '4' ? style.getSnapToPixel() : null
});
} else if (style instanceof olStyle.RegularShape) {
defaultHighLightStyle = new olStyle.RegularShape({
radius: style.getRadius(),
radius2: style.getRadius2(),
points: style.getPoints(),
angle: style.getAngle(),
snapToPixel: Util.getOlVersion() === '4' ? style.getSnapToPixel() : null,
rotation: style.getRotation(),
rotateWithView: style.getRotateWithView(),
fill: new olStyle.Fill({
color: 'rgba(0, 153, 255, 1)'
}),
stroke: style.getStroke()
});
}
style = me.highLightStyle || defaultHighLightStyle;
}
vectorContext.setStyle(new olStyle.Style({
image: style
}));
let geometry = graphic.getGeometry();
let coordinate = geometry.getCoordinates();
let pixelP = map.getPixelFromCoordinate(coordinate);
let rotation = -map.getView().getRotation();
let center = map.getPixelFromCoordinate(map.getView().getCenter());
let scaledP = scale(pixelP, center, 1);import Select from 'ol/interaction/Select'
import styled from 'styled-components'
import dc2003 from '../data/DCCA_2003'
import dc2007 from '../data/DCCA_2007'
import dc2011 from '../data/DCCA_2011'
import dc2015 from '../data/DCCA_2015'
import dc2019 from '../data/DCCA_2019'
const MapContainer = styled.div`
width: 100%;
height: 100%;
`
const regionStyle = new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new Stroke({
color: '#319FD3',
width: 1,
}),
text: new Text({
font: '16px Calibri,sans-serif',
fill: new Fill({
color: '#000',
}),
stroke: new Stroke({
color: '#fff',
width: 2,
}),
}),const olFeature = format.readFeatures(text, {
dataProjection: sourceSrs,
featureProjection: map.projection
});
overlayDataSource.ol.addFeatures(olFeature);
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const stroke = new Stroke({
color: [r, g, b, 1],
width: 2
});
const fill = new Fill({
color: [r, g, b, 0.4]
});
const layer = new VectorLayer({
source: overlayDataSource,
style: new Style({
stroke: stroke,
fill: fill,
image: new Circle({
radius: 5,
stroke: stroke,
fill: fill
})
})
});
map.addLayer(layer);export function createMeasureLayerStyle(): olstyle.Style {
return new olstyle.Style({
stroke: new olstyle.Stroke({
color: '#ffcc33',
width: 2
}),
fill: new olstyle.Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
});
}let strokeColor = style && (style.strokeColor || style.color) ? style.strokeColor || style.color : '#ffcc33';
if (selected) {
strokeColor = '#4a90e2';
}
strokeColor = this.hexToRgb(strokeColor).concat([style && style.opacity || 1]);
let newStyle = new Style({
fill: new Fill({
color: fillColor
}),
stroke: new Stroke({
color: strokeColor,
width: style && (style.strokeWidth || style.weight) ? style.strokeWidth || style.weight : 2
}),
text: new Text({
text: style && style.text ? style.text : '',
fill: new Fill({ color: style && (style.strokeColor || style.color) ? style.strokeColor || style.color : '#000' }),
stroke: new Stroke({ color: '#fff', width: 2 }),
font: style && style.fontSize ? style.fontSize + 'px helvetica' : ''
})
});
if (type === "GeometryCollection") {
return [...getMarkerStyleLegacy({
style: { iconGlyph: 'comment',
iconShape: 'square',
iconColor: 'blue' }
}), newStyle];
}
if (style && (style.iconUrl || style.iconGlyph)) {
return getMarkerStyleLegacy({
styleif (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)
})
})
];
let startEndPointStyles = options.style.useSelectedStyle ? startEndPolylineStyle({radius: tempStyle.weight, applyToPolygon: true}, {radius: tempStyle.weight, applyToPolygon: true}) : [];
return [...styles, ...startEndPointStyles];
}
return fallbackStyle;
};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) {
