openlayers3中polygon上添加icon

var vectorSource = new ol.source.Vector();
var polygon = new ol.geom.Polygon([[[120.97, 23.1],[115.97, 15.1],[118.97, 13.1],[120.97, 20.1]]]).transform('EPSG:4326', 'EPSG:3857');
vectorSource.addFeature(
        new ol.Feature({
            geometry: polygon,
            name : '面',
            index : '1'
        })

);//添加面

/*
*style可以一个数组类型的ol.style.Style,如下所示
*/
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature){
            return [
                new ol.style.Style({
                image: new ol.style.Icon(
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: './images/4.png'
                })),
                geometry: function (feature) {
                    var coordinates = feature.getGeometry().getCoordinates()[0];
                    return feature.getGeometry().getInteriorPoint();
                }
            }),
            new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.get('name'),
                        fill: new ol.style.Fill({
                            color: '#ff0000'
                        })
                    }),
                    fill: new ol.style.Fill({
                        color: '#ff0000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ff0000'
                    })
                })
            ]
        }
});

效果如下:

转载自:https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/51702841.jpg

You may also like...

退出移动版