Как выделить мультиполигон на карте и имя в div - PullRequest
Новая
       13

Как выделить мультиполигон на карте и имя в div

1 голос
/ 24 сентября 2019

Я новичок в JS, и я ищу помощи, потому что я в тупике.Я борюсь за пару дней на событиях в JS / LeafletJS :(

Я хочу выделить элемент на карте и соответствующие данные, перечисленные в div. Я не знаю, как выбрать оба и сделать событиепри наведении курсора и наведении указателя мыши

Я остановился на выделенном объекте на карте, но безуспешно с div: (

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            color: '#666' ,
            fillOpacity: 0.7
        })
    }

    function resetHighlight(e) {
        geoJSON.resetStyle(e.target);
    };

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

Вот JSFiddle из того, что я сделал до сих пор.

https://jsfiddle.net/JohnDoeJr/jcxz2ruw/6/

Я ожидаю, что когда вы наведете курсор мыши на мультиполигон, он изменит внешний вид (выделение), а в div соответствующие данные также будут выделены, и наоборот.

1 Ответ

1 голос
/ 25 сентября 2019

Просто добавьте идентификатор к каждому слою и присвойте тот же идентификатор соответствующему тексту 

geoJSON.eachLayer(function (layer) {
    layer._path.id = layer.feature.properties.Name;  // This assigns id to each layer with the layer name          
);  
function updateList(target){
    var displayed = target.getLayers();
    var list = document.getElementById('displayed-list');
    list.innerHTML = "";
    displayed.forEach(function(borders){
      var li = document.createElement('li');
      li.innerHTML = borders.feature.properties.Name;
      li.setAttribute("id", borders.feature.properties.Name); // this assigns id to the text with layer's name
      list.appendChild(li);
    });
}

И добавьте эти стили при наведении курсора на слой geoJSON 

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            color: '#666' ,
            fillOpacity: 0.7
        })
        id = e.target.feature.properties.Name
        $("li#"+id).css("font-weight","bold")
    }

    function resetHighlight(e) {
        geoJSON.resetStyle(e.target);
        id = e.target.feature.properties.Name
        $("li#"+id).css("font-weight","")
    };

И нене забудьте включить jQuery.

Вы можете добавить ту же функцию к тексту при наведении, которую я не включил.

...