Удалить добавленный маркер перед добавлением нового маркера - PullRequest
Новая
       5

Удалить добавленный маркер перед добавлением нового маркера

0 голосов
/ 22 января 2019

Я пытаюсь разработать веб-приложение с функцией определения местоположения тегов, используя openlayers.Я хочу добавить максимум один маркер на карту при нажатии.Когда пользователь нажимает на карту во второй раз, предыдущий маркер будет удален.Но я не могу найти подходящий способ удалить маркер, прежде чем добавить новый. 

<script type="text/javascript">
    var myMap = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([118.0149, -2.5489]),
            zoom: 5
        })
    });

    var features = [];

    myMap.on('click', function(evt) {
        var coordinates = evt.coordinate;
        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        var lon = lonlat[0];
        var lat = lonlat[1];

        var Markers = {lat: lat, lng: lon};
        addPin(Markers);
    });

    function addPin(Markers) {
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;

        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'))
        });

        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 1],
                src: "http://cdn.mapmarker.io/api/v1/pin?text=P&size=50&hoffset=1"
            }))
        });

        iconFeature.setStyle(iconStyle);
        features.push(iconFeature);

        var vectorSource = new ol.source.Vector({
            features: features
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        myMap.addLayer(vectorLayer);
    }

1 Ответ

0 голосов
/ 22 января 2019

У вас есть несколько способов сделать это.Наиболее правильным способом является использование: 

vectorLayer.getSource().clear();

или: 

vectorSource.clear();

Но в вашем случае при каждом добавлении маркера вы также добавляете новый слой, просто удаляя слойиз карты перед добавлением должно быть достаточно: 

var vectorLayer;
function addPin(Markers) {
        //here it is
        myMap.removeLayer(vectorLayer) 
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;
        .........................
        .........................
        //and here remove the keyword var , so init the one declared in global section
        vectorLayer = new ol.layer.Vector({
        source: vectorSource
        });

Не забудьте объявить векторный слой в глобальном разделе, а не внутри функции addPin, иначе вы получите ошибки

...