从json map api v3合并多个多边形

时间:2017-09-15 09:59:14

标签: javascript arrays json google-maps google-maps-api-3

我正在尝试找到合并多个多边形(> 100)的方法,以便只有1个多边形只有合并多边形的边框,而不是所有“小”多边形的边框

我从JSON文件导入坐标,并使用此代码渲染每个多边形:

            var thisUcVar<?php echo $nb_fichier ?>;
            var thisAgencyVar<?php echo $nb_fichier ?>;
            var thisListAgencyVar;
            var thisUcColor;
            $.getJSON("<?php echo("test/". $fichier); ?>", function(json1) {
                var i=0;
                var coordUc = [];
                var thisUc = json1;
                thisUcVar<?php echo $nb_fichier ?> = thisUc[0].name;
                thisAgencyVar<?php echo $nb_fichier ?> = thisUc[0].agency;
                thisUcColor = thisUc[0].color;
                $.each(json1, function(key, data){
                    i = 0;              
                    $.each(data.coordinates, function(key, data){              
                        coordUc.length = 0;
                        $.each(data, function(key, data){
                            var innerCoordUc = {"lat":  data[1], "lng": data[0] };
                            coordUc[i] = innerCoordUc;
                            i++;
                        });
                        var uc = new google.maps.Polygon({
                            title: i,
                            strokeWeight: 1,
                            fillColor: thisUcColor,
                            paths: coordUc,
                            zIndex: 10
                        });             
                        uc.setMap(map);
                        map.addListener('zoom_changed',function(){
                            if(map.getZoom()>=10){
                                uc.set('zIndex', 90);
                            }else{
                                uc.set('zIndex', 10);
                            }
                        });
                        uc.addListener('click', function() {
                            $(".layer").html("<h1>" + thisUcVar<?php echo $nb_fichier ?> + "</h1><ul></ul>");
                            $.each(thisAgencyVar<?php echo $nb_fichier ?>, function(key, data){
                                listThisAgencyVar = data.name;
                                $(".layer").append("<li>" + uc.title + listThisAgencyVar + "</li>");
                            });
                            if(map.getZoom() >= 10){
                                map.setZoom(11);
                                map.setCenter(uc.getBounds().getCenter());                                  
                            } 
                        });

                        if (!google.maps.Polygon.prototype.getBounds) { 
                            google.maps.Polygon.prototype.getBounds=function(){
                                var bounds = new google.maps.LatLngBounds()
                                this.getPath().forEach(function(element,index){bounds.extend(element)})
                                return bounds;
                            }        
                        }
                    }); 
                });//fin de boucle json1        
            });

结果如下图所示:image with all polygon

这里有一个我用来生成每个多边形的JSON文件。 JSON used to generate polygons group

我到处搜索,我没有找到任何方法将多个多边形合并为一个大...

非常感谢

1 个答案:

答案 0 :(得分:0)

可能有效的解决方案是使用Turf library。特别是,它有一个union方法,可以完全按照您的需要进行操作(将多个多边形合并为一个与多边形的并集相对应的方法)。

但是,此库使用Geojson标准格式,因此您需要将数据转换为此标准。

如果您可以使用此格式,它还可以帮助您使用DataLayer和Google Maps API中的loadGeoJson方法在地图上显示数据。