1. 程式人生 > >openlayers3中polygon上新增icon

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

效果如下: