전단지의 레이어 순서를 변경하고 싶습니다.
레이어 순서를 변경하기 위해 두 개의 전단지 플러그인을 구현하려고했습니다.
먼저 작동하는 것처럼 보이지만 layerGroups를 지원하지 않는 leaflet-control-orderlayers 시도 했습니다. 여기에 내 버그가 있습니다.
다음으로 layerGroups를 지원하지만 작동하지 않거나 유지되지 않는 mapbbcode 시도 했습니다 .
이 기능을 구현하는 방법에 대한 제안이 있습니까?
답변:
몇 가지 방법 으로이 작업을 수행 할 수 있습니다 (적어도 이것이 내가하는 방법입니다).
layer.bringToFront()및 layer.bringToBack()그러나 이들은 한 번에 하나 개의 계층을, 그리고뿐만 아니라 사이에, 전면 또는 후면에 밀어 것입니다. 따라서 레이어를 원하는 순서대로 배치하고 맨 아래에있는 레이어로 시작한 다음 layer.bringToFront()각 레이어를 호출 해야합니다.
레이어를 제거했다가 다시 추가하여이 작업을 수행 할 수도 있습니다. 이것은 다소 낭비적인 것처럼 보이지만 어쨌든 레이어를 재배치 할 때 맵을 다시 그려야하므로 일반적으로 그렇게 큰 문제는 아닙니다.
여기에 문제를 보여주는 상당히 복잡한 바이올린이 있습니다.
기본적으로 모든 레이어를 제거한 다음 오름차순으로 다시 추가하십시오 z-index. 따라서 모든 오버레이 레이어를 반복하고을 호출 map.removeLayer(layer)한 다음 원하는별로 정렬 z-index한 다음을 사용하여 다시 추가하십시오 layer.addTo(map).
나는 같은 문제를 겪고 있었고 fixZOrder () 메소드를 시도했지만 슬프게도 Leaflet 마커의 zindex에 영향을 미치지 않는 것처럼 Leaf 마커 를 주문 하지 않았습니다.
.bringToFront () 와 같은 것 같습니다이 방법을 지원 하는 벡터 모양에서만 작동하지만 Leaf 마커와는 달리이 솔루션을 사용할 수 없게 렌더링했지만 fixZOrder ()에서 발생하는 다른 코드 문제는 말할 것도 없습니다. 내 경우.
대신 레이어 순서를 Leaflet (옵션)에 순서대로 남겨두고 레이어 컨트롤을 사용할 때 마커 스태킹 (OMS Spiderf 플러그인) 문제가 발생 했지만이를 기반으로 내 자신의 funtion을 사용하여 이러한 문제를 해결했습니다. setZIndexOffset ()
function myBring2Front() {
//layer1.bringToFront();
layer1.eachLayer(function (layer) {
layer.setZIndexOffset(2000);
});
layer2.eachLayer(function (layer) {
layer.setZIndexOffset(1000);
});
}내 시나리오는 않았지만 하지 을 필요 fixZOrder(layers)로 최종 스택 마커와 함께이 방법을 사용하여 다른 사람이 유사한 접근 방식을 채택해야 할 수도 있습니다 따라서 나는대로이 게시하도록하겠습니다 추가 솔루션 위에서 언급 한 레이어 순서 방법의 잠재적 인 사용자를위한.
크레딧 : ghybs on stackoverflow.com/a/37850189/11106279
@nothingiscessary의 답변과 유사하게 다음은 비동기 데이터 로딩을 layer.bringToFront()결합했을 때 z 순서를 유지하는 데 사용 됩니다 layer control.
레이어를 지우고 맵에 다시 추가하지 않고 모든 레이어를 추가하므로 레이어 오버 헤드를 최소화하면서 레이어 컨트롤 에서 선택한 레이어를 존중하려고합니다 .
bringToFront()이 작업을 수행 할 수 있지만 그 안에 레이어 (컨텐츠)가있는 레이어 그룹에서만 호출해야합니다.
레이어를 정의하십시오.
var dataLayers = {
Districts: new L.geoJSON(),
Farms: new L.featureGroup(),
Paddocks: new L.geoJSON(),
Surveys: new L.geoJSON()
};
L.control.layers(
// base maps
{
OSM: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', subdomains: ['a', 'b', 'c'] });,
},
dataLayers,
{
collapsed: false,
hideSingleBase: true
}).addTo(map);
z 순서를 적용하려면 다음 기능을 사용하십시오.
/**
* Ensure that layers are displayed in the correct Z-Order
* Instead of explicitly defining z-order on the groups the order of the calls to beingToFront controls the resulting zOrder
* @param {any} dataLayers Object that holds the references to the layer groups toggled by the layer control
**/
function fixZOrder(dataLayers) {
// only similar approach is to remove and re-add back to the map
// use the order in the dataLayers object to define the z-order
Object.keys(dataLayers).forEach(function (key) {
// check if the layer has been added to the map, if it hasn't then do nothing
// we only need to sort the layers that have visible data
// Note: this is similar but faster than trying to use map.hasLayer()
var layerGroup = dataLayers[key];
if (layerGroup._layers
&& Object.keys(layerGroup._layers).length > 0
&& layerGroup._layers[Object.keys(layerGroup._layers)[0]]._path
&& layerGroup._layers[Object.keys(layerGroup._layers)[0]]._path.parentNode)
layerGroup.bringToFront();
});
}레이어 컨트롤을 사용할 때 레이어를보기로 전환하면 다른 레이어의 맨 위에 오게됩니다. 레이어를 추가 할 때 순서 논리를 다시 적용해야합니다. 이 작업 overlayadd은 맵 의 이벤트에 바인딩 하고 fixZOrder함수를 호출하여 수행 할 수 있습니다 .
map.on('overlayadd', function (e) {
fixZOrder(dataLayers);
}데이터를 비동기식으로로드하는 경우
fixZOrder데이터로드가 완료 될 때 호출해야 할 수도 있습니다 . 런타임에 추가 된 새 레이어는 다른 모든 레이어 위에 렌더링됩니다.