Добавление класса из набора данных geoJSON - PullRequest
0 голосов
/ 12 июня 2019

Я пытаюсь дать класс маркерам на карте Leaflet на основе свойств geoJSON, используя Leaflet 0.7.3.Я хочу иметь возможность изменять цвет маркера в зависимости от обрезки, которую он представляет с помощью CSS.Это кажется довольно простым, но все, что я попробовал, не удалось.

Я пытался использовать:

L.DomUtil.addClass (marker._icon, 'className');

и

addClass (маркер, «здесь я использую переменную»);

, но он не работает.Итак, вот код, который я использую:

L.geoJson(geoDataF,{
pointToLayer: function(feature,latlng){
var className = feature.properties.crop;
console.log(className);
var marker = L.marker(latlng);
marker.bindPopup(feature.properties.name 
+ '<br/>' + feature.properties.location
+ '<br/>' + "Crops: " + feature.properties.crop);
console.log(marker);
return marker;
}
}).addTo(map);

Я не уверен, где добавить дополнительный код для добавления класса и какой синтаксис использовать.каждый раз, когда я использую addclass, я получаю сообщение, что не могу его использовать, потому что это не функция.Я думаю об использовании D3, чтобы попытаться добавить класс, но я не совсем понимаю листовку, и мне трудно манипулировать DOM.

1 Ответ

0 голосов
/ 19 июня 2019

См. Это: Листовка, меняющая цвет маркера

addClass используется для добавления класса в элемент html, поэтому вы должны указать, какие элементы например: $(selector).addClass(header, 'closed'); Обратитесь к этому: https://www.w3schools.com/jquery/html_addclass.asp для использования addClass

getColor() write function in the js script to adjust your color accordingly     
function style(feature) {
        return {
            fillColor: getColor(feature.properties.density),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        };
    }
L.geoJson(statesData, {style: style}).addTo(map);

Это пример из учебника для листовок, который можно найти (очень помогает) https://leafletjs.com/examples/choropleth/

Также маркер является изображением (png) правильно, поэтому вы не сможете изменить его цвет, определить разные изображения (маркеров с разными цветами).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...