2016-02-14 3 views
0

Я рисую много кругов на карте, используя Leaflet.js. Иногда многие из этих кругов перекрываются. Несмотря на то, что круги прозрачны (непрозрачность CSS установлена ​​на 0,3), тогда карта больше не может быть видна должным образом. Я ищу способ создать одну фигуру из n кругов. Я нашел Greiner Hormann, однако, похоже, это работает только для полигонов.Leaflet.js union/merge круги

Мой вопрос: как можно объединить круги, которые должны быть добавлены на карту leaflet.js.

Заранее спасибо.

ответ

0

Я не думаю, что есть простой способ выполнить операции объединения на объектах L.circle. Однако вы можете использовать Leaflet Geodesy для создания круговых полигонов и выполнения операций объединения с ними. Мое предложение было бы создавать свои круги, как LGeo.circle объектов и поместить их все в том же layerGroup, например:

var cities = new L.LayerGroup(); 
var chicago = LGeo.circle([41.84, -87.68], 1000000).addTo(cities); 
var newOrleans = LGeo.circle([29.95, -90.07], 1000000).addTo(cities); 
var denver = LGeo.circle([39.74, -104.99], 1000000).addTo(cities); 

Это удобно, потому что, как только они сгруппированы вместе, вы можете использовать .getLayers(), чтобы получить массив всех слоев, а затем перебирать их, чтобы получить их объединение. Эта функция, например, будет принимать массив из ваших слоев и возвращает L.geoJson объекта их объединений, рассчитываемый с Turf.js:

function unify(polyList) { 
    for (var i = 0; i < polyList.length; ++i) { 
    if (i == 0) { 
     var unionTemp = polyList[i].toGeoJSON(); 
    } else { 
     unionTemp = turf.union(unionTemp, polyList[i].toGeoJSON()); 
    } 
    } 
    return L.geoJson(unionTemp); 
} 

var cityUnion = unify(cities.getLayers()).addTo(map); 

Вот пример скрипка этого на работе:

http://fiddle.jshell.net/nathansnider/ehpL8fho/

[При использовании Turf, вероятно, лучшее решение, если вы хотите использовать Greiner Hormann вместо этого, вот example fiddle, используя это. Вы можете заметить, что это вызывает ошибку, если вы попробуете ее с кругами, которые не все перекрываются. Это связано с тем, что процедура Greiner Hormann ничего не возвращает, когда входные многоугольники не перекрываются. Использование Turf позволит избежать этой проблемы, потому что его союзная процедура обрабатывает несмежные многоугольники, возвращая вместо этого объект multipolygon. ]

+0

Большое спасибо за ваш ответ, я очень ценю это. Это именно то, что я искал. Я буду использовать решение с дерном, так как это могут быть круги, которые не перекрываются. – Andy

+0

Вы очень желанны! Если это решит вашу проблему, пожалуйста, примите ответ. – nathansnider

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