Ошибка типа при стилизации элементов geojson в leaflet.js

#javascript #leaflet #geojson

#javascript #брошюра #geojson

Вопрос:

Я пытаюсь использовать leaflet.js чтобы создать карту хороплета. Я начал с geojson стран и добавил дополнительную информацию из данных API. Geojson теперь выглядит так:

 {
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "properties": { "ADMIN": "Aruba", "ISO_A3": "ABW", "HW_COUNT": 0, "ISO_A2": "AW" }, "geometry": { "type": ...

И загружается в переменную combined_jsons .

Этот код успешно загружает карту с geojson:

 var mymap = L.map('mapid').setView([51.505, -0.09], 2);
L.geoJSON(combined_jsons).addTo(mymap)

К сожалению, у меня возникли проблемы со следующим шагом, который заключается в стилизации стран на основе HW_COUNT .

Я использовал этот пример, чтобы попытаться правильно структурировать свой стиль с помощью этого кода:

 L.geoJSON(combined_jsons, {
      style: function(feature){
        var fillColor,
          hw_count = combined_jsons.features.properties.HW_COUNT;
        if (hw_count > 5) fillColor = "#006837";
        else if (hw_count > 0) fillColor = "#78c679";
        else fillColor = "#f7f7f7";
        return { color: "#999", weight: 1, fillColor: fillColor, fillOpacity: .6 };
      }
    } ).addTo(mymap);

Это возвращает Uncaught TypeError: combined_jsons.features.properties is undefined ошибку. Я могу успешно console.log(combined_jsons.features[0].properties.HW_COUNT); , но добавление [0] , похоже, противоречит смыслу стиля, который, как я полагаю, повторяется через каждый элемент?

Есть ли лучший способ структурирования этого слоя?

Спасибо

1. Обратный style вызов принимает a feature , а не целое FeatureCollection . L.GeoJSON перебирает каждый Feature из FeatureCollection них для вас. Итак, в основном вы хотите использовать feature.properties.HW_COUNT вместо combined_jsons.features[i].properties.HW_COUNT , поскольку style() будет вызываться много раз, и feature аргумент будет принимать значение combined_jsons.features[i] для каждого возможного i .

2. Это сработало отлично. Я обновился hw_count = combined_jsons.features.properties.HW_COUNT; hw_count = feature.properties.HW_COUNT; , и теперь все, кажется, работает. Спасибо!

Ответ №1:

Вам нужно получить свойство текущего объекта, а не из всех объектов, также проверьте, существует ли свойство:

 style: function(feature){
        var fillColor,
          hw_count = 0;
        if(feature amp;amp; feature.properties amp;amp; feature.properties.HW_COUNT){
          hw_count = feature.properties.HW_COUNT;
        }
        if (hw_count > 5) fillColor = "#006837";
        else if (hw_count > 0) fillColor = "#78c679";
        else fillColor = "#f7f7f7";
        return { color: "#999", weight: 1, fillColor: fillColor, fillOpacity: .6 };
}

1. Похоже, мне даже не нужно было быть таким сложным. hw_count = feature.properties.HW_COUNT; похоже, что один сделал свое дело. Я убедился, что свойство существует, когда я объединил исходный geojson и данные на основе API, поэтому я думаю, что я в безопасности, пропуская фазу «проверить, существует ли свойство». Спасибо!

Ответ №2:

Основываясь на предложениях @IvanSanchez и @Falke-Design, я обновил код следующим образом:

 L.geoJSON(combined_jsons, {
  style: function(feature){
    var fillColor,
      hw_count = feature.properties.HW_COUNT;
    if (hw_count > 5) fillColor = "#006837";
    else if (hw_count > 0) fillColor = "#78c679";
    else fillColor = "#f7f7f7";
    return { color: "#999", weight: 1, fillColor: fillColor, fillOpacity: .6 };
  }
} ).addTo(mymap);

Изменение четвертой строки с hw_count = combined_jsons.features.properties.HW_COUNT; to hw_count = feature.properties.HW_COUNT; сделало свое дело.

Если бы я не позаботился о добавлении HW_COUNT записи для каждой страны (даже если значение равно 0), я бы использовал код @Falke-Design, чтобы сначала проверить, существует ли запись.