HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.1.1」->「examples」->「drag-and-drop.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「drag-and-drop.js」を開きます。
f 「drag-and-drop.html」の内容をコピーして「256-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「256-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「drag-and-drop.js」の内容をコピーして貼り付け、修正します。「drag-and-drop-require.js」も「256-ol3ex-require.js」に貼り付けます。
「256-ol3ex.html」
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!-- <link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> --> <!-- ディレクトリ修正 --> <link rel="stylesheet" href="v3.1.1/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Drag-and-Drop example</title>
</head> <body>
<!-- bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。 --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container">
<!--
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
<!-- ディレクトリ修正 -->
<a class="brand" href="v3.1.1/examples/"><img src="v3.1.1/resources/logo.png"> OpenLayers 3 Examples</a>
</div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div>
<div class="row-fluid"> <div class="span12"> <h4 id="title">Drag-and-Drop example</h4>
<p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
<div id="docs"> <!-- See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p> --> <!-- ファイル修正 --> See the <a href="256-ol3ex.js" target="_blank">256-ol3ex.js source</a> to see how this is done.</p>
</div> <div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div> </div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
</div>
</div>
</div> </div>
<!-- <script src="../resources/jquery.min.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script> --> <!-- ディレクトリ修正 jQuery Minified版と example-behaviour.js（Examples用 JSコード[文字コードなど]） --> <script src="v3.1.1/resources/jquery.min.js" type="text/javascript"></script> <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>
<!-- <script src="loader.js?id=drag-and-drop" type="text/javascript"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=256-ol3ex" type="text/javascript"></script>
</body> </html>
0 件のコメント:
コメントを投稿