[英]Leaflet Magnifying Glass Plugin - Switching Layers
我有一個傳單地圖,我在其中使用放大鏡插件,並希望切換進出放大的圖層。 我有一個'底圖'圖層,然后是三個我想放大的圖層。 我希望能夠使用我設置的三個按鈕(Btn1,Btn2,Btn3)在這些圖層之間進行切換。
Magnified_Layer1將自動使用放大鏡進行設置,然后三個按鈕將在單擊時加載Magnified_Layer2和Magnified_Layer3,並重新加載Magnified_Layer1。 以下是我目前的代碼。
我特別感興趣的是對於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);
事實證明我使用的是舊版本的傳單(0.7.2),此功能不支持。
我更新到最新版本(1.0.3),現在我可以使用addLayer和removeLayer函數切換放大鏡。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.