切换图片图层 

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7         <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
 8         <title></title>
 9         <style type="text/css">
10             body {
11                 margin: 0;
12             }
13 
14             #mapid {
15                 height: 500px;
16             }
17         </style>
18     </head>
19     <body>
20      <div id="map-container">
21          <div>
22              <button id="first-btn">第一层</button>
23              <button id="second-btn">第二层</button>
24          </div>
25              <div id="mapid"></div>
26      </div>
27 
28         <script type="text/javascript" src="leaflet/leaflet.js"></script>
29 
30         <script type="text/javascript">
31             const mymapOptions = {
32                 // 地图中心
33                 center: [51.505, -0.09],
34                 // 地图的最小缩放级别
35                 minZoom: 11,
36                 // 初始化时的缩放等级
37                 zoom: 13,
38                 // 地图的最大缩放级别
39                 maxZoom: 15,
40                 // 强制让地图的缩放级别始终为这个值的倍数
41                 zoomSnap: 1,
42                 // 版权控件添加到地图中（即水印）
43                 attributionControl: false,
44                 // 是否显示zoom 缩放控件,默认是true
45                 zoomControl: true,
46             }
47 
48             const mymap = L.map('mapid', mymapOptions);
49 
50             //声明图层组，存储城市标记marker
51             var cities = L.layerGroup();
52 
53             //声明两个城市marker并添加进图层组
54             const linyi = L.marker([51.505, -0.09]).bindPopup('这里属于青岛').addTo(cities);
55             const qingdao = L.marker([51.505, -0.19]).bindPopup('这里属于临沂').addTo(cities);
56             
57             const imageUrl = 'leaflet/images/b1-floor1-full-h.png';
58             // 获取顶部左边的边界
59             const northEast = L.latLng(mymap.getBounds()._northEast);
60             // 获取底部右边的边界
61             const southWest = L.latLng(mymap.getBounds()._southWest);
62 
63             const imageBounds = L.latLngBounds(northEast, southWest);
64             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);
65             
66             cities.addTo(mymap)
67             
68             
69             const firstBtn = document.querySelector('#first-btn')
70             const secondBtn = document.querySelector('#second-btn')
71             
72             firstBtn.addEventListener('click', (ev) => {
73                 cities.clearLayers()
74                 const linyi = L.marker([51.505, -0.09]).bindPopup('这里属于青岛').addTo(cities);
75                 const qingdao = L.marker([51.505, -0.19]).bindPopup('这里属于临沂').addTo(cities);
76                 imageOverlay.setUrl('leaflet/images/2.PNG')
77             })
78             
79             secondBtn.addEventListener('click', (ev) => {
80                 cities.clearLayers()
81                 const qingdao = L.marker([51.505, -0.19]);
82                 cities.addLayer(qingdao)
83                 imageOverlay.setUrl('leaflet/images/b1-floor1-full-h.png')
84             })
85             
86         </script>
87 
88     </body>
89 </html>

 

posted @ 2022-04-19 16:25  sky-su  阅读(41)  评论(0)    收藏  举报