<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="http://openlayers.org/en/v4.1.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v4.1.0/build/ol.js" type="text/javascript"></script> <style type="text/css"> div.fill {width: 100%; height: 100%;} body {padding: 0; margin: 0;} html, body, #map {height: 100%; width: 100%;} .ol-attribution { padding: 3px; position: absolute; background-color:#ffffff; background-color:rgba(230,255,255,0.7); right: 3px; bottom:5px; font-size:12px; } .ol-attribution ul { padding: 0px; line-height: 14px; margin: 0px; } .ol-attribution li { line-height: inherit; display: inline; list-style: none outside none; } .ol-zoom .ol-zoom-out { margin-top: 202px; } .ol-zoomslider { background-color: transparent; top: 2.3em; } .ol-touch .ol-zoom .ol-zoom-out { margin-top: 212px; } .ol-touch .ol-zoomslider { top: 2.75em; } </style> <title>OpenLayers 3 Example: KML Layer</title> <script src="ol3ex9.js" type="text/javascript"></script> </head> <body onload="init_map()"> <div id="map_canvas" style="width: 100%; height: 97%; position:absolute; top:25px; left:0px; font-size:100%;"></div> <div style="font-size:85%"> 不透明度:<a title="decrease opacity" href="javascript: directSetOpacity(0.1);">0.1</a> <a title="decrease opacity" href="javascript: directSetOpacity(0.5);">0.5</a> <a title="decrease opacity" href="javascript: directSetOpacity(1.0); ">1.0</a> <b> 不透明度・0.2ずつ変更: <a title="decrease opacity" href="javascript: changeOpacity(-0.2);"><<</a> <span id="opacity_control">0.5</span> <a title="increase opacity" href="javascript: changeOpacity(0.2);">>></a></b> </div> </body> </html>