如何解决在openlayers中,如何从多边形的url中拟合拉伸图片?
我尝试在多边形中添加图片 我找到了这个答案In openlayers 3,how to fill the polygon with a picture from a url?
但是,我想使图片适合(拉伸)到多边形中(因为我打算添加以后可以调整多边形大小的特征) 我已经尝试
var pattern = ctx.createPattern(img,'no-repeat');
但是没有用。 有什么办法可以做到这一点?
解决方法
在OpenLayers 3和4中,您可以创建一个样式以适合该功能将要占据的大小(类似于https://openlayers.org/en/v4.6.5/examples/canvas-gradient-pattern.html中适合宽度的渐变)。这会随着分辨率的变化而变化,并且需要一个样式功能,该样式功能必须是同步的,因此应该预加载图像。在以后的版本中,这将更加复杂,因为您将不得不确定OpenLayers将使用512像素的原点来代替功能的范围,并相应地填充或裁剪图案。
<!DOCTYPE html>
<html>
<head>
<title>Styling feature with CanvasGradient or CanvasPattern</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
#map {
background: #ccc;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var flagStyle = function(feature,resolution) {
var pattern;
var img = feature.get('flag');
if (img) {
var cnv1 = document.createElement('canvas');
var ctx1 = cnv1.getContext('2d');
// Patterns are in canvas pixel space,so we adjust for the
// renderer's pixel ratio
var pixelRatio = ol.has.DEVICE_PIXEL_RATIO;
var extent = feature.getGeometry().getExtent();
var width = ol.extent.getWidth(extent) / resolution * pixelRatio;
var height = ol.extent.getHeight(extent) / resolution * pixelRatio;
if (width >= 1 && height >= 1) {
cnv1.width = width;
cnv1.height = height;
ctx1.drawImage(img,2,12,60,40,width,height);
var cnv2 = document.createElement('canvas');
var ctx2 = cnv2.getContext('2d');
pattern = ctx2.createPattern(cnv1,'no-repeat');
}
}
return new ol.style.Style({
fill: new ol.style.Fill({
color: pattern
})
});
};
// Create a vector layer that makes use of the style function above…
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://openlayersbook.github.io/openlayers_book_samples/assets/data/countries.geojson',format: new ol.format.GeoJSON()
}),style: flagStyle
});
vectorLayer.getSource().on('addfeature',function(event) {
var feature = event.feature;
var img = new Image();
img.onload = function() {
feature.set('flag',img);
}
img.src = 'https://www.countryflags.io/' +
feature.get('iso_a2').toLowerCase() + '/flat/64.png';
});
var map = new ol.Map({
layers: [
vectorLayer
],target: 'map',view: new ol.View({
center: ol.proj.fromLonLat([7,52]),zoom: 3
})
});
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。