Google Maps API - 從geoJSON獲取多邊形的不透明度

-1

我試圖製作具有很多多邊形（11 000）的地圖，並且我希望每個多邊形具有相同的顏色，但具有不同的不透明度。不透明度/多邊形存儲這樣的：Google Maps API - 從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}, 
    'style': {'opacity': 0.38888888888888884}, 
    'type': 'Feature'}

而且我希望有ID爲1多邊形有存儲在線'style': {'opacity': 0.38888888888888884},透明度，並與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所有這些多邊形都有自己的不透明度？謝謝！

來源

2016-11-15 lte__

適合我。 [小提琴]（http://jsfiddle.net/geocodezip/a9hpgjpL/1/）。僅供參考，strokeWeight是「以像素爲單位的筆畫寬度」，我會建議使用整數。 – geocodezip

我真的沒有工作...嘗試改變不透明度，它保持不變。此外，如果我添加更多的多邊形，它們的所有不透明度也保持不變。 –

錯過了你在不正確的地方有不透明的地方，它不在'屬性'對象中。 [更新的小提琴]（http://jsfiddle.net/geocodezip/a9hpgjpL/2/） – geocodezip

你在錯誤的地方不透明性，它不是對象的屬性，它應該是在對象的屬性：

{ 
    '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>

來源

2016-11-16 00:32:56 geocodezip

Google Maps API - 從geoJSON獲取多邊形的不透明度

回答

相關問題