GeoJSON MultiPolygon渲染

时间:2016-05-12 08:51:26

标签: google-maps-api-3

我对GeoJSON功能和多字形有疑问。

要求是显示包含所有德国邮政编码区域的地图。其中一些完全封闭在其他人中,需要从他们的父母那里切除。

GeoJSON specs之后,我创建了一个几何节点的特征,如下所示:

{
"type": "MultiPolygon",
"coordinates": [
[
[
[
6.9210873,
50.56554
],
[
6.923955,
50.56846
],
[
6.927969,
50.56992
],
[
6.9331307,
50.570408
],
[
6.9342775,
50.57138
],
[
6.9314103,
50.57284
],
[
6.9291162,
50.57284
],
[
6.927969,
50.573814
],
[
6.927969,
50.57479
],
[
6.927396,
50.575275
],
[
6.9256754,
50.575275
],
[
6.9256754,
50.57625
],
[
6.9262486,
50.577225
],
[
6.926822,
50.578686
],
[
6.923955,
50.578686
],
[
6.9210873,
50.578197
],
[
6.9199405,
50.578197
],
[
6.919367,
50.578686
],
[
6.91822,
50.578686
],
[
6.916499,
50.578686
],
[
6.9153523,
50.576736
],
[
6.916499,
50.576736
],
[
6.917073,
50.57625
],
[
6.9176464,
50.57625
],
[
6.919367,
50.57625
],
[
6.9199405,
50.573814
],
[
6.919367,
50.57187
],
[
6.91822,
50.57138
],
[
6.917073,
50.57187
],
[
6.915926,
50.57187
],
[
6.9147787,
50.57138
],
[
6.912485,
50.573814
],
[
6.9130583,
50.57479
],
[
6.9147787,
50.575275
],
[
6.9147787,
50.576736
],
[
6.9147787,
50.578197
],
[
6.912485,
50.57771
],
[
6.9119115,
50.578686
],
[
6.910191,
50.57917
],
[
6.9061766,
50.576736
],
[
6.903309,
50.575764
],
[
6.9015884,
50.57333
],
[
6.902162,
50.57138
],
[
6.9015884,
50.570408
],
[
6.899295,
50.570892
],
[
6.899295,
50.57333
],
[
6.897574,
50.57479
],
[
6.896427,
50.57479
],
[
6.89528,
50.57333
],
[
6.891839,
50.57479
],
[
6.891266,
50.577225
],
[
6.8924127,
50.57966
],
[
6.8924127,
50.581604
],
[
6.8929863,
50.582092
],
[
6.8924127,
50.584038
],
[
6.891839,
50.585987
],
[
6.8924127,
50.58745
],
[
6.891839,
50.587936
],
[
6.8895454,
50.58842
],
[
6.888972,
50.587936
],
[
6.8872514,
50.58891
],
[
6.887825,
50.59037
],
[
6.886104,
50.59183
],
[
6.8849573,
50.59475
],
[
6.8849573,
50.598644
],
[
6.8843837,
50.59962
],
[
6.8843837,
50.600105
],
[
6.8855305,
50.600594
],
[
6.8866777,
50.601566
],
[
6.888972,
50.602055
],
[
6.890692,
50.603027
],
[
6.896427,
50.603027
],
[
6.8981476,
50.604
],
[
6.902162,
50.604
],
[
6.9027357,
50.603027
],
[
6.9050293,
50.602055
],
[
6.909044,
50.603027
],
[
6.910191,
50.604977
],
[
6.912485,
50.604977
],
[
6.913632,
50.60546
],
[
6.9142056,
50.60595
],
[
6.9142056,
50.606434
],
[
6.910191,
50.60741
],
[
6.9067497,
50.60887
],
[
6.904456,
50.609356
],
[
6.9067497,
50.611305
],
[
6.910191,
50.616173
],
[
6.911338,
50.617146
],
[
6.9119115,
50.620556
],
[
6.913632,
50.623478
],
[
6.9142056,
50.62445
],
[
6.915926,
50.62591
],
[
6.916499,
50.62932
],
[
6.913632,
50.629807
],
[
6.9142056,
50.63078
],
[
6.911338,
50.63078
],
[
6.9119115,
50.63224
],
[
6.9107647,
50.63273
],
[
6.9096174,
50.63224
],
[
6.907324,
50.63224
],
[
6.9038825,
50.633213
],
[
6.902162,
50.634674
],
[
6.899295,
50.635647
],
[
6.899295,
50.635647
],
[
6.888398,
50.636623
],
[
6.8849573,
50.63808
],
[
6.8849573,
50.636135
],
[
6.8786488,
50.637108
],
[
6.8734875,
50.63857
],
[
6.8734875,
50.64003
],
[
6.8700466,
50.64149
],
[
6.871767,
50.641975
],
[
6.87234,
50.642464
],
[
6.8711934,
50.644413
],
[
6.87234,
50.64733
],
[
6.863738,
50.651714
],
[
6.860297,
50.650253
],
[
6.858003,
50.653175
],
[
6.8620176,
50.65415
],
[
6.863738,
50.65512
],
[
6.866032,
50.65512
],
[
6.8654585,
50.65561
],
[
6.864885,
50.65561
],
[
6.863738,
50.65658
],
[
6.861444,
50.65756
],
[
6.861444,
50.65853
],
[
6.861444,
50.660965
],
[
6.8654585,
50.660965
],
[
6.8666053,
50.667294
],
[
6.867179,
50.670216
],
[
6.8734875,
50.670216
],
[
6.875781,
50.675083
],
[
6.871767,
50.676544
],
[
6.8746343,
50.678978
],
[
6.8711934,
50.679955
],
[
6.872914,
50.68239
],
[
6.8734875,
50.68531
],
[
6.8769283,
50.690178
],
[
6.8769283,
50.690666
],
[
6.8711934,
50.689205
],
[
6.856856,
50.69115
],
[
6.85915,
50.694557
],
[
6.8545623,
50.69748
],
[
6.8545623,
50.69748
],
[
6.853415,
50.69602
],
[
6.8488274,
50.696995
],
[
6.8407984,
50.703323
],
[
6.8350635,
50.701374
],
[
6.820726,
50.701862
],
[
6.817285,
50.701862
],
[
6.817285,
50.699913
],
[
6.814991,
50.699913
],
[
6.8144174,
50.701374
],
[
6.81155,
50.701374
],
[
6.810403,
50.69894
],
[
6.805815,
50.69943
],
[
6.8052416,
50.69748
],
[
6.8052416,
50.694073
],
[
6.804668,
50.6931
],
[
6.8052416,
50.692123
],
[
6.803521,
50.692123
],
[
6.7995067,
50.690666
],
[
6.7949185,
50.690666
],
[
6.7949185,
50.689205
],
[
6.777714,
50.69164
],
[
6.776567,
50.69164
],
[
6.7656703,
50.686283
],
[
6.7610826,
50.689205
],
[
6.760509,
50.68969
],
[
6.762803,
50.69164
],
[
6.7656703,
50.695045
],
[
6.7656703,
50.695045
],
[
6.746172,
50.699913
],
[
6.738143,
50.7004
],
[
6.738143,
50.701374
],
[
6.7318344,
50.701374
],
[
6.7289667,
50.696507
],
[
6.726673,
50.697968
],
[
6.724379,
50.69602
],
[
6.719791,
50.69261
],
[
6.718644,
50.693584
],
[
6.7146297,
50.69115
],
[
6.710615,
50.693584
],
[
6.7066007,
50.690178
],
[
6.7123356,
50.687256
],
[
6.709468,
50.684334
],
[
6.711762,
50.68336
],
[
6.7100415,
50.68141
],
[
6.7134824,
50.679466
],
[
6.717497,
50.678005
],
[
6.717497,
50.677032
],
[
6.720938,
50.675083
],
[
6.723232,
50.676544
],
[
6.7249527,
50.676544
],
[
6.725526,
50.677032
],
[
6.725526,
50.679466
],
[
6.7318344,
50.678493
],
[
6.725526,
50.67265
],
[
6.723232,
50.67119
],
[
6.7289667,
50.668755
],
[
6.726673,
50.66681
],
[
6.725526,
50.66486
],
[
6.7238054,
50.661938
],
[
6.7226586,
50.65853
],
[
6.7215114,
50.65512
],
[
6.7215114,
50.652203
],
[
6.717497,
50.651714
],
[
6.7152033,
50.64782
],
[
6.7134824,
50.64733
],
[
6.711762,
50.645874
],
[
6.7134824,
50.644897
],
[
6.7134824,
50.644897
],
[
6.7134824,
50.642464
],
[
6.7157764,
50.64149
],
[
6.714056,
50.637596
],
[
6.7146297,
50.637108
],
[
6.714056,
50.636623
],
[
6.7157764,
50.635647
],
[
6.7152033,
50.634186
],
[
6.71635,
50.6337
],
[
6.7157764,
50.63224
],
[
6.71635,
50.63224
],
[
6.7152033,
50.627373
],
[
6.71635,
50.627373
],
[
6.7180705,
50.627857
],
[
6.719791,
50.625423
],
[
6.7215114,
50.62445
],
[
6.720938,
50.623962
],
[
6.7260995,
50.62104
],
[
6.7272463,
50.618607
],
[
6.7283936,
50.618607
],
[
6.7295403,
50.617146
],
[
6.734702,
50.614227
],
[
6.735849,
50.6152
],
[
6.74101,
50.614227
],
[
6.7444515,
50.61471
],
[
6.7455983,
50.615685
],
[
6.746172,
50.61666
],
[
6.7478924,
50.61666
],
[
6.7478924,
50.615685
],
[
6.750186,
50.615685
],
[
6.7507596,
50.61179
],
[
6.757068,
50.61325
],
[
6.769685,
50.615685
],
[
6.768538,
50.61374
],
[
6.770832,
50.61179
],
[
6.7702584,
50.603027
],
[
6.7702584,
50.603027
],
[
6.7771406,
50.603516
],
[
6.7782874,
50.604
],
[
6.7771406,
50.606434
],
[
6.7834487,
50.60887
],
[
6.787463,
50.60741
],
[
6.78689,
50.60546
],
[
6.790331,
50.606922
],
[
6.7914777,
50.609356
],
[
6.7937717,
50.60887
],
[
6.7949185,
50.608383
],
[
6.795492,
50.609844
],
[
6.798933,
50.609356
],
[
6.802374,
50.60887
],
[
6.8052416,
50.60741
],
[
6.8075356,
50.606922
],
[
6.809256,
50.606434
],
[
6.8144174,
50.60887
],
[
6.816138,
50.604977
],
[
6.8167114,
50.602055
],
[
6.8224463,
50.595726
],
[
6.8167114,
50.592316
],
[
6.818432,
50.58891
],
[
6.8138437,
50.587936
],
[
6.814991,
50.577225
],
[
6.8121233,
50.575764
],
[
6.8190055,
50.56213
],
[
6.8333426,
50.566998
],
[
6.841945,
50.56408
],
[
6.8545623,
50.564564
],
[
6.871767,
50.570892
],
[
6.8780756,
50.56554
],
[
6.8947067,
50.561646
],
[
6.897574,
50.56213
],
[
6.9027357,
50.56262
],
[
6.904456,
50.56408
],
[
6.9067497,
50.565052
],
[
6.909044,
50.566513
],
[
6.9119115,
50.566998
],
[
6.912485,
50.56554
],
[
6.913632,
50.56408
],
[
6.916499,
50.565052
],
[
6.917073,
50.56408
],
[
6.9210873,
50.56554
],
[
6.9210873,
50.56554
]
],
[
[
6.7610826,
50.64733
],
[
6.762803,
50.63857
],
[
6.768538,
50.636135
],
[
6.7771406,
50.641003
],
[
6.7782874,
50.643436
],
[
6.779434,
50.643925
],
[
6.7857428,
50.64149
],
[
6.7943454,
50.64052
],
[
6.79836,
50.64149
],
[
6.804095,
50.651714
],
[
6.8086824,
50.65074
],
[
6.809256,
50.653175
],
[
6.809256,
50.654636
],
[
6.817285,
50.654636
],
[
6.8178587,
50.65512
],
[
6.8218727,
50.65853
],
[
6.820726,
50.659504
],
[
6.8218727,
50.660965
],
[
6.818432,
50.662426
],
[
6.8132706,
50.662914
],
[
6.8121233,
50.662914
],
[
6.8132706,
50.6634
],
[
6.8132706,
50.66437
],
[
6.81155,
50.66486
],
[
6.81155,
50.667294
],
[
6.81155,
50.668755
],
[
6.8086824,
50.669243
],
[
6.806962,
50.669727
],
[
6.8052416,
50.670216
],
[
6.8018007,
50.670704
],
[
6.7966394,
50.670704
],
[
6.795492,
50.67265
],
[
6.795492,
50.673138
],
[
6.7857428,
50.675083
],
[
6.7771406,
50.67411
],
[
6.771979,
50.67265
],
[
6.7668176,
50.670216
],
[
6.765097,
50.668266
],
[
6.7633767,
50.66486
],
[
6.762803,
50.662914
],
[
6.7610826,
50.65902
],
[
6.7610826,
50.65756
],
[
6.7610826,
50.65658
],
[
6.7610826,
50.64733
],
[
6.7610826,
50.64733
]
]
]
]
}

坐标对象是一个多边形数组,在这种情况下只有一个,第一个键是外线,第二个元素是内部多边形。

使用http://geojsonlint.com/一切都显示为已被删除,我也有其他多边形以相同的方式构建(一个只能创建此结构的类),它们就像一个魅力。

但是在Google地图中,它会在父级内部绘制折线,并且不会遗漏颜色。 (Child元素到位,因此内部斑点比所有其他元素更暗)

我清除了缓存,更改了浏览器甚至移动到另一台PC,所以我认为它不是客户端缓存问题。

另一个更复杂的情况是这个区域,漂亮的莱茵城市:

{
"type": "MultiPolygon",
"coordinates": [
[
[
[
7.463039,
52.341152
],
[
7.4584513,
52.334335
],
[
7.4773765,
52.334824
],
[
7.4808173,
52.32898
],
[
7.4802437,
52.32314
],
[
7.4831114,
52.32314
],
[
7.4985957,
52.317783
],
[
7.498022,
52.316322
],
[
7.5100656,
52.3134
],
[
7.5123596,
52.3134
],
[
7.512933,
52.314373
],
[
7.515227,
52.314373
],
[
7.5146537,
52.315834
],
[
7.5158005,
52.317783
],
[
7.518668,
52.315834
],
[
7.5192413,
52.316322
],
[
7.5203886,
52.31486
],
[
7.5215354,
52.31194
],
[
7.523256,
52.312428
],
[
7.5249763,
52.311455
],
[
7.523256,
52.31048
],
[
7.5249763,
52.309994
],
[
7.5261235,
52.31048
],
[
7.5272703,
52.309017
],
[
7.5318584,
52.306583
],
[
7.549063,
52.29003
],
[
7.552504,
52.28711
],
[
7.555945,
52.283215
],
[
7.558239,
52.28078
],
[
7.559386,
52.27932
],
[
7.5588126,
52.27883
],
[
7.5588126,
52.276398
],
[
7.5611067,
52.276398
],
[
7.562827,
52.274937
],
[
7.5611067,
52.274452
],
[
7.559386,
52.27104
],
[
7.559386,
52.27007
],
[
7.5553713,
52.266663
],
[
7.558239,
52.265686
],
[
7.5588126,
52.264225
],
[
7.553651,
52.259357
],
[
7.572003,
52.254
],
[
7.5754437,
52.252056
],
[
7.580032,
52.25303
],
[
7.5817523,
52.250595
],
[
7.5806055,
52.250595
],
[
7.5840464,
52.23599
],
[
7.5869136,
52.22917
],
[
7.5869136,
52.22917
],
[
7.585193,
52.22917
],
[
7.585193,
52.228683
],
[
7.5760174,
52.22625
],
[
7.5679884,
52.22479
],
[
7.5651207,
52.223816
],
[
7.5634003,
52.222355
],
[
7.5622535,
52.221382
],
[
7.56168,
52.22187
],
[
7.559386,
52.220894
],
[
7.552504,
52.21797
],
[
7.553651,
52.217
],
[
7.552504,
52.217
],
[
7.5519304,
52.217487
],
[
7.55021,
52.216515
],
[
7.549063,
52.216515
],
[
7.546769,
52.215538
],
[
7.5375934,
52.216515
],
[
7.534152,
52.217
],
[
7.5324316,
52.216515
],
[
7.5284176,
52.21846
],
[
7.523256,
52.21992
],
[
7.523256,
52.21895
],
[
7.5261235,
52.217
],
[
7.5244026,
52.21408
],
[
7.5249763,
52.21262
],
[
7.523256,
52.21213
],
[
7.522682,
52.21067
],
[
7.5215354,
52.210182
],
[
7.516374,
52.210182
],
[
7.5158005,
52.206776
],
[
7.5123596,
52.208725
],
[
7.508345,
52.206776
],
[
7.506624,
52.20775
],
[
7.506051,
52.207264
],
[
7.5031834,
52.206287
],
[
7.5071983,
52.20288
],
[
7.4865522,
52.196552
],
[
7.469921,
52.191196
],
[
7.459598,
52.193146
],
[
7.446408,
52.19217
],
[
7.4441137,
52.19363
],
[
7.441246,
52.193146
],
[
7.441246,
52.193146
],
[
7.440673,
52.197525
],
[
7.445261,
52.198498
],
[
7.4441137,
52.20142
],
[
7.440673,
52.200935
],
[
7.4395256,
52.200935
],
[
7.438379,
52.20288
],
[
7.429776,
52.198986
],
[
7.428056,
52.203854
],
[
7.4228945,
52.20337
],
[
7.4171596,
52.21895
],
[
7.4137187,
52.22917
],
[
7.412572,
52.228683
],
[
7.4102774,
52.23599
],
[
7.407984,
52.24475
],
[
7.4102774,
52.25254
],
[
7.407984,
52.25254
],
[
7.40741,
52.252056
],
[
7.4062634,
52.257896
],
[
7.4045424,
52.258385
],
[
7.4039693,
52.26082
],
[
7.4022484,
52.264713
],
[
7.4022484,
52.2652
],
[
7.3930726,
52.26179
],
[
7.391926,
52.264225
],
[
7.3856173,
52.26374
],
[
7.38275,
52.26861
],
[
7.3810296,
52.269096
],
[
7.3764415,
52.27786
],
[
7.3718534,
52.283703
],
[
7.3661184,
52.292953
],
[
7.3661184,
52.292953
],
[
7.37128,
52.299767
],
[
7.3867645,
52.309017
],
[
7.388485,
52.308044
],
[
7.3976607,
52.3061
],
[
7.399955,
52.308044
],
[
7.400528,
52.310966
],
[
7.402822,
52.310966
],
[
7.402822,
52.311455
],
[
7.4039693,
52.312428
],
[
7.413145,
52.311455
],
[
7.4263353,
52.31389
],
[
7.43035,
52.322163
],
[
7.438379,
52.332874
],
[
7.438379,
52.332874
],
[
7.44354,
52.334824
],
[
7.4441137,
52.334824
],
[
7.463039,
52.341152
],
[
7.463039,
52.341152
]
],
[
[
7.4320703,
52.29587
],
[
7.4332175,
52.2949
],
[
7.434938,
52.291004
],
[
7.434938,
52.288082
],
[
7.4360847,
52.284187
],
[
7.437232,
52.28224
],
[
7.4418197,
52.27883
],
[
7.44354,
52.27737
],
[
7.448128,
52.273964
],
[
7.4498487,
52.27299
],
[
7.452716,
52.272503
],
[
7.454437,
52.27104
],
[
7.45501,
52.267147
],
[
7.456731,
52.26374
],
[
7.4578776,
52.26228
],
[
7.4578776,
52.26228
],
[
7.463039,
52.26179
],
[
7.4664803,
52.263252
],
[
7.4659066,
52.264713
],
[
7.473362,
52.265686
],
[
7.4854054,
52.27104
],
[
7.481391,
52.273964
],
[
7.4865522,
52.274452
],
[
7.4905667,
52.274452
],
[
7.492861,
52.286137
],
[
7.492861,
52.28857
],
[
7.487126,
52.289543
],
[
7.481964,
52.287598
],
[
7.474509,
52.29782
],
[
7.47795,
52.299282
],
[
7.474509,
52.300743
],
[
7.474509,
52.30269
],
[
7.4693475,
52.3061
],
[
7.4664803,
52.304638
],
[
7.45501,
52.303177
],
[
7.4498487,
52.302204
],
[
7.4446874,
52.302204
],
[
7.4320703,
52.29587
],
[
7.4320703,
52.29587
]
],
[
[
7.4320703,
52.29587
],
[
7.4332175,
52.2949
],
[
7.434938,
52.291004
],
[
7.434938,
52.288082
],
[
7.4360847,
52.284187
],
[
7.437232,
52.28224
],
[
7.4418197,
52.27883
],
[
7.44354,
52.27737
],
[
7.448128,
52.273964
],
[
7.4498487,
52.27299
],
[
7.452716,
52.272503
],
[
7.454437,
52.27104
],
[
7.45501,
52.267147
],
[
7.456731,
52.26374
],
[
7.4578776,
52.26228
],
[
7.4578776,
52.26228
],
[
7.4578776,
52.26082
],
[
7.456157,
52.258873
],
[
7.45501,
52.257896
],
[
7.453863,
52.256924
],
[
7.442967,
52.256435
],
[
7.431497,
52.259357
],
[
7.4263353,
52.26082
],
[
7.4171596,
52.26082
],
[
7.4137187,
52.26228
],
[
7.4068365,
52.269096
],
[
7.402822,
52.274937
],
[
7.3982344,
52.28224
],
[
7.3982344,
52.28565
],
[
7.407984,
52.291004
],
[
7.412572,
52.293926
],
[
7.4148655,
52.2949
],
[
7.4171596,
52.295387
],
[
7.420027,
52.295387
],
[
7.424615,
52.29587
],
[
7.429776,
52.293438
],
[
7.4320703,
52.29587
],
[
7.4320703,
52.29587
]
]
]
]
}

2个多边形是直接邻居并且共享一条中间线,左边的一个被正确切断,右边的一个与Euskirchen的相同。

再次使用geojsonlint.com来验证发生了什么,我无法看到对象的问题,所以我认为可能存在某种缓存,阻止显示/造型恰当。

有趣的是:谷歌地图知道不应该有任何多边形,因为地图对象的点击事件会触发而不是数据层。

非常感谢帮助/提示。

1 个答案:

答案 0 :(得分:0)

解决方案非常简单,正如Molle博士指出的那样。 Google Maps API Polygon with "Hole" In Center

Google Maps API和geojsonlint之间的渲染差异也是造成差异的原因。

当您的多边形点为顺时针方向时,所有内部多边形必须是逆时针方向,以便省略。

只需反转有问题的内部多边形中点的顺序。

就我而言:

<?php
$array = array_reverse($array); 
?>