openlayers3中polygon上添加icon

最新推荐文章于 2024-05-17 22:54:00 发布

alonso_ecit

最新推荐文章于 2024-05-17 22:54:00 发布

阅读量5.4k

点赞数 1

分类专栏： openlayers3 文章标签： openlayers

本文链接：https://blog.csdn.net/u014269043/article/details/51702841

版权

openlayers3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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'
                    })
                })
            ]
        }
});

效果如下：