openlayers在地图上添加maker

如下图所示,点击地图的时候,显示一个小红点

openlayers在地图上添加maker_第1张图片

初始化一个图层

function initMaker() {

    makerLayer = new ol.layer.Vector({

        source: null,

        style: null,

        zIndex: 11

    })

    map.addLayer(makerLayer)

}

点击地图的时候添加

map.on('click', function(e) {

    // console.log(e, 'e')

    addMaker(e.coordinate)

})

添加的函数

function addMaker(coordinate) {

    makerLayer.setSource(null);

    var feature = new ol.Feature({

        geometry: new ol.geom.Point(coordinate)

    });

    var source = new ol.source.Vector();

    source.addFeatures([feature]);

    makerLayer.setSource(source)

    var style = new ol.style.Style({

        image: new ol.style.Circle({

            radius: 7,

            fill: new ol.style.Fill({

                color: '#ff0000'

            })

        })

    });

    makerLayer.setStyle(style);

}

 

你可能感兴趣的:(OpenLayers)