简体   繁体   中英

how to change the default marker OPENLAYERS 5

I am trying to display some markers on the OSM. This works so far, but i just wanted to change the default marker against another one from a local path, but i didnt know how to add this to my code, i have tried the setStyle but i didnt know how to apply it correctly. It would be also nice if am able to style the icon too. I also want markers to be dynamically displayed, because i am doing this manually each time through

var layer = new ol.layer.Vector({source: new ol.source.Vector({
    features: [
        new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
         }),
        new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 52.84673]))
         }),
    ]
}); 

Here is a snippet of the full code that i use

/* open street map newest version */
var map = new ol.Map({
    target: 'map', // the div id
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({ 
        center: ol.proj.fromLonLat([4.35247, 52.520008]),
        zoom: 4
    })
});
// add a marker to the map
var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
            new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
            }),
            new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 52.84673]))
            })
        ]
    })
});
map.addLayer(layer);
//initialize the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
});
map.addOverlay(overlay);
//display the pop with on mouse over
map.on('pointermove', function (event) {
    if (map.hasFeatureAtPixel(event.pixel) === true) {
        var coordinate = event.coordinate;
        content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
        overlay.setPosition(coordinate);
    }
    else {
        overlay.setPosition(undefined);
        closer.blur();
    }
});

Fixed this, the issue was from the local path. If this may help anyone i added this to my code

layer.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
        src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png'
    })
}));

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM