Блог

Главная - Вопросы по программированию - Есть ли способ сбросить функцию подсветки и информационную панель при новом щелчке мыши?

Есть ли способ сбросить функцию подсветки и информационную панель при новом щелчке мыши?

#javascript #highlight

Вопрос:

У меня есть путь к данным GeoJSON для создания карты на веб-сайте. Я хотел бы, чтобы информационная панель заполнялась информацией, когда пользователь нажимает на слой на карте, и чтобы подсветка и информационная панель сбрасывались всякий раз, когда появляется новый щелчок на другой части карты. В настоящее время информационная панель сбрасывается всякий раз, когда вы «наводите курсор» на слой. Я не уверен, как закодировать информационный блок, чтобы он оставался заполненным информацией до тех пор, пока не появится новый щелчок.

 function createMap(lat,lon,zl){
    map = L.map('map').setView([lat,lon], zl);

    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
    {
        attribution: 'Map data amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'light-v10',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1Ijoic2FyYWhwZXJlejEiLCJhIjoiY2t0MG9hZDNnMDZ2NDJ1c2M5dzBmb201OSJ9.5fv8NqX5cfA0NMcmEW_63g'
    })
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature,
    });
}

// on mouse over, highlight the feature
function highlightFeature(e) {
    var layer = e.target;

    // style to use on mouse over
    layer.setStyle({
        weight: 2,
        color: '#666',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie amp;amp; !L.Browser.opera amp;amp; !L.Browser.edge) {
        layer.bringToFront();
    }
    
    createDashboard(layer.feature.properties);
    info_panel.update(layer.feature.properties);
   
}

// on mouse out, reset the style, otherwise, it will remain highlighted
function resetHighlight(e) {
    geojson_layer.resetStyle(e.target);
    info_panel.update() // resets infopanel
}

// on mouse click on a feature, zoom in to it
function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}
Метки: