Google Maps API - geoJSONからポリゴンの不透明度を取得する

Question

多くのポリゴン（11 000）でマップを作成しようとしていますが、各ポリゴンの色は同じですが、不透明度が異なるようにします。不透明度/多角形は、次のように保存されています。

{'geometry': {'coordinates': [[[10.927456267537572, 45.68179119797432], 
     [10.940290010697588, 45.68157387892596], 
     [10.939979018768243, 45.67257819153854], 
     [10.927147329501077, 45.672795442796335], 
     [10.927456267537572, 45.68179119797432]]], 
    'type': 'Polygon'}, 
    'id': 1, 
    'properties': {'cellId': 39}, 
    'style': {'opacity': 0.38888888888888884}, 
    'type': 'Feature'} 

そして、私はライン'style': {'opacity': 0.38888888888888884},に保存されている不透明度を持っているIDが1の多角形、およびによって異なる不透明度などを持っているために、ID 2を持つポリゴンを持ちたいですポリゴンはデフォルトで表示されますが、同じ不透明度で表示されます。私は現在試しています：

var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: {lat: 46.0840601, lng: 11.1428063} 
    }); 

    map.data.loadGeoJson(
     'trentino-grid.geojson'); 
    } 

    map.data.setStyle(function(feature) { //error here 
     var value = feature.getProperty('opacity'); 
     var opacity = value; 
     return { 
      fillOpacity: opacity, 
      strokeWeight: opacity 
     }; 
    }); 

しかし、これは動作しません。コメント付きの行にはエラー番号Cannot read property 'data' of undefinedが表示されます。エラーを取り除き、geoJSONのopacityに基づいて、これらのポリゴンすべてに独自の不透明度を持たせるにはどうすればよいですか？ありがとうございました！

Answer 1

あなたは間違った場所での不透明度を持っている、それがオブジェクト、それはプロパティであるべき性質にはオブジェクトではありません。

{ 
    'geometry': { 
    'coordinates': [ 
     [ 
     [10.927456267537572, 45.68179119797432], 
     [10.940290010697588, 45.68157387892596], 
     [10.939979018768243, 45.67257819153854], 
     [10.927147329501077, 45.672795442796335], 
     [10.927456267537572, 45.68179119797432] 
     ] 
    ], 
    'type': 'Polygon' 
    }, 
    'id': 1, 
    'properties': { 
    'cellId': 39, 
    'opacity': 0.1 
    }, 
    'type': 'Feature' 
}; 

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: { 
 
     lat: 45.681, 
 
     lng: 10.927 
 
    } 
 
    }); 
 

 
    map.data.addGeoJson(geoJson); 
 
    map.data.setStyle(function(feature) { //error here 
 
    var value = feature.getProperty('opacity'); 
 
    var opacity = value; 
 
    return { 
 
     fillOpacity: opacity, 
 
     fillColor: "#00FF00", 
 
     strokeColor: '#00FF00', 
 
     strokeWeight: 1, 
 
     strokeOpacity: opacity 
 
    }; 
 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('btn'), "click", function(evt) { 
 
    geoJson.properties.opacity = parseFloat(document.getElementById('opacity').value); 
 
    map.data.addGeoJson(geoJson); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
var geoJson = { 
 
    'geometry': { 
 
    'coordinates': [ 
 
     [ 
 
     [10.927456267537572, 45.68179119797432], 
 
     [10.940290010697588, 45.68157387892596], 
 
     [10.939979018768243, 45.67257819153854], 
 
     [10.927147329501077, 45.672795442796335], 
 
     [10.927456267537572, 45.68179119797432] 
 
     ] 
 
    ], 
 
    'type': 'Polygon' 
 
    }, 
 
    'id': 1, 
 
    'properties': { 
 
    'cellId': 39, 
 
    'opacity': 0.1 
 
    }, 
 
    'type': 'Feature' 
 
};

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="opacity" value="0.8" /> 
 
<input type="button" id="btn" value="set Opacity" /> 
 
<div id="map"></div>