| 1234567891011121314151617181920212223242526272829303132333435363738394041 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>wuyidaxue</title>
- <meta http-equiv="imagetoolbar" content="no">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
- <link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" type="text/javascript"></script>
- <script src="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.js" type="text/javascript"></script>
- <style>
- body { margin:0; padding:0; width:100%; height:100%; background: #ffffff; }
- #map { position:absolute; top:0; bottom:0; width:100%; z-index: 1; }
- #slider{ position: absolute; top: 10px; right: 10px; z-index: 5; }
- </style>
- </head>
- <body>
- <div id="map"></div>
- <input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
- <script type="text/javascript">
- var mapExtent = [112.91697703, 22.48346084, 113.17911915, 22.80908183];
- var mapMinZoom = 9;
- var mapMaxZoom = 18;
- var bounds = new L.LatLngBounds(
- new L.LatLng(mapExtent[1], mapExtent[0]),
- new L.LatLng(mapExtent[3], mapExtent[2]));
- var map = L.map('map').fitBounds(bounds);
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
- var layer;
- var options = {
- minZoom: mapMinZoom,
- maxZoom: mapMaxZoom,
- opacity: 1.0,
- attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler Desktop</a>',
- tms: false
- };
- layer = L.tileLayer('{z}/{x}/{y}.png', options).addTo(map);
- </script>
- </body>
- </html>
|
