Debianでka-MapのメモプラスOpenLayers とGeoExt: OpenLayers 24b Flickr の画像を表示5

Cluster Strategy Example（strategy-cluster.html）を参考に、ポインタを重ねたポイントに登録されている画像を欄外に表示します。
ポイントは画像の数で大きさが変わります。

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_s_cluster.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「strategy-cluster.html」の内容をコピーして新規作成したファイルに貼り付けます。
コードをつぎのように修正します。


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <!-- 追加 -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>OpenLayers25 Cluster Strategy</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />
  <!-- ディレクトリに合わせて修正 -->
  <script src="./lib/OpenLayers.js"></script>
  <script src="./examples/Jugl.js"></script>
  <script src="./examples/animator.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>


  <style type="text/css">
   #photos {
    height: 100px;
    width: 512px;
    position: relative;
    white-space: nowrap;
   }
   .shift {
    height: 25px;
    line-height: 25px;
    background-color: #fefefe;
    text-align: center;
    position: absolute;
    bottom: 10px;
    font-size: 8px;
    font-weight: bold;
    color: #696969;
    width: 25px;
   }
   #scroll-start {
    left: 0px;
   }
   #scroll-end {
    right: 0px;
   }
   #scroll {
    left: 30px;
    width: 452px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
   }
   #photos ul {
    position: absolute;
    bottom: 0px;
    padding: 0;
    margin: 0;
   }
   #photos ul.start {
    left: 0px;
   }
   #photos ul.end {
    right: 80px;
   }
   #photos ul li {
    padding 10px;
    margin: 0;
    list-style: none;
    display: inline;
   }
   img.thumb {
    height: 30px;
   }
   img.big {
    height: 90px;
   }
  </style>


  <script type="text/javascript">
   var map, template;
   var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];        
   OpenLayers.ProxyHost = (window.location.host == "localhost") ?
    "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
// ここからベースレイヤの変更
   function init() {
    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'
    });

    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'
    });

    map.addLayers([layer1, layer2]);
        
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());
       
    if (!map.getCenter()) {
     map.zoomToMaxExtent()
    };

// ここまで（ベースレイヤの変更）
// フューチャの設定


    var style = new OpenLayers.Style({
     pointRadius: "${radius}",
     fillColor: "#ffcc66",
     fillOpacity: 0.8,
     strokeColor: "#cc6633",
     strokeWidth: 2,
     strokeOpacity: 0.8
     }, {
     context: {
      radius: function(feature) {
      return Math.min(feature.attributes.count, 7) + 3;
      }
     }
    });

    var photos = new OpenLayers.Layer.Vector("Photos", {
     strategies: [
      new OpenLayers.Strategy.Fixed(),
      new OpenLayers.Strategy.Cluster()
     ],
     protocol: new OpenLayers.Protocol.HTTP({
      url: "/featureserver112/featureserver.cgi/flickr/all.gml", // 修正
       params: {
        format: "WFS",
        sort: "interestingness-desc",
        service: "WFS",
        request: "GetFeatures",
        srs: "EPSG:4326",
        maxfeatures: 150,
        bbox: [138.31229577194503, 35.227550723802125, 140.54908672504484, 36.17489902852169] // 修正
        },
       format: new OpenLayers.Format.GML()
     }),
     projection: new OpenLayers.Projection("EPSG:4326"),
     styleMap: new OpenLayers.StyleMap({
      "default": style,
      "select": {
       fillColor: "#8aeeef",
       strokeColor: "#32a8a9"
       }
      })
    });
                
    var select = new OpenLayers.Control.SelectFeature(
     photos, {hover: true}
    );
    map.addControl(select);
    select.activate();
    photos.events.on({"featureselected": display});

    map.addLayer(photos);
//    map.setCenter(new OpenLayers.LonLat(0, 0), 1);

// ここまで（フューチャの設定）
// template setup Jugl テンプレートと画像の表示部分の設定　


    template = new Jugl.Template("template");
   }

   function display(event) {
    // clear previous photo list and create new one
    $("photos").innerHTML = "";
    var node = template.process({
     context: {features: event.feature.cluster},
     clone: true,
     parent: $("photos")
    });
    // set up forward/rewind
     var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500});
    $("scroll-end").onmouseover = function() {forward.seekTo(1)};
    $("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
    $("scroll-start").onmouseover = function() {forward.seekTo(0)};
    $("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
    // set up photo zoom
    for(var i=0; i<event.feature.cluster.length; ++i) {
     listen($("link-" + i), Animator.apply($("photo-" + i), ["thumb", "big"]));
    }
   }
         
   function listen(el, anim) {
    el.onmouseover = function() {anim.seekTo(1)};
    el.onmouseout = function() {anim.seekTo(0)};
   }
// ここまで Jugl テンプレートと画像の表示部分の設定
  </script>
 </head>


 <body onload="init()">
  <h1 id="title">Cluster Strategy Example</h1>
  <p id="shortdesc">
   Uses a cluster strategy to render points representing clusters of features.
  </p>
  <div id="map" class="smallmap"></div>
  <div id="docs">
   <p>The Cluster strategy lets you display points representing clusters
   of features within some pixel distance.</p>
  </div>
  <div id="photos"></div>
  <p>Hover over a cluster on the map to see the photos it includes.</p>
  <div style="display: none;">
   <div id="template">
    <div class="shift" id="scroll-start">&lt;&lt;</div>
    <div id="scroll">
     <ul id="list" class="start">
      <li jugl:repeat="feature features">
       <a jugl:attributes="href feature.attributes.img_url;
        id 'link-' + repeat.feature.index"
        target="_blank">
        <img jugl:attributes="src feature.attributes.img_url;
        title feature.attributes.title;
        id 'photo-' + repeat.feature.index"
        class="thumb" />
       </a>
      </li>
     </ul>
    </div>
    <div class="shift" id="scroll-end">&gt;&gt;</div>
   </div>
  </div>
 </body>
</html>

ポイントに対応した画像が表示されます。

地図を拡大すると２つのポイントに分かれます。
大きいポイントに対応した画像。

小さいポイントに対応した画像。

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2009年11月5日木曜日

OpenLayers 24b Flickr の画像を表示5 - Cluster Strategy2

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ