ラベル Attribution の投稿を表示しています。 すべての投稿を表示
ラベル Attribution の投稿を表示しています。 すべての投稿を表示

2014年12月25日木曜日

2 - ol3ex 41b - Attributions example 2

「attributions.js(241-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

var attribution = new ol.control.Attribution({
/** ol.control.Attribution
 * Control to show all the attributions associated 
 * with the layer sources in the map. This control 
 * is one of the default controls included in maps. 
 * By default it will show in the bottom right 
 * portion of the map, but this can be changed by 
 * using a css selector for .ol-attribution.
 * マップ内のレイヤソースに関連付けられているすべての属性を
 * 表示するコントロール。このコントロールは、マップに含まれ
 * るデフォルトのコントロールの一つです。デフォルトでは、
 * 地図の右下部分に表示されますが、これは、.ol-attribution 
 * の CSS セレクタを使用して変更することができます。(ol3 API)
 */
 collapsible: false // 折りたたみ
});
var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング(事前描画)を提供するレイヤソースのための、
   * 特定の解像度でのズームレベルによって編成されているグリッドの
   * タイルイメージ。(ol3 API)
   */
   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
    */
  })
 ],
 controls: ol.control.defaults({ attribution: false }).extend([attribution]),
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されるコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API)
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});
function checkSize() {
 var small = map.getSize()[0] < 600;
 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of 
  * the map in the DOM.
  * マップのサイズを取得。(ol3 API)
  */
 attribution.setCollapsible(small);
 /** setCollapsible(collapsible)
  * Name: collapsible, Type: boolean,
  * Description: True if the widget is collapsible.
  * (ol3 API)
  */
 attribution.setCollapsed(small);
 /** setCollapsed(collapsed)
  * Name: collapsed, Type: boolean,
  * Description: True if the widget is collapsed.
  * (ol3 API)
  */
}
$(window).on('resize', checkSize);
/** jQuery on イベント */
checkSize();

2 - ol3ex 41a - Attributions example 1

「Attributions example((attributions.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「attributions.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「attributions.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「241-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「attributions.html」の内容をコピーして「241-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「241-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「attributions.js」の内容をコピーして貼り付け、修正します。「attributions-require.js」も「241-ol3ex-require.js」に貼り付けます。


「241-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.0.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Attributions 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.0.0/examples/"><img src="v3.0.0/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">Attributions example</h4>
     <p id="shortdesc">Example of a attributions visibily change on map resize, to collapse them on small maps.</p>
     <div id="docs">
     <!--
      <p>See the <a href="attributions.js" target="_blank">attributions.js source</a> to see how this is done.</p>
     -->
       <!-- ファイル修正 -->
      <p>See the <a href="241-ol3ex.js" target="_blank">241-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">attributions, openstreetmap</div>
    </div>
   </div>
  </div>
  <!--
  <script src="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.0.0/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=attributions" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=241-ol3ex" type="text/javascript"></script>
 </body>
</html>

2009年11月25日水曜日

OpenLayers 32 レイヤの属性を表示 - Attribution Example

OpenLayers Attribution Example(attribution.html)を参考にラベルの表示をします。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_attribution.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「Attribution.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers32 Attribution</title>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- OpenLayers ライブラリ -->
<script src="./lib/Firebug/firebug.js"></script>
<script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>

<!-- attributions のコード -->

<script type="text/javascript">
var map, measureControls, layer1, layer2, layer3;
function init(){
// map = new OpenLayers.Map('map');
// 東京都用 map の設定
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
});

// ここまで
// ここから追加

layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
},{
attribution: 'Provided by <a href="http://nobmob.blogspot.com/2009/11/openlayers-32-attribution.html">My Blog</a>' // 追加
});

layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
},{
attribution:"My Map from 基盤地図情報" // 追加
});

layer3 = new OpenLayers.Layer.WMS( "Tokyo Gyoseikai mlit WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
layers: 'gyoseikai',
transparent: true,
format: 'image/png'
},{
attribution:"My Map from 国土数値地図" // 追加
});

map.addLayers([layer1, layer2, layer3]);

// ここまで

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Attribution());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
// map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomToMaxExtent();
} // End of function init()
</script>
</head>
<body onload="init()">
<h1 id="title">Attribution Example</h1>
<div id="tags">
copyright watermark logo attribution
</div>
<p id="shortdesc">
Shows the use of the attribution layer option on a number of layer types.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
This is an example of how to add an attribution block to the OpenLayers
window. In order to use an attribution block, an attribution parameter
must be set in each layer that requires attribution. In addition, an
attribution control must be added to the map, though one is added to all
OpenLayers Maps by default.
Be aware that this is a layer *option*: the options hash goes in
different places depending on the layer type you are using.
</div>
</body>
</html>




Attribution の説明の訳

これは、attribution ブロックを OpenLayers のウィンドウに追加する方法の例です。attribution ブロックを使うために、attribution パラメータは、attribution を必要とする各レイヤーに設定する必要があります。加えて、attribution control は、map に追加され、それにより、デフォルトですべての OpenLayers マップに追加されます。
これがレイヤ *オプション* だとということに注意してください。:オプションのハッシュはレイヤの種類に応じて別の場所に入ります。