Рендеринг полигонов и многополигонов из GeoJSON и/или динамически в разных цветах заливки, ярлыки Etc

Я пытаюсь отображать многоугольники с разными цветами заливки, но из geoJson, и я также открыт для этого после рендеринга динамически. Мне бы очень хотелось увидеть оба подхода.Рендеринг полигонов и многополигонов из GeoJSON и/или динамически в разных цветах заливки, ярлыки Etc

В моем текущем коде есть цвет, установленный в 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>

источник

2014-12-24 aruuuuu

Согласно 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 фрагмент кода:

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);

html, body, #googleMap { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://maps.google.com/maps/api/js"></script> 
 
<div id="googleMap"></div>

источник

2014-12-24 17:57:34 geocodezip

Эй, geocodezip, спасибо за ответ! Я совершенно новичок в javascript и хотел бы знать, какую IDE вы используете для разработки с помощью Google Maps api? Я хотел бы, чтобы функциональность была аналогична функциональности Intellij с завершением кода/возможностью запуска отладчика. – aruuuuu

Я не использую IDE, а только инструменты отладки, встроенные в различные браузеры. – geocodezip

Рендеринг полигонов и многополигонов из GeoJSON и/или динамически в разных цветах заливки, ярлыки Etc

ответ

Смежные вопросы