99 lines
4.6 KiB
HTML
99 lines
4.6 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>web_ready.tif</title>
|
||
|
|
<meta http-equiv='imagetoolbar' content='no'/>
|
||
|
|
<style type="text/css"> v\:* {behavior:url(#default#VML);}
|
||
|
|
html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
|
||
|
|
body { margin: 10px; background: #fff; }
|
||
|
|
h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
|
||
|
|
#header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
|
||
|
|
#subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
|
||
|
|
#map { height: 90%; border: 1px solid #888; }
|
||
|
|
</style>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
|
||
|
|
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
|
||
|
|
<script src="https://unpkg.com/ol-layerswitcher@3.5.0"></script>
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/ol-layerswitcher@3.5.0/src/ol-layerswitcher.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="header"><h1>web_ready.tif</h1></div>
|
||
|
|
<div id="subheader">Generated by <a href="https://gdal.org/programs/gdal2tiles.html">GDAL2Tiles</a> </div>
|
||
|
|
<div id="map" class="map"></div>
|
||
|
|
<div id="mouse-position"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var mousePositionControl = new ol.control.MousePosition({
|
||
|
|
className: 'custom-mouse-position',
|
||
|
|
target: document.getElementById('mouse-position'),
|
||
|
|
undefinedHTML: ' '
|
||
|
|
});
|
||
|
|
var map = new ol.Map({
|
||
|
|
controls: ol.control.defaults().extend([mousePositionControl]),
|
||
|
|
target: 'map',
|
||
|
|
|
||
|
|
layers: [
|
||
|
|
new ol.layer.Group({
|
||
|
|
title: 'Base maps',
|
||
|
|
layers: [
|
||
|
|
new ol.layer.Tile({
|
||
|
|
title: 'OpenStreetMap',
|
||
|
|
type: 'base',
|
||
|
|
visible: true,
|
||
|
|
source: new ol.source.OSM()
|
||
|
|
}),
|
||
|
|
new ol.layer.Tile({
|
||
|
|
title: 'Bing Roads',
|
||
|
|
type: 'base',
|
||
|
|
visible: false,
|
||
|
|
source: new ol.source.BingMaps({
|
||
|
|
key: "INSERT_YOUR_KEY_HERE",
|
||
|
|
imagerySet: 'Road'
|
||
|
|
})
|
||
|
|
}),
|
||
|
|
new ol.layer.Tile({
|
||
|
|
title: 'Bing Aerial',
|
||
|
|
type: 'base',
|
||
|
|
visible: false,
|
||
|
|
source: new ol.source.BingMaps({
|
||
|
|
key: "INSERT_YOUR_KEY_HERE",
|
||
|
|
imagerySet: 'Aerial'
|
||
|
|
})
|
||
|
|
}),
|
||
|
|
new ol.layer.Tile({
|
||
|
|
title: 'Bing Hybrid',
|
||
|
|
type: 'base',
|
||
|
|
visible: false,
|
||
|
|
source: new ol.source.BingMaps({
|
||
|
|
key: "INSERT_YOUR_KEY_HERE",
|
||
|
|
imagerySet: 'AerialWithLabels'
|
||
|
|
})
|
||
|
|
}),
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
new ol.layer.Group({
|
||
|
|
title: 'Overlay',
|
||
|
|
layers: [
|
||
|
|
new ol.layer.Tile({
|
||
|
|
title: 'Overlay',
|
||
|
|
// opacity: 0.7,
|
||
|
|
extent: [13424100.343378, 5041884.120098,13424400.027297, 5042182.735625],
|
||
|
|
source: new ol.source.XYZ({
|
||
|
|
attributions: '',
|
||
|
|
minZoom: 17,
|
||
|
|
maxZoom: 23,
|
||
|
|
url: './{z}/{x}/{-y}.png',
|
||
|
|
tileSize: [256, 256]
|
||
|
|
})
|
||
|
|
}),
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
view: new ol.View({
|
||
|
|
center: [13424250.185337, 5042033.427862],
|
||
|
|
zoom: 17,
|
||
|
|
})
|
||
|
|
});
|
||
|
|
map.addControl(new ol.control.LayerSwitcher());
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|