更改 geojson Google 地图 API 的颜色

Question

我有一个集成了谷歌地图的反应应用程序。我正在尝试更改加载的 geojson 文件的颜色。但它没有给我任何结果。

const map = new google.maps.Map(ref.current, mapOptions);
map.data.loadGeoJson('https://storage.googleapis.com/geo_jsons/west%20(2).geojson');

map.data.setStyle((feature: any) => {
    console.log(feature.getProperty('name'))
    if (feature.getProperty('name') === 'a') {
            console.log('in')
        return /** @type {!google.maps.Data.StyleOptions} */ {
            fillColor: '#0000FF',
            strokeColor: 'black',
            strokeWeight: 2,
        };
    } else{
        return /** @type {!google.maps.Data.StyleOptions} */ {
            fillColor: '#000000',
            strokeColor: 'black',
            strokeWeight: 2,
        };
    }
});

当我改变描边颜色时，效果很好。但背景颜色更改不起作用。我该如何解决这个问题？

Answer 1

您的GeoJson几何图形是

LineString

（一条线），线没有

fill

，如果将其更改为

Polygon

，并使最后一个坐标与第一个坐标相同，它将起作用。

工作代码片段：

let map;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: { lat: 6.87837, lng: 80.039616 },
  });
  map.data.addGeoJson(geoJson);

  map.data.setStyle((feature) => {
    console.log(feature.getProperty('name'))
    if (feature.getProperty('name') === 'a') {
      console.log('in')
      return /** @type {!google.maps.Data.StyleOptions} */ {
        fillColor: '#0000FF',
        strokeColor: 'black',
        strokeWeight: 2,
      };
    } else {
      return /** @type {!google.maps.Data.StyleOptions} */ {
        fillColor: '#000000',
        strokeColor: 'black',
        strokeWeight: 2,
      };
    }
  });
}
let geoJson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name": "a"},"style": {"fill":"red", "fill-opacity":0.6},"geometry":{"coordinates":[[[79.998915663621,6.430560048867719],[80.01190739217787,6.450641856595695],[80.07397898417037,6.399001320521592],[80.13316352537123,6.361702128781303],[80.21111389671074,6.350224908995671],[80.2313232522427,6.378917477717835],[80.30061247121205,6.324400229666992],[80.31071714897718,6.347355564053032],[80.29916894581703,6.397566786474371],[80.33092650451078,6.396132248400761],[80.37856284255145,6.424822243696909],[80.38578046952665,6.44203546486861],[80.31360419976886,6.548170701637417],[80.29772542042195,6.563945643595233],[80.32082182674401,6.581154101189028],[80.29050779344522,6.618437045069314],[80.2587502347514,6.635643609227856],[80.25153260777631,6.66718741451443],[80.21111389671074,6.720233777288897],[80.21977505641979,6.75463919444212],[80.1966786500978,6.787608702343945],[80.18368692154093,6.816276004684326],[80.21111390404968,6.814842680224999],[80.20245275167787,6.8535409336832345],[80.18513044693594,6.862140119592638],[80.21400095483972,6.912298935816992],[80.23194720787023,6.943070670371313],[80.21889538384556,6.978698626400686],[80.18952877979052,6.988414871635825],[80.17321399976208,7.056422917771286],[80.19442321380097,7.096899160296871],[80.21889538384556,7.134134159953561],[80.20258060202525,7.1535599127349485],[80.18789729999781,7.135753002063424],[80.1650566079561,7.14546594842885],[80.16668808595887,7.184315667009841],[80.19605469001198,7.194027578561645],[80.19605469001198,7.2361101240043695],[80.20584355803095,7.257149926580155],[80.18952877800064,7.274952068137722],[80.15689921793995,7.302463079300551],[80.15037330592861,7.318645236752332],[80.13242704789542,7.336444931953551],[80.10632339984613,7.328354249560377],[80.06390497176835,7.292753503613767],[80.02964393370485,7.317027047399918],[80.00843471966601,7.3299723977985],[79.97906811561097,7.305699557687916],[79.94480707754752,7.292753503613767],[79.92033490750288,7.286280336152501],[79.87302204541663,7.28466202967239],[79.84039248535595,7.28466202967239],[79.83386657334273,7.221543531983528],[79.7996055352811,7.205357879400879],[79.83060361733698,7.130896451561142],[79.85997022139202,7.011085322277495],[79.86323317739766,6.981937394902332],[79.8175517933143,6.947929184854402],[79.82734066133133,6.915538126078886],[79.83876100735313,6.920396926742072],[79.85833874338914,6.810251898125131],[79.90565238435573,6.691979742475411],[79.9660170704667,6.536400336352642],[79.97580593848568,6.447244412208889],[79.99701515252451,6.431032553315802],
// make last coordinate same as first
[79.998915663621,6.430560048867719]]],
// change "LineString" to "Polygon"
"type":"Polygon"}}]}


window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>
  <head>
    <title>Data Layer: Styling</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>