Openlayer以图片填充面，pattern填充

pattern填充无效：需要将方法写在img.onload事件中

var color =  "rgba(255,0,0,1)";

                var stroke = new ol.style.Stroke({

                    color: color,

                    width: 3

                    //lineDash: [10, 10]

                });

var cnv = document.createElement('canvas');

                var ctx = cnv.getContext('2d');

                var img = new Image();

                img.src = '../../../static/images/tb.png';

                img.onload = function () {

                    var pattern = ctx.createPattern(img, 'repeat');

                    var fill = new ol.style.Fill({

                        color:  pattern  //'rgba(0,0,0,0.2)'

                    });

                    var drawStyle = new ol.style.Style({

                        fill: fill,

                        stroke: stroke

                    });

                      //polygons为arcgis的features数组。

                    for(var i=0;i<polygons.length;i++){

                        var polygon=polygons[i];

                        //添加新要素feature

                        var polygonFeature = polygon;

                        if(polygon.geometry!=undefined&&polygon.geometry.rings!=undefined) {

                            polygonFeature = new ol.feature.Feature({

                                geometry: new ol.geometry.Polygon(polygon.geometry.rings),

                                attribute: polygon.attributes

                            });

                            polygonFeature.setStyle(drawStyle);

                            me.vectorLayer.layer.getSource().addFeature(polygonFeature);

                        }              

                    }

                };

最后

以上就是聪明帆布鞋最近收集整理的关于Openlayer以图片填充面，pattern填充的全部内容，更多相关Openlayer以图片填充面内容请搜索靠谱客的其他文章。