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>