ArcGIS-Javascript-API utiliza la propiedad "color" de cada característica poligonal en el archivo geoJSON

Question

Estoy utilizando la API Javascript de ArcGIS v4.17. Mi archivo geoJSON tiene la propiedad "color" definida para cada característica. Me gustaría colorear cada polígono en el mapa utilizando el color que se define en el archivo geoJSON. ¿Podría ayudarme?

Archivo GeoJSON:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "color":"red"
         },
         "geometry":{
            "type":"Polygon",
            "coordinates":[
               [
                  [-77.06818685702217,38.81969344450444],
                  [-77.06761126974416,38.81970363664622],
                  [-77.06762429634536,38.82015392436274],
                  [-77.06819988724344,38.82014373205801],
                  [-77.06818685702217,38.81969344450444]
               ]
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "color":"yellow"
         },
         "geometry":{
            "type":"Polygon",
            "coordinates":[
               [
                  [-77.0666293687195,38.82557775397718],
                  [-77.06605373350021,38.82558793973532],
                  [-77.06606675302561,38.82603822744011],
                  [ -77.06664239186607,38.82602804151912],
                  [-77.0666293687195,38.82557775397718]
               ]
            ]
         }
      }
   ]}

Código que tengo hasta ahora:

const url = "localhost:8080/javascript/GeoJSON.json";

const renderer = {
        type : "simple",
        symbol : {
            type : "simple-fill",
            color : "green", 
            outline : { 
                color : "white",
                width : 0.7
            }
        }};

const geojsonLayer = new GeoJSONLayer({
            url : url,
            renderer : renderer, 
            opacity : 0.70,
            geometryType : "polygon"
            });

this.map.add(geojsonLayer);

La pregunta es, ¿cómo reemplazo el color: "verde" en el código para utilizar la propiedad "color" definida en mi archivo geoJSON?

Answer 1

Para mostrar las características en función de los diferentes valores de su propiedad "color", puede utilizar UniqueValueRenderer (en lugar del SimpleRenderer que muestra todas las características con el mismo color). Necesitaría saber cuáles son los valores posibles en el geojson.

  const uniqueValuesByColorProperty = {
    type: "unique-value",
    field: "color", // the name of the property in your geojson
    defaultSymbol: {
      type: "simple-fill",
      color: "grey"
    },
    defaultLabel: "Other polygons", //  used in the Legend widget for types not specified
    uniqueValueInfos: [{
        value: "red",
        symbol: {
          type: "simple-fill",
          color: "red"
        },
        label: "Red polygons" // displayed in the Legend widget
      },
      {
        value: "yellow",
        symbol: {
          type: "simple-fill",
          color: "yellow"
        },
        label: "Yellow polygons" // displayed in the Legend widget
      }
    ]
  };

Aquí hay un ejemplo de funcionamiento .