2014年9月24日水曜日

2 - ol3ex 5b - XYZ example 2

「xyz.js(205-ol3ex.js)」は、地図を表示するのに必要な javascript です。
「205-ol3ex.js」
var attribution = new ol.Attribution({
/** ol.Attribution
 * An attribution for a layer source.
 * レイヤソースの属性(ol3 API)
 */
/**
 * html: 'Tiles &copy; <a href="http://maps.nls.uk/townplans/glasgow_1.html">' +
 *     'National Library of Scotland</a>'
 */
 html: "Tiles &copy; <a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>" +
      "国土地理院</a>"
});
var map = new ol.Map({
 target: 'map',
 controls: ol.control.defaults({
 /** 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
  */
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ(型)の説明 - 式などで表示
   * (@use JSDoc[http://usejsdoc.org/]より)
   */
   collapsible: false
  })
 }),
 layers: [
/**
 *new ol.layer.Tile({
 * source: new ol.source.OSM({
 *  attributions: [
 *   new ol.Attribution({
 *    html: 'Tiles &copy; <a href="http://www.opencyclemap.org/">' +
 *        'OpenCycleMap</a>'
 *   }),
 *   ol.source.OSM.DATA_ATTRIBUTION // OpenStreetMap の DATA Attribution を取得
 *  ],
 *  url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
 * })
 *}),
 */
  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.XYZ({
   /** ol.source.XYZ
    * Layer source for tile data with URLs in a set XYZ 
    * format.
    * XYZ フォーマットの URL をともなったタイルデータのレイヤ
    * ソース。(ol3 API)
    */
    attributions: [attribution],
//  url: 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png'
    url: 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
   })  })
 ],
 view: new ol.View({
// center: [-472202, 7530279],
   center: [15520720, 4257706], // EPSG:3857 の値
// zoom: 12
   zoom: 10
 })
});


属性(attribution)が途中までしか表示されませんでした。
v3.0.0/css/ol.css の 「.ol-attribution ul」 のスタイルを次のように修正しました。
(全て、1行で記述されていますが、見やすいように直してあります。)
---
.ol-attribution ul{
 margin:0;
 padding:0 .5em;
 /* font-size:.7rem; */
 font-size:.7em;
 line-height:1.375em;
 color:#000;
 text-shadow:0 0 2px #fff;
 /* max-width:calc(100% - 3.6em); */
 max-width:calc(100%)
}
---



0 件のコメント: