![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
GIS OpenLayers3 Raster Layer |
| sat | 衛星写真 |
| osm | Open Steet Map |
| hyb | Hybrid |
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 06 Raster Layer</title>
</head>
<body>
<div id="map" class="map" style="height:300px"></div>
<div id="layerSelect">
<label><input type="checkbox" value="sat" checked="checked">sat</label>
<label><input type="checkbox" value="osm">osm</label>
</div>
<script src="js/ol-debug.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var mapquestSat = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
var mapquestOsm = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'}),
visible: false
})
var map = new ol.Map({
target: 'map',
layers: [mapquestSat,mapquestOsm],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
$('#layerSelect input[type="checkbox"]').on('click', function() {
$('#layerSelect input[type="checkbox"]').each(function(num){
var $checkbox = $(this);
var layerName = $checkbox.val();
var checked = $checkbox.prop('checked');
switch( layerName ) {
case 'sat':
mapquestSat.setVisible(checked);
break;
case 'osm':
mapquestOsm.setVisible(checked);
if (mapquestSat.getVisible()) {
mapquestOsm.setOpacity(0.5);
} else {
mapquestOsm.setOpacity(1.0);
}
break;
default:
}
})
});
</script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 07 OpenStreetMap</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>| terrain, terrain-background, terrain-labels, terrain-lines | 地形 |
| toner, toner-hybrid, toner-labels, toner-lines, toner-lite | 白地図 |
| watercolor | 水彩画風 |
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 09 Stamen</title>
</head>
<body>
<div id="map" class="map" style="height:300px"></div>
<div id="layerSelect">
<label><input type="checkbox" value="sat" checked="checked">water color</label>
<label><input type="checkbox" value="osm">toner</label>
</div>
<script src="js/ol-debug.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var stamenWaterColor = new ol.layer.Tile({
source: new ol.source.Stamen({layer: 'watercolor'})
})
var stamenToner = new ol.layer.Tile({
source: new ol.source.Stamen({layer: 'toner'}),
visible: false
})
var map = new ol.Map({
target: 'map',
layers: [stamenWaterColor,stamenToner],
view: new ol.View({
center: ol.proj.transform([-74.0022, 40.4246], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
$('#layerSelect input[type="checkbox"]').on('click', function() {
$('#layerSelect input[type="checkbox"]').each(function(num){
var $checkbox = $(this);
var layerName = $checkbox.val();
var checked = $checkbox.prop('checked');
switch( layerName ) {
case 'sat':
stamenWaterColor.setVisible(checked);
break;
case 'osm':
stamenToner.setVisible(checked);
if (stamenWaterColor.getVisible()) {
stamenToner.setOpacity(0.5);
} else {
stamenToner.setOpacity(1.0);
}
break;
default:
}
})
});
</script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
</style>
<title>OpenLayers 3 example 08 WMS</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : 'https://hondou.homedns.org/mapserver/mapcache?',
params: {
// these are simply added to http-get parameter
'LAYERS' : 'test',
'TRANSPARENT' : 'FALSE'
}
})
})
],
view: new ol.View({
center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>
