如何在多边形上打洞以在Google地图上以干净的颜色显示每个多边形? [英] How to make holes in polygons to display each one with clean colors on Google map?
本文介绍了如何在多边形上打洞以在Google地图上以干净的颜色显示每个多边形?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有4个重叠的多边形，我需要使用一些干净的颜色来区分它们，就像这样:
颜色干净且分离良好！
我的代码:
<！DOCTYPE html>< html>< head>< style>#地图 {高度:100％;}/*可选:使示例页面填充窗口.*/html，正文{高度:100％;边距:0;填充:0;}</style></head><身体>< div id ="map"></div>< script>var map;var GeoJson;函数initMap(){map = new google.maps.Map(document.getElementById('map')，{变焦:13中心:新的google.maps.LatLng(-8.044474，-34.884578)，});map.data.addGeoJson(mygeojson);map.data.setStyle(function(feature){var pvalue = feature.getProperty('value');如果(pvalue == 120){color ='蓝色';}如果(pvalue == 240){color ='#ff5050';}如果(pvalue == 480){color ='#ff9933';}如果(pvalue == 600){color ='黄色';}返回 {fillColor:颜色，重量:1}});}var mygeojson = {"type":"FeatureCollection"，"features":[{"type":"Feature"，"geometry":{"type":"Polygon"，"coordinates":[[[-34.915172，-8.049481]，[-34.914707，-8.055378]，[-34.91162，-8.060598]，[-34.910063，-8.061326]，[-34.90985，-8.061371]，[-34.90802，-8.060531]，[-34.905952，-8.056527]，[-34.903001，-8.050196]，[-34.902767，-8.04958]，[-34.902568，-8.045435]，[-34.902587，-8.045258]，[-34.906566，-8.041764]，[-34.908749，-8.0408]，[-34.908813，-8.040815]，[-34.909764，-8.041281]，[-34.90979，-8.041321]，[-34.915152，-8.049235]，[-34.915172，-8.049481]]]}，属性":{"group_index":0:值":120，中心":[-34.909916，-8.05]}}，{类型":功能"，几何形状":{类型":多边形"，坐标":[[[-34.929988，-8.047497]，[-34.926252，-8.054765]，[-34.924748，-8.062501]，[-34.917848，-8.067531]，[-34.910711，-8.074744]，[-34.907147，-8.074238]，[-34.902147，-8.067023]，[-34.898236，-8.064276]，[-34.896426，-8.063107]，[-34.895983，-8.062843]，[-34.896042，-8.062316]，[-34.895973，-8.051555]，[-34.893041，-8.048618]，[-34.891768，-8.04525]，[-34.891211，-8.043531]，[-34.891541，-8.042554]，[-34.891747，-8.042396]，[-34.892397，-8.041901]，[-34.893149，-8.041424]，[-34.895814，-8.039872]，[-34.902685，-8.032683]，[-34.904729，-8.031778]，[-34.906，-8.031939]，[-34.913661，-8.035535]，[-34.915638，-8.038325]，[-34.920721，-8.043953]，[-34.928257，-8.044341]，[-34.929209，-8.045448]，[-34.929379，-8.045746]，[-34.929988，-8.047497]]]}，属性":{"group_index":0，值":240，中心":[-34.909916，-8.05]}}，{"type":功能"，"geometry":{"type":多边形"，坐标":[[[-34.956063，-8.033059]，[-34.955041，-8.033829]，[-34.954587，-8.034079]，[-34.948183，-8.0401]，[-34.947163，-8.044392]，[-34.947272，-8.047986]，[-34.948019，-8.05595]，[-34.948103，-8.056254]，[-34.948084，-8.056901]，[-34.946187，-8.059355]，[-34.952109，-8.068439]，[-34.952839，-8.068665]，[-34.952829，-8.070174]，[-34.952796，-8.070289]，[-34.951771，-8.072104]，[-34.951041，-8.071877]，[-34.940532，-8.072531]，[-34.937183，-8.077114]，[-34.936484，-8.078185]，[-34.934712，-8.082695]，[-34.934542，-8.08374]，[-34.934408，-8.08414]，[-34.931548，-8.087205]，[-34.929387，-8.087655]，[-34.925758，-8.087245]，[-34.917409，-8.090498]，[-34.915368，-8.097388]，[-34.914401，-8.099923]，[-34.912478，-8.102227]，[-34.908953，-8.102959]，[-34.908757，-8.102013]，[-34.904896，-8.092322]，[-34.904582，-8.089398]，[-34.90457，-8.089352]，[-34.898932，-8.081687]，[-34.892253，-8.084787]，[-34.889729，-8.086645]，[-34.88728，-8.0867]，[-34.887252，-8.086673]，[-34.887112，-8.084173]，[-34.881451，-8.074375]，[-34.877403，-8.066542]，[-34.877357，-8.066449]，[-34.876976，-8.060774]，[-34.875231，-8.051236]，[-34.873014，-8.0484]，[-34.873907，-8.03785]，[-34.872542，-8.030814]，[-34.87267，-8.030475]，[-34.873901，-8.029557]，[-34.881458，-8.022556]，[-34.887505，-8.012962]，[-34.888584，-8.012166]，[-34.888918，-8.012105]，[-34.897461，-8.012019]，[-34.897505，-8.012052]，[-34.907112，-8.01783]，[-34.915999，-8.019938]，[-34.920063，-8.022551]，[-34.930189，-8.020902]，[-34.94101，-8.025031]，[-34.944608，-8.024917]，[-34.954314，-8.029913]，[-34.956063，-8.033059]]]}，"properties":{"group_index":0:"value:480，"center":[-34.909916，-8.05]}}，{"type":"Feature"，"geometry":{"type":"Polygon"，"coordinates":[[[-34.967875，-8.022124]，[-34.967032，-8.022491]，[-34.962219，-8.027052]，[-34.965092，-8.03679]，[-34.965569，-8.037422]，[-34.964933，-8.039161]，[-34.960129，-8.048242]，[-34.95918，-8.050267]，[-34.957693，-8.053731]，[-34.956616，-8.054331]，[-34.953751，-8.063539]，[-34.958475，-8.066552]，[-34.96713，-8.073047]，[-34.966185，-8.076521]，[-34.964619，-8.076095]，[-34.962336，-8.075392]，[-34.958578，-8.072295]，[-34.951771，-8.072104]，[-34.947239，-8.076907]，[-34.945128，-8.081491]，[-34.944516，-8.092605]，[-34.944491，-8.09299]，[-34.942463，-8.094713]，[-34.936203，-8.099609]，[-34.936156，-8.099611]，[-34.930332，-8.098121]，[-34.928104，-8.097671]，[-34.926769，-8.097602]，[-34.919303，-8.105374]，[-34.920486，-8.107928]，[-34.921611，-8.110473]，[-34.921267，-8.11224]，[-34.921107，-8.112423]，[-34.921099，-8.112432]，[-34.920937，-8.112614]，[-34.915398，-8.116855]，[-34.914727，-8.117221]，[-34.911887，-8.117649]，[-34.904949，-8.112587]，[-34.904891，-8.112337]，[-34.905136，-8.111096]，[-34.905752，-8.109837]，[-34.906527，-8.105314]，[-34.906546，-8.105024]，[-34.90736，-8.102336]，[-34.907636，-8.101151]，[-34.907492]-8.097309]，[-34.904896，-8.092322]，[-34.895762，-8.09403]，[-34.892507，-8.099182]，[-34.892333，-8.099679]，[-34.888095，-8.101449]，[-34.887966，-8.101505]]，[-34.885749，-8.101456]，[-34.883164，-8.096974]，[-34.879828，-8.088927]，[-34.879867，-8.088719]，[-34.880591，-8.087133]，[-34.881121，-8.086439]，[-34.880567，-8.074973]，[-34.874867，-8.072386]，[-34.870276，-8.064982]，[-34.870159，-8.064823]，[-34.869519，-8.056238]，[-34.868117，-8.04922]，[-34.869572，-8.042614]，[-34.863881，-8.032346]，[-34.862718，-8.03064]，[-34.864656，-8.026769]，[-34.865011，-8.026182]，[-34.871422，-8.017997]，[-34.872082，-8.015905]，[-34.872426，-8.015001]，[-34.872539，-8.014982]，[-34.873295，-8.014922]，[-34.881793，-8.006885]，[-34.881807，-8.004915]，[-34.883463，-8.002759]，[-34.883552，-8.002686]，[-34.884165，-8.002354]，[-34.889202，-8.000715]，[-34.89597，-8.002288]，[-34.896938，-8.002808]，[-34.899093，-8.004078]，[-34.904905，-8.009364]，[-34.914814，-8.009358]，[-34.920314，-8.010243]，[-34.92932，-8.014936]，[-34.940385，-8.012928]，[-34.943945，-8.0141]，[-34.944，-8.017238]，[-34.955462，-8.018325]，[-34.966437，-8.018824]，[-34.96753，-8.019999]，[-34.967655，-8.020305]，[-34.967875，-8.022124]]]}，"properties":{"group_index":0，"value":600，"center":[-34.909916，-8.05]}}]，"bbox":[-34.967875，-8.117649,0,0]，"info":{"engine":{"version":"4.7.0"，"build_date":"2018-10-31T12:15:39Z"}，"service":"isochrones"，"query":{"ranges":"120.0,240.0,480.0,600.0"，"profile":驾车"，位置":[[-34.909916，-8.05]]，"range_type":时间"，"location_type":"start"}，归因":"openrouteservice.org |OpenStreetMap贡献者，"时间戳:1544700367108}};</script><脚本异步延迟src ="https://maps.googleapis.com/maps/api/js&libraries=geometry&callback=initMap"></script></body></html> 结果:颜色叠加并且结果看起来难看:
有什么方法可以用纯色填充每个多边形的可见部分?
解决方案
您需要在多边形中打孔.有两种选择:
- 编辑您的GeoJSON以将下一个最小的多边形添加为每个多边形中的孔
- 编写代码以通过输入GeoJSON在多边形中创建带孔的
编辑的GeoJSON:
var mygeojson = {"type":"FeatureCollection"，特征": [{"type":功能"，几何学": {"type":多边形"，"coordinates":[//最里面的多边形[[-34.915172，-8.049481]，[-34.914707，-8.055378]，[-34.91162，-8.060598]，[-34.910063，-8.061326]，[-34.90985，-8.061371]，[-34.90802，-8.060531]，[-34.905952，-8.056527]，[-34.903001，-8.050196]，[-34.902767，-8.04958]，[-34.902568，-8.045435]，[-34.902587，-8.045258]，[-34.906566，-8.041764]，[-34.908749，-8.0408]，[-34.908813，-8.040815]，[-34.909764，-8.041281]，[-34.90979，-8.041321]，[-34.915152，-8.049235]，[-34.915172，-8.049481]]]}，特性": {"group_index":0，值":120，中心":[-34.909916，-8.05]}}，{"type":功能"，几何学": {"type":多边形"，坐标":[[[-34.929988，-8.047497]，[-34.926252，-8.054765]，[-34.924748，-8.062501]，[-34.917848，-8.067531]，[-34.910711，-8.074744]，[-34.907147，-8.074238]，[-34.902147，-8.067023]，[-34.898236，-8.064276]，[-34.896426，-8.063107]，[-34.895983，-8.062843]，[-34.896042，-8.062316]，[-34.895973，-8.051555]，[-34.893041，-8.048618]，[-34.891768，-8.04525]，[-34.891211，-8.043531]，[-34.891541，-8.042554]，[-34.891747，-8.042396]，[-34.892397，-8.041901]，[-34.893149，-8.041424]，[-34.895814，-8.039872]，[-34.902685，-8.032683]，[-34.904729，-8.031778]，[-34.906，-8.031939]，[-34.913661，-8.035535]，[-34.915638，-8.038325]，[-34.920721，-8.043953]，[-34.928257，-8.044341]，[-34.929209，-8.045448]，[-34.929379，-8.045746]，[-34.929988，-8.047497]]，[//最里面的多边形，下一级多边形内的孔[-34.915172，-8.049481]，[-34.914707，-8.055378]，[-34.91162，-8.060598]，[-34.910063，-8.061326]，[-34.90985，-8.061371]，[-34.90802，-8.060531]，[-34.905952，-8.056527]，[-34.903001，-8.050196]，[-34.902767，-8.04958]，[-34.902568，-8.045435]，[-34.902587，-8.045258]，[-34.906566，-8.041764]，[-34.908749，-8.0408]，[-34.908813，-8.040815]，[-34.909764，-8.041281]，[-34.90979，-8.041321]，[-34.915152，-8.049235]，[-34.915172，-8.049481]]]}，特性": {"group_index":0，值":240，中心":[-34.909916，-8.05]}}，{"type":功能"，几何学": {"type":多边形"，坐标":[[[-34.956063，-8.033059]，[-34.955041，-8.033829]，[-34.954587，-8.034079]，[-34.948183，-8.0401]，[-34.947163，-8.044392]，[-34.947272，-8.047986]，[-34.948019，-8.05595]，[-34.948103，-8.056254]，[-34.948084，-8.056901]，[-34.946187，-8.059355]，[-34.952109，-8.068439]，[-34.952839，-8.068665]，[-34.952829，-8.070174]，[-34.952796，-8.070289]，[-34.951771，-8.072104]，[-34.951041，-8.071877]，[-34.940532，-8.072531]，[-34.937183，-8.077114]，[-34.936484，-8.078185]，[-34.934712，-8.082695]，[-34.934542，-8.08374]，[-34.934408，-8.08414]，[-34.931548，-8.087205]，[-34.929387，-8.087655]，[-34.925758，-8.087245]，[-34.917409，-8.090498]，[-34.915368，-8.097388]，[-34.914401，-8.099923]，[-34.912478，-8.102227]，[-34.908953，-8.102959]，[-34.908757，-8.102013]，[-34.904896，-8.092322]，[-34.904582，-8.089398]，[-34.90457，-8.089352]，[-34.898932，-8.081687]，[-34.892253，-8.084787]，[-34.889729，-8.086645]，[-34.88728，-8.0867]，[-34.887252，-8.086673]，[-34.887112，-8.084173]，[-34.881451，-8.074375]，[-34.877403，-8.066542]，[-34.877357，-8.066449]，[-34.876976，-8.060774]，[-34.875231，-8.051236]，[-34.873014，-8.0484]，[-34.873907，-8.03785]，[-34.872542，-8.030814]，[-34.87267，-8.030475]，[-34.873901，-8.029557]，[-34.881458，-8.022556]，[-34.887505，-8.012962]，[-34.888584，-8.012166]，[-34.888918，-8.012105]，[-34.897461，-8.012019]，[-34.897505，-8.012052]，[-34.907112，-8.01783]，[-34.915999，-8.019938]，[-34.920063，-8.022551]，[-34.930189，-8.020902]，[-34.94101，-8.025031]，[-34.944608，-8.024917]，[-34.954314，-8.029913]，[-34.956063，-8.033059]]，[[-34.929988，-8.047497]，[-34.926252，-8.054765]，[-34.924748，-8.062501]，[-34.917848，-8.067531]，[-34.910711，-8.074744]，[-34.907147，-8.074238]，[-34.902147，-8.067023]，[-34.898236，-8.064276]，[-34.896426，-8.063107]，[-34.895983，-8.062843]，[-34.896042，-8.062316]，[-34.895973，-8.051555]，[-34.893041，-8.048618]，[-34.891768，-8.04525]，[-34.891211，-8.043531]，[-34.891541，-8.042554]，[-34.891747，-8.042396]，[-34.892397，-8.041901]，[-34.893149，-8.041424]，[-34.895814，-8.039872]，[-34.902685，-8.032683]，[-34.904729，-8.031778]，[-34.906，-8.031939]，[-34.913661，-8.035535]，[-34.915638，-8.038325]，[-34.920721，-8.043953]，[-34.928257，-8.044341]，[-34.929209，-8.045448]，[-34.929379，-8.045746]，[-34.929988，-8.047497]]]}，特性": {"group_index":0，值":480，中心":[-34.909916，-8.05]}}，{"type":功能"，几何学": {"type":多边形"，坐标":[[[-34.967875，-8.022124]，[-34.967032，-8.022491]，[-34.962219，-8.027052]，[-34.965092，-8.03679]，[-34.965569，-8.037422]，[-34.964933，-8.039161]，[-34.960129，-8.048242]，[-34.95918，-8.050267]，[-34.957693，-8.053731]，[-34.956616，-8.054331]，[-34.953751，-8.063539]，[-34.958475，-8.066552]，[-34.96713，-8.073047]，[-34.966185，-8.076521]，[-34.964619，-8.076095]，[-34.962336，-8.075392]，[-34.958578，-8.072295]，[-34.951771，-8.072104]，[-34.947239，-8.076907]，[-34.945128，-8.081491]，[-34.944516，-8.092605]，[-34.944491，-8.09299]，[-34.942463，-8.094713]，[-34.936203，-8.099609]，[-34.936156，-8.099611]，[-34.930332，-8.098121]，[-34.928104，-8.097671]，[-34.926769，-8.097602]，[-34.919303，-8.105374]，[-34.920486，-8.107928]，[-34.921611，-8.110473]，[-34.921267，-8.11224]，[-34.921107，-8.112423]，[-34.921099，-8.112432]，[-34.920937，-8.112614]，[-34.915398，-8.116855]，[-34.914727，-8.117221]，[-34.911887，-8.117649]，[-34.904949，-8.112587]，[-34.904891，-8.112337]，[-34.905136，-8.111096]，[-34.905752，-8.109837]，[-34.906527，-8.105314]，[-34.906546，-8.105024]，[-34.90736，-8.102336]，[-34.907636，-8.101151]，[-34.907492，-8.097309]，[-34.904896，-8.092322]，[-34.895762，-8.09403]，[-34.892507，-8.099182]，[-34.892333，-8.099679]，[-34.888095，-8.101449]，[-34.887966，-8.101505]，[-34.885749，-8.101456]，[-34.883164，-8.096974]，[-34.879828，-8.088927]，[-34.879867，-8.088719]，[-34.880591，-8.087133]，[-34.881121，-8.086439]，[-34.880567，-8.074973]，[-34.874867，-8.072386]，[-34.870276，-8.064982]，[-34.870159，-8.064823]，[-34.869519，-8.056238]，[-34.868117，-8.04922]，[-34.869572，-8.042614]，[-34.863881，-8.032346]，[-34.862718，-8.03064]，[-34.864656，-8.026769]，[-34.865011，-8.026182]，[-34.871422，-8.017997]，[-34.872082，-8.015905]，[-34.872426，-8.015001]，[-34.872539，-8.014982]，[-34.873295，-8.014922]，[-34.881793，-8.006885]，[-34.881807，-8.004915]，[-34.883463，-8.002759]，[-34.883552，-8.002686]，[-34.884165，-8.002354]，[-34.889202，-8.000715]，[-34.89597，-8.002288]，[-34.896938，-8.002808]，[-34.899093，-8.004078]，[-34.904905，-8.009364]，[-34.914814，-8.009358]，[-34.920314，-8.010243]，[-34.92932，-8.014936]，[-34.940385，-8.012928]，[-34.943945，-8.0141]，[-34.944，-8.017238]，[-34.955462，-8.018325]，[-34.966437，-8.018824]，[-34.96753，-8.019999]，[-34.967655，-8.020305]，[-34.967875，-8.022124]]，[[-34.956063，-8.033059]，[-34.955041，-8.033829]，[-34.954587，-8.034079]，[-34.948183，-8.0401]，[-34.947163，-8.044392]，[-34.947272，-8.047986]，[-34.948019，-8.05595]，[-34.948103，-8.056254]，[-34.948084，-8.056901]，[-34.946187，-8.059355]，[-34.952109，-8.068439]，[-34.952839，-8.068665]，[-34.952829，-8.070174]，[-34.952796，-8.070289]，[-34.951771，-8.072104]，[-34.951041，-8.071877]，[-34.940532，-8.072531]，[-34.937183，-8.077114]，[-34.936484，-8.078185]，[-34.934712，-8.082695]，[-34.934542，-8.08374]，[-34.934408，-8.08414]，[-34.931548，-8.087205]，[-34.929387，-8.087655]，[-34.925758，-8.087245]，[-34.917409，-8.090498]，[-34.915368，-8.097388]，[-34.914401，-8.099923]，[-34.912478，-8.102227]，[-34.908953，-8.102959]，[-34.908757，-8.102013]，[-34.904896，-8.092322]，[-34.904582，-8.089398]，[-34.90457，-8.089352]，[-34.898932，-8.081687]，[-34.892253，-8.084787]，[-34.889729，-8.086645]，[-34.88728，-8.0867]，[-34.887252，-8.086673]，[-34.887112，-8.084173]，[-34.881451，-8.074375]，[-34.877403，-8.066542]，[-34.877357，-8.066449]，[-34.876976，-8.060774]，[-34.875231，-8.051236]，[-34.873014，-8.0484]，[-34.873907，-8.03785]，[-34.872542，-8.030814]，[-34.87267，-8.030475]，[-34.873901，-8.029557]，[-34.881458，-8.022556]，[-34.887505，-8.012962]，[-34.888584，-8.012166]，[-34.888918，-8.012105]，[-34.897461，-8.012019]，[-34.897505，-8.012052]，[-34.907112，-8.01783]，[-34.915999，-8.019938]，[-34.920063，-8.022551]，[-34.930189，-8.020902]，[-34.94101，-8.025031]，[-34.944608，-8.024917]，[-34.954314，-8.029913]，[-34.956063，-8.033059]]]}，特性": {"group_index":0，值":600，中心":[-34.909916，-8.05]}}]，"bbox":[-34.967875，-8.117649，0，0]，信息":{引擎": {"version":"4.7.0"，"build_date":"2018-10-31T12:15:39Z"}，"service":"isochrones"，询问": {"ranges":"120.0,240.0,480.0,600.0"，"profile":驾驶汽车"，位置":[[-34.909916，-8.05]]，"range_type":时间"，"location_type":开始"}，"attribution":"openrouteservice.org | OpenStreetMap贡献者"，时间戳记":1544700367108}};
代码段:(已移除最外面的多边形，因此可以容纳答案
var map;var GeoJson;函数initMap(){map = new google.maps.Map(document.getElementById('map')，{变焦:13中心:新的google.maps.LatLng(-8.044474，-34.884578)，});map.data.addGeoJson(mygeojson);map.data.setStyle(function(feature){var pvalue = feature.getProperty('value');如果(pvalue == 120){color ='蓝色';}如果(pvalue == 240){color ='#ff5050';}如果(pvalue == 480){color ='#ff9933';}如果(pvalue == 600){color ='黄色';}返回 {fillColor:颜色，重量:1}});}var mygeojson = {"type":"FeatureCollection"，特征": [{"type":功能"，几何学": {"type":多边形"，坐标":[[[-34.915172，-8.049481]，[-34.914707，-8.055378]，[-34.91162，-8.060598]，[-34.910063，-8.061326]，[-34.90985，-8.061371]，[-34.90802，-8.060531]，[-34.905952，-8.056527]，[-34.903001，-8.050196]，[-34.902767，-8.04958]，[-34.902568，-8.045435]，[-34.902587，-8.045258]，[-34.906566，-8.041764]，[-34.908749，-8.0408]，[-34.908813，-8.040815]，[-34.909764，-8.041281]，[-34.90979，-8.041321]，[-34.915152，-8.049235]，[-34.915172，-8.049481]]]}，特性": {"group_index":0，值":120，中心":[-34.909916，-8.05]}}，{"type":功能"，几何学": {"type":多边形"，坐标":[[[-34.929988，-8.047497]，[-34.926252，-8.054765]，[-34.924748，-8.062501]，[-34.917848，-8.067531]，[-34.910711，-8.074744]，[-34.907147，-8.074238]，[-34.902147，-8.067023]，[-34.898236，-8.064276]，[-34.896426，-8.063107]，[-34.895983，-8.062843]，[-34.896042，-8.062316]，[-34.895973，-8.051555]，[-34.893041，-8.048618]，[-34.891768，-8.04525]，[-34.891211，-8.043531]，[-34.891541，-8.042554]，[-34.891747，-8.042396]，[-34.892397，-8.041901]，[-34.893149，-8.041424]，[-34.895814，-8.039872]，[-34.902685，-8.032683]，[-34.904729，-8.031778]，[-34.906，-8.031939]，[-34.913661，-8.035535]，[-34.915638，-8.038325]，[-34.920721，-8.043953]，[-34.928257，-8.044341]，[-34.929209，-8.045448]，[-34.929379，-8.045746]，[-34.929988，-8.047497]]，[[-34.915172，-8.049481]，[-34.914707，-8.055378]，[-34.91162，-8.060598]，[-34.910063，-8.061326]，[-34.90985，-8.061371]，[-34.90802，-8.060531]，[-34.905952，-8.056527]，[-34.903001，-8.050196]，[-34.902767，-8.04958]，[-34.902568，-8.045435]，[-34.902587，-8.045258]，[-34.906566，-8.041764]，[-34.908749，-8.0408]，[-34.908813，-8.040815]，[-34.909764，-8.041281]，[-34.90979，-8.041321]，[-34.915152，-8.049235]，[-34.915172，-8.049481]]]}，特性": {"group_index":0，值":240，中心":[-34.909916，-8.05]}}，{"type":功能"，几何学": {"type":多边形"，坐标":[[[-34.956063，-8.033059]，[-34.955041，-8.033829]，[-34.954587，-8.034079]，[-34.948183，-8.0401]，[-34.947163，-8.044392]，[-34.947272，-8.047986]，[-34.948019，-8.05595]，[-34.948103，-8.056254]，[-34.948084，-8.056901]，[-34.946187，-8.059355]，[-34.952109，-8.068439]，[-34.952839，-8.068665]，[-34.952829，-8.070174]，[-34.952796，-8.070289]，[-34.951771，-8.072104]，[-34.951041，-8.071877]，[-34.940532，-8.072531]，[-34.937183，-8.077114]，[-34.936484，-8.078185]，[-34.934712，-8.082695]，[-34.934542，-8.08374]，[-34.934408，-8.08414]，[-34.931548，-8.087205]，[-34.929387，-8.087655]，[-34.925758，-8.087245]，[-34.917409，-8.090498]，[-34.915368，-8.097388]，[-34.914401，-8.099923]，[-34.912478，-8.102227]，[-34.908953，-8.102959]，[-34.908757，-8.102013]，[-34.904896，-8.092322]，[-34.904582，-8.089398]，[-34.90457，-8.089352]，[-34.898932，-8.081687]，[-34.892253，-8.084787]，[-34.889729，-8.086645]，[-34.88728，-8.0867]，[-34.887252，-8.086673]，[-34.887112，-8.084173]，[-34.881451，-8.074375]，[-34.877403，-8.066542]，[-34.877357，-8.066449]，[-34.876976，-8.060774]，[-34.875231，-8.051236]，[-34.873014，-8.0484]，[-34.873907，-8.03785]，[-34.872542，-8.030814]，[-34.87267，-8.030475]，[-34.873901，-8.029557]，[-34.881458，-8.022556]，[-34.887505，-8.012962]，[-34.888584，-8.012166]，[-34.888918，-8.012105]，[-34.897461，-8.012019]，[-34.897505，-8.012052]，[-34.907112，-8.01783]，[-34.915999，-8.019938]，[-34.920063，-8.022551]，[-34.930189，-8.020902]，[-34.94101，-8.025031]，[-34.944608，-8.024917]，[-34.954314，-8.029913]，[-34.956063，-8.033059]]，[[-34.929988，-8.047497]，[-34.926252，-8.054765]，[-34.924748，-8.062501]，[-34.917848，-8.067531]，[-34.910711，-8.074744]，[-34.907147，-8.074238]，[-34.902147，-8.067023]，[-34.898236，-8.064276]，[-34.896426，-8.063107]，[-34.895983，-8.062843]，[-34.896042，-8.062316]，[-34.895973，-8.051555]，[-34.893041，-8.048618]，[-34.891768，-8.04525]，[-34.891211，-8.043531]，[-34.891541，-8.042554]，[-34.891747，-8.042396]，[-34.892397，-8.041901]，[-34.893149，-8.041424]，[-34.895814，-8.039872]，[-34.902685，-8.032683]，[-34.904729，-8.031778]，[-34.906，-8.031939]，[-34.913661，-8.035535]，[-34.915638，-8.038325]，[-34.920721，-8.043953]，[-34.928257，-8.044341]，[-34.929209，-8.045448]，[-34.929379，-8.045746]，[-34.929988，-8.047497]]]}，特性": {"group_index":0，值":480，中心":[-34.909916，-8.05]}}//删除最外面的多边形，使其适合答案]，"bbox":[-34.967875，-8.117649，0，0]，信息":{引擎": {"version":"4.7.0"，"build_date":"2018-10-31T12:15:39Z"}，"service":"isochrones"，询问": {"ranges":"120.0,240.0,480.0,600.0"，"profile":驾驶汽车"，位置":[[-34.909916，-8.05]]，"range_type":时间"，"location_type":开始"}，"attribution":"openrouteservice.org | OpenStreetMap贡献者"，时间戳记":1544700367108}}; #map {高度:100％;}html，身体 {高度:100％;边距:0;填充:0;} < div id ="map"></div><！-用您自己的API密钥替换key参数的值.->< script src ="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"异步延迟></script> I have 4 superposed polygons and I need to have some clean colors to diferenciate them, like this :
The colors are clean and well separated !
My code :
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var GeoJson;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(-8.044474,-34.884578),
});
map.data.addGeoJson(mygeojson);
map.data.setStyle(function(feature) {
var pvalue = feature.getProperty('value');
if (pvalue == 120) {
color = 'Blue';
}
if (pvalue == 240) {
color = '#ff5050';
}
if (pvalue == 480) {
color = '#ff9933';
}
if (pvalue == 600) {
color = 'yellow';
}
return {
fillColor: color,
strokeWeight: 1
}
});
}
var mygeojson = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.915172,-8.049481],[-34.914707,-8.055378],[-34.91162,-8.060598],[-34.910063,-8.061326],[-34.90985,-8.061371],[-34.90802,-8.060531],[-34.905952,-8.056527],[-34.903001,-8.050196],[-34.902767,-8.04958],[-34.902568,-8.045435],[-34.902587,-8.045258],[-34.906566,-8.041764],[-34.908749,-8.0408],[-34.908813,-8.040815],[-34.909764,-8.041281],[-34.90979,-8.041321],[-34.915152,-8.049235],[-34.915172,-8.049481]]]},"properties":{"group_index":0,"value":120,"center":[-34.909916,-8.05]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.929988,-8.047497],[-34.926252,-8.054765],[-34.924748,-8.062501],[-34.917848,-8.067531],[-34.910711,-8.074744],[-34.907147,-8.074238],[-34.902147,-8.067023],[-34.898236,-8.064276],[-34.896426,-8.063107],[-34.895983,-8.062843],[-34.896042,-8.062316],[-34.895973,-8.051555],[-34.893041,-8.048618],[-34.891768,-8.04525],[-34.891211,-8.043531],[-34.891541,-8.042554],[-34.891747,-8.042396],[-34.892397,-8.041901],[-34.893149,-8.041424],[-34.895814,-8.039872],[-34.902685,-8.032683],[-34.904729,-8.031778],[-34.906,-8.031939],[-34.913661,-8.035535],[-34.915638,-8.038325],[-34.920721,-8.043953],[-34.928257,-8.044341],[-34.929209,-8.045448],[-34.929379,-8.045746],[-34.929988,-8.047497]]]},"properties":{"group_index":0,"value":240,"center":[-34.909916,-8.05]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.956063,-8.033059],[-34.955041,-8.033829],[-34.954587,-8.034079],[-34.948183,-8.0401],[-34.947163,-8.044392],[-34.947272,-8.047986],[-34.948019,-8.05595],[-34.948103,-8.056254],[-34.948084,-8.056901],[-34.946187,-8.059355],[-34.952109,-8.068439],[-34.952839,-8.068665],[-34.952829,-8.070174],[-34.952796,-8.070289],[-34.951771,-8.072104],[-34.951041,-8.071877],[-34.940532,-8.072531],[-34.937183,-8.077114],[-34.936484,-8.078185],[-34.934712,-8.082695],[-34.934542,-8.08374],[-34.934408,-8.08414],[-34.931548,-8.087205],[-34.929387,-8.087655],[-34.925758,-8.087245],[-34.917409,-8.090498],[-34.915368,-8.097388],[-34.914401,-8.099923],[-34.912478,-8.102227],[-34.908953,-8.102959],[-34.908757,-8.102013],[-34.904896,-8.092322],[-34.904582,-8.089398],[-34.90457,-8.089352],[-34.898932,-8.081687],[-34.892253,-8.084787],[-34.889729,-8.086645],[-34.88728,-8.0867],[-34.887252,-8.086673],[-34.887112,-8.084173],[-34.881451,-8.074375],[-34.877403,-8.066542],[-34.877357,-8.066449],[-34.876976,-8.060774],[-34.875231,-8.051236],[-34.873014,-8.0484],[-34.873907,-8.03785],[-34.872542,-8.030814],[-34.87267,-8.030475],[-34.873901,-8.029557],[-34.881458,-8.022556],[-34.887505,-8.012962],[-34.888584,-8.012166],[-34.888918,-8.012105],[-34.897461,-8.012019],[-34.897505,-8.012052],[-34.907112,-8.01783],[-34.915999,-8.019938],[-34.920063,-8.022551],[-34.930189,-8.020902],[-34.94101,-8.025031],[-34.944608,-8.024917],[-34.954314,-8.029913],[-34.956063,-8.033059]]]},"properties":{"group_index":0,"value":480,"center":[-34.909916,-8.05]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.967875,-8.022124],[-34.967032,-8.022491],[-34.962219,-8.027052],[-34.965092,-8.03679],[-34.965569,-8.037422],[-34.964933,-8.039161],[-34.960129,-8.048242],[-34.95918,-8.050267],[-34.957693,-8.053731],[-34.956616,-8.054331],[-34.953751,-8.063539],[-34.958475,-8.066552],[-34.96713,-8.073047],[-34.966185,-8.076521],[-34.964619,-8.076095],[-34.962336,-8.075392],[-34.958578,-8.072295],[-34.951771,-8.072104],[-34.947239,-8.076907],[-34.945128,-8.081491],[-34.944516,-8.092605],[-34.944491,-8.09299],[-34.942463,-8.094713],[-34.936203,-8.099609],[-34.936156,-8.099611],[-34.930332,-8.098121],[-34.928104,-8.097671],[-34.926769,-8.097602],[-34.919303,-8.105374],[-34.920486,-8.107928],[-34.921611,-8.110473],[-34.921267,-8.11224],[-34.921107,-8.112423],[-34.921099,-8.112432],[-34.920937,-8.112614],[-34.915398,-8.116855],[-34.914727,-8.117221],[-34.911887,-8.117649],[-34.904949,-8.112587],[-34.904891,-8.112337],[-34.905136,-8.111096],[-34.905752,-8.109837],[-34.906527,-8.105314],[-34.906546,-8.105024],[-34.90736,-8.102336],[-34.907636,-8.101151],[-34.907492,-8.097309],[-34.904896,-8.092322],[-34.895762,-8.09403],[-34.892507,-8.099182],[-34.892333,-8.099679],[-34.888095,-8.101449],[-34.887966,-8.101505],[-34.885749,-8.101456],[-34.883164,-8.096974],[-34.879828,-8.088927],[-34.879867,-8.088719],[-34.880591,-8.087133],[-34.881121,-8.086439],[-34.880567,-8.074973],[-34.874867,-8.072386],[-34.870276,-8.064982],[-34.870159,-8.064823],[-34.869519,-8.056238],[-34.868117,-8.04922],[-34.869572,-8.042614],[-34.863881,-8.032346],[-34.862718,-8.03064],[-34.864656,-8.026769],[-34.865011,-8.026182],[-34.871422,-8.017997],[-34.872082,-8.015905],[-34.872426,-8.015001],[-34.872539,-8.014982],[-34.873295,-8.014922],[-34.881793,-8.006885],[-34.881807,-8.004915],[-34.883463,-8.002759],[-34.883552,-8.002686],[-34.884165,-8.002354],[-34.889202,-8.000715],[-34.89597,-8.002288],[-34.896938,-8.002808],[-34.899093,-8.004078],[-34.904905,-8.009364],[-34.914814,-8.009358],[-34.920314,-8.010243],[-34.92932,-8.014936],[-34.940385,-8.012928],[-34.943945,-8.0141],[-34.944,-8.017238],[-34.955462,-8.018325],[-34.966437,-8.018824],[-34.96753,-8.019999],[-34.967655,-8.020305],[-34.967875,-8.022124]]]},"properties":{"group_index":0,"value":600,"center":[-34.909916,-8.05]}}],"bbox":[-34.967875,-8.117649,0,0],"info":{"engine":{"version":"4.7.0","build_date":"2018-10-31T12:15:39Z"},"service":"isochrones","query":{"ranges":"120.0,240.0,480.0,600.0","profile":"driving-car","locations":[[-34.909916,-8.05]],"range_type":"time","location_type":"start"},"attribution":"openrouteservice.org | OpenStreetMap contributors","timestamp":1544700367108}};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js&libraries=geometry&callback=initMap">
</script>
</body>
</html>
Result : The colors are superposed and the result look ugly :
Any solution to just fill the visible part of each polygon with pure colors?
解决方案
You need to make holes in the polygons. There are two options:
- edit your GeoJSON to add the next smallest polygon as a hole in each polygon
- write code to create polygons with holes in them from your input GeoJSON
edited GeoJSON:
var mygeojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [ // innermost polygon
[
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 120,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
],
[ // innermost polygon, hole inside next level polygon
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 240,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.956063, -8.033059],
[-34.955041, -8.033829],
[-34.954587, -8.034079],
[-34.948183, -8.0401],
[-34.947163, -8.044392],
[-34.947272, -8.047986],
[-34.948019, -8.05595],
[-34.948103, -8.056254],
[-34.948084, -8.056901],
[-34.946187, -8.059355],
[-34.952109, -8.068439],
[-34.952839, -8.068665],
[-34.952829, -8.070174],
[-34.952796, -8.070289],
[-34.951771, -8.072104],
[-34.951041, -8.071877],
[-34.940532, -8.072531],
[-34.937183, -8.077114],
[-34.936484, -8.078185],
[-34.934712, -8.082695],
[-34.934542, -8.08374],
[-34.934408, -8.08414],
[-34.931548, -8.087205],
[-34.929387, -8.087655],
[-34.925758, -8.087245],
[-34.917409, -8.090498],
[-34.915368, -8.097388],
[-34.914401, -8.099923],
[-34.912478, -8.102227],
[-34.908953, -8.102959],
[-34.908757, -8.102013],
[-34.904896, -8.092322],
[-34.904582, -8.089398],
[-34.90457, -8.089352],
[-34.898932, -8.081687],
[-34.892253, -8.084787],
[-34.889729, -8.086645],
[-34.88728, -8.0867],
[-34.887252, -8.086673],
[-34.887112, -8.084173],
[-34.881451, -8.074375],
[-34.877403, -8.066542],
[-34.877357, -8.066449],
[-34.876976, -8.060774],
[-34.875231, -8.051236],
[-34.873014, -8.0484],
[-34.873907, -8.03785],
[-34.872542, -8.030814],
[-34.87267, -8.030475],
[-34.873901, -8.029557],
[-34.881458, -8.022556],
[-34.887505, -8.012962],
[-34.888584, -8.012166],
[-34.888918, -8.012105],
[-34.897461, -8.012019],
[-34.897505, -8.012052],
[-34.907112, -8.01783],
[-34.915999, -8.019938],
[-34.920063, -8.022551],
[-34.930189, -8.020902],
[-34.94101, -8.025031],
[-34.944608, -8.024917],
[-34.954314, -8.029913],
[-34.956063, -8.033059]
],
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
]
]
},
"properties": {
"group_index": 0,
"value": 480,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.967875, -8.022124],
[-34.967032, -8.022491],
[-34.962219, -8.027052],
[-34.965092, -8.03679],
[-34.965569, -8.037422],
[-34.964933, -8.039161],
[-34.960129, -8.048242],
[-34.95918, -8.050267],
[-34.957693, -8.053731],
[-34.956616, -8.054331],
[-34.953751, -8.063539],
[-34.958475, -8.066552],
[-34.96713, -8.073047],
[-34.966185, -8.076521],
[-34.964619, -8.076095],
[-34.962336, -8.075392],
[-34.958578, -8.072295],
[-34.951771, -8.072104],
[-34.947239, -8.076907],
[-34.945128, -8.081491],
[-34.944516, -8.092605],
[-34.944491, -8.09299],
[-34.942463, -8.094713],
[-34.936203, -8.099609],
[-34.936156, -8.099611],
[-34.930332, -8.098121],
[-34.928104, -8.097671],
[-34.926769, -8.097602],
[-34.919303, -8.105374],
[-34.920486, -8.107928],
[-34.921611, -8.110473],
[-34.921267, -8.11224],
[-34.921107, -8.112423],
[-34.921099, -8.112432],
[-34.920937, -8.112614],
[-34.915398, -8.116855],
[-34.914727, -8.117221],
[-34.911887, -8.117649],
[-34.904949, -8.112587],
[-34.904891, -8.112337],
[-34.905136, -8.111096],
[-34.905752, -8.109837],
[-34.906527, -8.105314],
[-34.906546, -8.105024],
[-34.90736, -8.102336],
[-34.907636, -8.101151],
[-34.907492, -8.097309],
[-34.904896, -8.092322],
[-34.895762, -8.09403],
[-34.892507, -8.099182],
[-34.892333, -8.099679],
[-34.888095, -8.101449],
[-34.887966, -8.101505],
[-34.885749, -8.101456],
[-34.883164, -8.096974],
[-34.879828, -8.088927],
[-34.879867, -8.088719],
[-34.880591, -8.087133],
[-34.881121, -8.086439],
[-34.880567, -8.074973],
[-34.874867, -8.072386],
[-34.870276, -8.064982],
[-34.870159, -8.064823],
[-34.869519, -8.056238],
[-34.868117, -8.04922],
[-34.869572, -8.042614],
[-34.863881, -8.032346],
[-34.862718, -8.03064],
[-34.864656, -8.026769],
[-34.865011, -8.026182],
[-34.871422, -8.017997],
[-34.872082, -8.015905],
[-34.872426, -8.015001],
[-34.872539, -8.014982],
[-34.873295, -8.014922],
[-34.881793, -8.006885],
[-34.881807, -8.004915],
[-34.883463, -8.002759],
[-34.883552, -8.002686],
[-34.884165, -8.002354],
[-34.889202, -8.000715],
[-34.89597, -8.002288],
[-34.896938, -8.002808],
[-34.899093, -8.004078],
[-34.904905, -8.009364],
[-34.914814, -8.009358],
[-34.920314, -8.010243],
[-34.92932, -8.014936],
[-34.940385, -8.012928],
[-34.943945, -8.0141],
[-34.944, -8.017238],
[-34.955462, -8.018325],
[-34.966437, -8.018824],
[-34.96753, -8.019999],
[-34.967655, -8.020305],
[-34.967875, -8.022124]
],
[
[-34.956063, -8.033059],
[-34.955041, -8.033829],
[-34.954587, -8.034079],
[-34.948183, -8.0401],
[-34.947163, -8.044392],
[-34.947272, -8.047986],
[-34.948019, -8.05595],
[-34.948103, -8.056254],
[-34.948084, -8.056901],
[-34.946187, -8.059355],
[-34.952109, -8.068439],
[-34.952839, -8.068665],
[-34.952829, -8.070174],
[-34.952796, -8.070289],
[-34.951771, -8.072104],
[-34.951041, -8.071877],
[-34.940532, -8.072531],
[-34.937183, -8.077114],
[-34.936484, -8.078185],
[-34.934712, -8.082695],
[-34.934542, -8.08374],
[-34.934408, -8.08414],
[-34.931548, -8.087205],
[-34.929387, -8.087655],
[-34.925758, -8.087245],
[-34.917409, -8.090498],
[-34.915368, -8.097388],
[-34.914401, -8.099923],
[-34.912478, -8.102227],
[-34.908953, -8.102959],
[-34.908757, -8.102013],
[-34.904896, -8.092322],
[-34.904582, -8.089398],
[-34.90457, -8.089352],
[-34.898932, -8.081687],
[-34.892253, -8.084787],
[-34.889729, -8.086645],
[-34.88728, -8.0867],
[-34.887252, -8.086673],
[-34.887112, -8.084173],
[-34.881451, -8.074375],
[-34.877403, -8.066542],
[-34.877357, -8.066449],
[-34.876976, -8.060774],
[-34.875231, -8.051236],
[-34.873014, -8.0484],
[-34.873907, -8.03785],
[-34.872542, -8.030814],
[-34.87267, -8.030475],
[-34.873901, -8.029557],
[-34.881458, -8.022556],
[-34.887505, -8.012962],
[-34.888584, -8.012166],
[-34.888918, -8.012105],
[-34.897461, -8.012019],
[-34.897505, -8.012052],
[-34.907112, -8.01783],
[-34.915999, -8.019938],
[-34.920063, -8.022551],
[-34.930189, -8.020902],
[-34.94101, -8.025031],
[-34.944608, -8.024917],
[-34.954314, -8.029913],
[-34.956063, -8.033059]
]
]
},
"properties": {
"group_index": 0,
"value": 600,
"center": [-34.909916, -8.05]
}
}],
"bbox": [-34.967875, -8.117649, 0, 0],
"info": {
"engine": {
"version": "4.7.0",
"build_date": "2018-10-31T12:15:39Z"
},
"service": "isochrones",
"query": {
"ranges": "120.0,240.0,480.0,600.0",
"profile": "driving-car",
"locations": [
[-34.909916, -8.05]
],
"range_type": "time",
"location_type": "start"
},
"attribution": "openrouteservice.org | OpenStreetMap contributors",
"timestamp": 1544700367108
}
};
code snippet: (removed outermost polygon so would fit in answer
var map;
var GeoJson;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(-8.044474, -34.884578),
});
map.data.addGeoJson(mygeojson);
map.data.setStyle(function(feature) {
var pvalue = feature.getProperty('value');
if (pvalue == 120) {
color = 'Blue';
}
if (pvalue == 240) {
color = '#ff5050';
}
if (pvalue == 480) {
color = '#ff9933';
}
if (pvalue == 600) {
color = 'yellow';
}
return {
fillColor: color,
strokeWeight: 1
}
});
}
var mygeojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 120,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
],
[
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 240,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.956063, -8.033059],
[-34.955041, -8.033829],
[-34.954587, -8.034079],
[-34.948183, -8.0401],
[-34.947163, -8.044392],
[-34.947272, -8.047986],
[-34.948019, -8.05595],
[-34.948103, -8.056254],
[-34.948084, -8.056901],
[-34.946187, -8.059355],
[-34.952109, -8.068439],
[-34.952839, -8.068665],
[-34.952829, -8.070174],
[-34.952796, -8.070289],
[-34.951771, -8.072104],
[-34.951041, -8.071877],
[-34.940532, -8.072531],
[-34.937183, -8.077114],
[-34.936484, -8.078185],
[-34.934712, -8.082695],
[-34.934542, -8.08374],
[-34.934408, -8.08414],
[-34.931548, -8.087205],
[-34.929387, -8.087655],
[-34.925758, -8.087245],
[-34.917409, -8.090498],
[-34.915368, -8.097388],
[-34.914401, -8.099923],
[-34.912478, -8.102227],
[-34.908953, -8.102959],
[-34.908757, -8.102013],
[-34.904896, -8.092322],
[-34.904582, -8.089398],
[-34.90457, -8.089352],
[-34.898932, -8.081687],
[-34.892253, -8.084787],
[-34.889729, -8.086645],
[-34.88728, -8.0867],
[-34.887252, -8.086673],
[-34.887112, -8.084173],
[-34.881451, -8.074375],
[-34.877403, -8.066542],
[-34.877357, -8.066449],
[-34.876976, -8.060774],
[-34.875231, -8.051236],
[-34.873014, -8.0484],
[-34.873907, -8.03785],
[-34.872542, -8.030814],
[-34.87267, -8.030475],
[-34.873901, -8.029557],
[-34.881458, -8.022556],
[-34.887505, -8.012962],
[-34.888584, -8.012166],
[-34.888918, -8.012105],
[-34.897461, -8.012019],
[-34.897505, -8.012052],
[-34.907112, -8.01783],
[-34.915999, -8.019938],
[-34.920063, -8.022551],
[-34.930189, -8.020902],
[-34.94101, -8.025031],
[-34.944608, -8.024917],
[-34.954314, -8.029913],
[-34.956063, -8.033059]
],
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
]
]
},
"properties": {
"group_index": 0,
"value": 480,
"center": [-34.909916, -8.05]
}
} // remove outermost polygon so fits in answer
],
"bbox": [-34.967875, -8.117649, 0, 0],
"info": {
"engine": {
"version": "4.7.0",
"build_date": "2018-10-31T12:15:39Z"
},
"service": "isochrones",
"query": {
"ranges": "120.0,240.0,480.0,600.0",
"profile": "driving-car",
"locations": [
[-34.909916, -8.05]
],
"range_type": "time",
"location_type": "start"
},
"attribution": "openrouteservice.org | OpenStreetMap contributors",
"timestamp": 1544700367108
}
};
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
这篇关于如何在多边形上打洞以在Google地图上以干净的颜色显示每个多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
