Question

我有一张传单地图，我在其中使用Magnifying Glass plugin并希望切换进出被放大的图层。我有一个底图＆＃39;层，然后三层，我想放大。我希望能够使用我设置的三个按钮（Btn1，Btn2，Btn3）在这些图层之间进行切换。

Magnified_Layer1将自动使用放大镜进行设置，然后三个按钮将在单击时加载Magnified_Layer2和Magnified_Layer3，并重新加载Magnified_Layer1。以下是我目前的代码。

我特别感兴趣的是有没有添加＆＃39;和＆＃39;删除＆＃39;对于enlargeGlass实例可用的方法，如果没有，我可以如何使用相关层动态构建和重构它。

<div class="span9" style="height:100%">
<div id="map"></div>
<div id="centered" style="width:600px;">
<input type="button" id="Btn1" value="Wealth index" onclick="" class="btnStyle span3" />
<input type="button" id="Btn2" value="PPI" onclick="" class="btnStyle span3" /> 
<input type="button" id="Btn3" value="Income" onclick="" class="btnStyle span3" />

<script>

    // initialize the map + minimum zoom if just focusing on one country
    var map = L.map('map',{minZoom: 7, maxZoom: 7,attributionControl: false,zoomControl: false, scrollWheelZoom:false}).setView([23.814602, 90.413961], 12);
    map.dragging.disable()
    // Add zoom to extent button (see stylesheet and .js file in header)
    <!-- map.addControl(new L.Control.ZoomMin()) -->

    //Setting Maximum bounds for zooming and panning (Top left and bottom right from google maps)
    var bounds = L.latLngBounds([[26.548387, 89.144284], [20.580493, 92.103854]]);
    map.setMaxBounds(bounds);
    map.on('drag', function() {
        map.panInsideBounds(bounds, { animate: false });
    });


    //Load GeoJSON using Ajax Plugin (Chrome not allowing cross HTTP requests..)
    <!-- var geojsonLayer = new L.GeoJSON.AJAX("Bangladesh2.json",{style:style -->
                                            <!-- ,smoothFactor: 0.1}).addTo(map);  -->


    // Adding layers and bounds
    var Basemap_Bounds = new L.LatLngBounds(
        new L.LatLng(26.64163201,88.00822613),
        new L.LatLng(20.73330104,92.67489093));

    var Magnified_Bounds = new L.LatLngBounds(
        new L.LatLng(26.6344108958,88.02834),
        new L.LatLng(20.5760799858,92.67000481));


    map.fitBounds(bounds);


    var Basemap = new L.ImageOverlay("img/Basemap.png", Basemap_Bounds).addTo(map);
    var Magnified_Layer1 = new L.ImageOverlay("img/Magnified_Layer1.png", Magnified_Bounds);
    var Magnified_Layer2 = new L.ImageOverlay("img/Magnified_Layer2.png", Magnified_Bounds);        
    var Magnified_Layer3 = new L.ImageOverlay("img/Magnified_Layer3.png", Magnified_Bounds);

// Setting up Magnifying Glass
    var magnifyingGlass = L.magnifyingGlass({
      layers: [Magnified_Layer1],
      zoomOffset: 0,
      radius: 75
    }).addTo(map);

Answer 1

事实证明我使用的是旧版本的传单（0.7.2），这个功能并不支持。

我更新到最新版本（1.0.3），现在我可以使用addLayer和removeLayer函数切换放大镜。

Leaflet放大镜插件 - 切换层

1 个答案: