| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- <!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=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <style type="text/css">
- html, body { margin:0; padding: 0; height: 100%; width: 100%; }
- body { width:100%; height:100%; background: #ffffff; }
- #map { position: absolute; height: 100%; width: 100%; }
- #slider { position: absolute; top: 10px; right: 10px; }
- </style>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,fetch,Function.prototype.bind,es5&flags=always,gated&unknown=polyfill" type="text/javascript"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js" type="text/javascript"></script>
- </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 = ol.proj.transformExtent([112.916977, 22.483461, 113.179119, 22.809082], 'EPSG:4326', 'EPSG:3857');
- var mapMinZoom = 9;
- var mapMaxZoom = 18;
- var layer = new ol.layer.Tile({
- extent: mapExtent,
- source: new ol.source.XYZ({
- attributions: [new ol.Attribution({html: 'wuyidaxue; Rendered with <a href="https://www.maptiler.com/">MapTiler Desktop</a>'})],
- url: "{z}/{x}/{y}.png",
- tilePixelRatio: 1.000000,
- minZoom: mapMinZoom,
- maxZoom: mapMaxZoom
- })
- });
- var osm = new ol.layer.Tile({
- source: new ol.source.OSM()
- });
- var map = new ol.Map({
- target: 'map',
- layers: [
- osm,
- layer
- ],
- view: new ol.View({
- center: ol.proj.fromLonLat([113.048048, 22.646271]),
- zoom: 10
- })
- });
- </script>
- </body>
- </html>
|
