javascript - 当我使用 destroy() 函数时，为什么 jquery-jcrop 会破坏我的 Leaflet map ？

Question

我用 jcrop 创建了一个非常简单的功能示例在图像上创建一个正方形:

$('#container').Jcrop({
    onSelect: function(c){
        alert(JSON.stringify(c));
        this.destroy()
    }
})

<meta charset="UTF-8">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>

<img src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg" id="container">

在本例中，函数 this.destroy()像我预期的那样工作，它破坏了 jcrop 的阴影层在我的图像上创建。到目前为止，一切都很好。但是，当我尝试对传单做同样的事情时，它根本不起作用。这是我尝试过的:

var mymap = L.map('container', {
    center:[-23.553670644165493, -46.648217439651496],
    zoom:18,
    maxZoom:19,
    zoomControl:false,
    attributionControl:false
});         
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);

$('#container').Jcrop({
    onSelect: function(c){
        alert(JSON.stringify(c));
        this.destroy()
    }   
})

#container{
    height: 100%;
    position: absolute;
    z-index: 0;
}

<meta charset="UTF-8">

<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />

<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>

<div id="container" style="height:100vh; width: 100vw"></div>

我从第一个示例中遵循了相同的逻辑，但在选择了 map 的一部分后，函数 destroy()也在摧毁 Leaflet map (当它是图像时不会发生)。有谁知道会发生什么？ jcrop 会不会是冲突？有 Leaflet如果不修改库，我想做什么是不可能的？

Answer 1

我最终通过一种解决方法解决了它，该解决方法创建了一个不同的 div使用与传单 map 使用相同空间的元素...解决方案如下:

var mymap = L.map('container', {
    center:[-23.553670644165493, -46.648217439651496],
    zoom:18,
    maxZoom:19,
    zoomControl:false,
    attributionControl:false,
    renderer: L.canvas()
});         
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);

const id = "aux-container"
createFakeMap(id)
$('#'+id).Jcrop({
    onSelect: function(c){
        alert(JSON.stringify(c));
        this.destroy()
    }   
}) 

// auxiliary function
function createFakeMap(id){
    const div = document.body.appendChild(document.createElement('div'));
    document.body.appendChild(div);
    div.setAttribute("id", id);
    div.style.height = '100vh';
    div.style.width = '100vw';
}

<meta charset="UTF-8">

<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />

<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>

<div id="container" style="height:100vh; width: 100vw; position: absolute; z-index:1"></div>

我使用 Javascript 而不是 HTML 创建了 div 元素，因为 destroy函数将在我执行它的所有时间破坏这个元素。使用 Javascript，我可以在需要时再次动态创建它，而不会破坏我的 map 及其状态。