[英]In openlayers 3, how to fill the polygon with a picture from a url?
I would like to add a picture in the polygon, however, I do not find such function in openlayers 3. Is there any way to achieve this? 我想在多边形中添加图片,但是在openlayers 3中找不到这样的功能。有什么方法可以实现?
Thanks in advance! 提前致谢!
Since Pull Request #4632 you can use a CanvasRenderingContext2D.fillStyle
as ol.style.Fill#color
property and create a pattern . 从Pull Request#4632开始,您可以将
CanvasRenderingContext2D.fillStyle
用作ol.style.Fill#color
属性并创建模式 。
Something like this: 像这样:
var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'https://i.imgsafe.org/73d1273.png';
img.onload = function(){
var pattern = ctx.createPattern(img, 'repeat');
// featurePoly is ol.Feature(new ol.geom.Polygon(...))
featurePoly.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: pattern
})
}));
};
I am not sure what would be the visual output of your requirement but I may give you the direction to solve your problem. 我不确定您的需求的视觉输出是什么,但是我可以为您提供解决问题的方向。
OL3 can use predifined styles or an array of styles or even a function that returns a style for each feature supplied. OL3可以使用预定义的样式或样式数组,甚至可以使用为所提供的每个功能返回样式的函数。 So you should propably use the style function to achieve your goal.
因此,您应该适当地使用样式功能来实现您的目标。 Lets say that you want to place one image within every vector polygon.
假设您要在每个矢量多边形中放置一个图像。 Consider the following code snip
考虑以下代码片段
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://openlayers.org/en/v3.14.0/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
}),
style: function(feature, resolution) {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
})
})
];
var mygeomType = feature.getGeometry().getType();
//handle the case of polygons/multipolygons
var retGeom = null;
if (mygeomType === 'MultiPolygon'){
//get the interior points for every polygon of the multipolygon
retGeom = feature.getGeometry().getInteriorPoints();
}
if (mygeomType === 'Polygon'){
//just get the interiot point of the simple polygon
retGeom = feature.getGeometry().getInteriorPoint();
}
styles.push(new ol.style.Style({
geometry: retGeom,
image: new ol.style.Icon({
src: 'http://openlayers.org/en/master/examples/data/icon.png',
anchor: [0.75, 0.5],
rotateWithView: true
})
}));
return styles;
}});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.