openlayers3中polygon上添加icon

by · 2019-04-03

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



相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序