如何在传单中动态更改geojson多边形的颜色答案

【问题标题】：how to dynamically change the color of a geojson polygon in leaflet如何在传单中动态更改geojson多边形的颜色
【发布时间】：2021-10-20 18:49:26
【问题描述】：

我正在使用传单来呈现城市地图，并使用 geojson 来覆盖城市中的社区。我已经在我的 css 文件中设置了社区的样式。我想要做的是确定街区的名称，并且将某些街区的名称确定为不同的颜色，但我不知道该怎么做。有人可以帮忙吗？

我的geojson文件很长，但开头却是：

    var neighborhoods = {
    "features": [
    { "type": "Feature", "properties": { "objectid": 1293, "fid_blockg": 201, "statefp10": "42", "countyfp10": "003", "tractce10": "980600", "blkgrpce10": "1", "geoid10": "420039806001", "namelsad10": "Block Group 1", "mtfcc10": "G5030", "funcstat10": "S", "aland10": 982752, "awater10": 473795, "intptlat10": "+40.4518148", "intptlon10": "-080.0280506", "shape_leng": 19600.683115899999, "fid_neighb": 64, "area": 10688264.0, "perimeter": 80995.806272269998, "neighbor_": 35, "neighbor_i": 2117, "hood": "Chateau", "hood_no": 22, "acres": 246.501, "sqmiles": 0.383, "dpwdiv": 1, "unique_id": 113, "sectors": 3, "shape_le_1": 19607.9761334, "shape_ar_1": 10688263.843, "page_number": 15, "plannerassign": "Stephanie Joy Everett", "created_user": "pgh.admin", "created_date": "2020\/08\/14 14:52:26.925+00", "last_edited_user": "pgh.admin", "last_edited_date": "2020\/08\/14 14:52:26.925+00", "temp": null, "Shape__Area": 10687956.966918901, "Shape__Length": 19600.573084522901 }, "geometry": { "type": "Polygon", "coordinates": [ ... ] } }, 
...
more neighborhoods 
...

    ]
    }

css

path.leaflet-interactive {
    stroke-width: 1;
    stroke: #848484;
    fill: #DCDCDC; /*#e3c999;*/
    fill-opacity: .7;
    cursor: default;
}

jquery

var mymap = L.map('mapid').setView([40.4417, -80.0000], 12);
  L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'

}).addTo(mymap);

    L.geoJson(neighborhoods).addTo(mymap); //neighborhoods variable was set in the geojson
    
    $.each(neighborhoods , function(index, item) { 
        for (var i = 0; i< 90; i++) {
            var str = item[i].properties.hood;
            
            if (str == "Strip District") {
                $(this).css('fill','#ffffff'); //doesn't work
                
            }
        }

【问题讨论】：

标签： leaflet polygon geojson

【解决方案1】：

这对我有用：

var layer = L.geoJSON(neighborhoods, {
     onEachFeature: function (feature, layer) {
        layer.bindTooltip(feature.properties.hood);
        if (feature.properties.hood == "Strip District") {
            layer.setStyle({fillColor :'#f7941d'}); 
        } else {
            layer.setStyle({fillColor :'#DCDCDC'}); 
        }
    }
    }).addTo(mymap);

【讨论】：

【解决方案2】：

如果你想在图层应用后改变颜色，你可以试试这个。您可以按功能将 geojson 拆分为一个数组，然后将这些功能添加到 layerGroup。然后，您可以使用layerGroup.eachLayer() 函数访问所需的图层并使用setStyle 设置所需的颜色/填充。以下是如何通过单击按钮更改图层颜色的示例：

import './style.css';
import mdGeojson from './maryland.json';

var mymap = L.map('mapid').setView([39.0458, -76.6413], 7);
var OpenStreetMap_Mapnik = L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    maxZoom: 19,
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    layers: [OpenStreetMap_Mapnik, layerGroup],
  }
);
OpenStreetMap_Mapnik.addTo(mymap);

// Create a Leaflet layer group for the geojson layer:
var layerGroup = L.layerGroup().addTo(mymap);

// Spread each geojson feature into an array:
var regions = [...mdGeojson.features];
// console.log(regions)

// Iterate the array and place each layer individually:
regions.forEach((region) => {
  L.geoJson(region).addTo(layerGroup);
});

document.getElementById('button').addEventListener('click', () => {
  layerGroup.eachLayer((layer) => {
    // *** properties.name here will probably be properties.hood for you. 
    // This is simply retrieving the properties from the geojson:
    var name = Object.values(layer._layers)[0].feature.properties.name;
    // console.log(Object.values(layer._layers)[0].feature.properties.name);
    if (name === 'Baltimore City') {
      layer.setStyle(() => ({ color: 'orange', fillColor: 'orange' }));
    }
    if (name === 'Baltimore County') {
      layer.setStyle(() => ({ color: 'white', fillColor: 'white' }));
    }
    if (name === 'Montgomery County') {
      layer.setStyle(() => ({ color: 'red', fillColor: 'red' }));
    }
    if (name === 'Lower Shore') {
      layer.setStyle(() => ({ color: 'yellow', fillColor: 'yellow' }));
    }
  });
});
//

这里是这里使用的geojson的链接，一个现场演示，以及一些重要的传单链接：

【讨论】：