从GeoJSON渲染多边形和多边形和/或以不同的填充颜色,标签等动态渲染多边形和多边形

时间:2014-12-24 17:41:58

标签: google-maps google-maps-api-3 geojson

我正在尝试渲染具有不同填充颜色的多边形但是来自geoJson,并且在动态渲染之后也开放这样做。我真的希望看到这两种方法。

我当前的代码在geojson中设置了颜色,但它只是渲染为默认值(黑色)。

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    var x=new google.maps.LatLng(40.75597,-73.974228);


    function initialize()
    {


        var data = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        "fillColor": "blue"
                    },
                    "geometry": {"type":"Polygon","coordinates":[[[-73.98779153823898,40.718233223261],[-74.004946447098,40.723575517498],[-74.006771211624,40.730592217474],[-73.99010896682698,40.746712376146],    [-73.973135948181,40.73974615047701],[-73.975120782852,40.736128627654],[-73.973997695541,40.730787341083],[-73.983317613602,40.716639396436],[-73.98779153823898,40.718233223261]]]}
                },
                {
                    "type": "Feature",
                    "properties": {
                        "fillColor": "red"
                    },
                    "geometry": {"type":"MultiPolygon","coordinates":[[[[-73.98779153823898,40.718233223261],[-73.987373113632,40.718062457927],[-73.986815214157,40.717785979789],[-73.989978364944,40.71747697345301],[-73.983317613602,40.716639396436],[-73.983081579208,40.717111043043],[-73.982888460159,40.717346865093],[-73.982352018356,40.718347066574],[-73.98201942443798,40.719119569628],[-73.981890678406,40.719477357478],[-73.981322050095,40.72055070949],[-73.981043100357,40.720941015022],[-73.98057103156998,40.721599650417],[-73.98014187812798,40.72217696744],[-73.979691267014,40.722803066157],[-73.978382349014,40.724600018078],[-73.977502584457,40.725795248823],[-73.97659063339198,40.727006719305],[-73.97616147994998,40.727673425196],[-73.975646495819,40.728340124407],[-73.973972797394,40.730657258741],[-73.973897695541,40.730787341083],[-73.973962068558,40.731080025424],[-73.974262475967,40.732242619953],[-73.974434137344,40.732811714764],[-73.975056409836,40.735128693386],[-73.975120782852,40.735746540724],[-73.975120782852,40.736128627654],[-73.975002765656,40.736648912711],[-73.974788188934,40.737039123833],[-73.973811864853,40.738453619965],[-73.973361253738,40.739128340284],[-73.973243236542,40.739429117016],[-73.973135948181,40.73974615047701],[-73.97337198257398,40.739884344077],[-73.97344708442698,40.739868086021],[-73.97357583046,40.739876215049],[-73.97401571273798,40.740095698439],[-73.97419810295098,40.740136343432],[-73.974477052689,40.74012821443501],[-73.975796699524,40.74070537072101],[-73.980302810669,40.742591254937],[-73.983424901962,40.74393247626],[-73.988628387451,40.746119015457],[-73.99010896682698,40.746712376146],[-73.99053812027,40.746143400247],[-73.99099946022,40.74549313611601],[-73.9923620224,40.74363984846],[-73.999196653366,40.741111815805],[-73.995484113693,40.739355955233],[-73.996857404709,40.737445591319],[-73.998284339905,40.735486395176],[-74.00009751319898,40.733014961731],[-74.000591039658,40.732291399699],[-74.000998735428,40.731771080565],[-74.001084566116,40.731641000145],[-74.001771211624,40.730592217474],[-74.00286555290198,40.72847021127901],[-74.003208875656,40.727705947263],[-74.00350928306598,40.727006719305],[-74.004056453705,40.725600110575],[-74.00466799736,40.724160948332],[-74.00488257408098,40.723705613684],[-74.004946947098,40.723575517498],[-74.003230333328,40.72327466909401],[-74.003080129623,40.723266538038],[-74.002522230148,40.723030736958],[-73.99914264679,40.721380106009],[-73.998337984085,40.721022328386],[-73.997876644135,40.721526469028],[-73.997340202332,40.72134758085],[-73.994904756546,40.72053444671],[-73.99302721023598,40.719867669303],[-73.990634679794,40.719127701191],[-73.98779153823898,40.718233223261]]]]}
                }
            ]
        };

        var mapProp = {
            center: new google.maps.LatLng(40.75597, -73.974228),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        map.data.addGeoJson(data);


    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:9)

根据documentation on styling,这是您设置GeoJSON数据样式的方式:

map.data.setStyle(function (feature) {
    var color = feature.getProperty('fillColor');
    return {
        fillColor: color,
        strokeWeight: 1
    };
});

working fiddle

有关动态样式,请参阅the example in the documentation 代码段:

&#13;
&#13;
var x = new google.maps.LatLng(40.75597, -73.974228);

function initialize() {
    var data = {
        "type": "FeatureCollection",
            "features": [{
            "type": "Feature",
                "properties": {
                "fillColor": "blue"
            },
                "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-73.98779153823898, 40.718233223261],
                        [-74.004946447098, 40.723575517498],
                        [-74.006771211624, 40.730592217474],
                        [-73.99010896682698, 40.746712376146],
                        [-73.973135948181, 40.73974615047701],
                        [-73.975120782852, 40.736128627654],
                        [-73.973997695541, 40.730787341083],
                        [-73.983317613602, 40.716639396436],
                        [-73.98779153823898, 40.718233223261]
                    ]
                ]
            }
        }, {
            "type": "Feature",
                "properties": {
                "fillColor": "red"
            },
                "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [-73.98779153823898, 40.718233223261],
                            [-73.987373113632, 40.718062457927],
                            [-73.986815214157, 40.717785979789],
                            [-73.989978364944, 40.71747697345301],
                            [-73.983317613602, 40.716639396436],
                            [-73.983081579208, 40.717111043043],
                            [-73.982888460159, 40.717346865093],
                            [-73.982352018356, 40.718347066574],
                            [-73.98201942443798, 40.719119569628],
                            [-73.981890678406, 40.719477357478],
                            [-73.981322050095, 40.72055070949],
                            [-73.981043100357, 40.720941015022],
                            [-73.98057103156998, 40.721599650417],
                            [-73.98014187812798, 40.72217696744],
                            [-73.979691267014, 40.722803066157],
                            [-73.978382349014, 40.724600018078],
                            [-73.977502584457, 40.725795248823],
                            [-73.97659063339198, 40.727006719305],
                            [-73.97616147994998, 40.727673425196],
                            [-73.975646495819, 40.728340124407],
                            [-73.973972797394, 40.730657258741],
                            [-73.973897695541, 40.730787341083],
                            [-73.973962068558, 40.731080025424],
                            [-73.974262475967, 40.732242619953],
                            [-73.974434137344, 40.732811714764],
                            [-73.975056409836, 40.735128693386],
                            [-73.975120782852, 40.735746540724],
                            [-73.975120782852, 40.736128627654],
                            [-73.975002765656, 40.736648912711],
                            [-73.974788188934, 40.737039123833],
                            [-73.973811864853, 40.738453619965],
                            [-73.973361253738, 40.739128340284],
                            [-73.973243236542, 40.739429117016],
                            [-73.973135948181, 40.73974615047701],
                            [-73.97337198257398, 40.739884344077],
                            [-73.97344708442698, 40.739868086021],
                            [-73.97357583046, 40.739876215049],
                            [-73.97401571273798, 40.740095698439],
                            [-73.97419810295098, 40.740136343432],
                            [-73.974477052689, 40.74012821443501],
                            [-73.975796699524, 40.74070537072101],
                            [-73.980302810669, 40.742591254937],
                            [-73.983424901962, 40.74393247626],
                            [-73.988628387451, 40.746119015457],
                            [-73.99010896682698, 40.746712376146],
                            [-73.99053812027, 40.746143400247],
                            [-73.99099946022, 40.74549313611601],
                            [-73.9923620224, 40.74363984846],
                            [-73.999196653366, 40.741111815805],
                            [-73.995484113693, 40.739355955233],
                            [-73.996857404709, 40.737445591319],
                            [-73.998284339905, 40.735486395176],
                            [-74.00009751319898, 40.733014961731],
                            [-74.000591039658, 40.732291399699],
                            [-74.000998735428, 40.731771080565],
                            [-74.001084566116, 40.731641000145],
                            [-74.001771211624, 40.730592217474],
                            [-74.00286555290198, 40.72847021127901],
                            [-74.003208875656, 40.727705947263],
                            [-74.00350928306598, 40.727006719305],
                            [-74.004056453705, 40.725600110575],
                            [-74.00466799736, 40.724160948332],
                            [-74.00488257408098, 40.723705613684],
                            [-74.004946947098, 40.723575517498],
                            [-74.003230333328, 40.72327466909401],
                            [-74.003080129623, 40.723266538038],
                            [-74.002522230148, 40.723030736958],
                            [-73.99914264679, 40.721380106009],
                            [-73.998337984085, 40.721022328386],
                            [-73.997876644135, 40.721526469028],
                            [-73.997340202332, 40.72134758085],
                            [-73.994904756546, 40.72053444671],
                            [-73.99302721023598, 40.719867669303],
                            [-73.990634679794, 40.719127701191],
                            [-73.98779153823898, 40.718233223261]
                        ]
                    ]
                ]
            }
        }]
    };

    var mapProp = {
        center: x,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    map.data.addGeoJson(data);
    map.data.setStyle(function (feature) {
        var color = feature.getProperty('fillColor');
        return {
            fillColor: color,
            strokeWeight: 1
        };
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
&#13;
html, body, #googleMap {
    width: 100%;
    height: 100%;
}
&#13;
<script src="https://maps.google.com/maps/api/js"></script>
<div id="googleMap"></div>
&#13;
&#13;
&#13;