ホーム サンプルコード一覧 9. Image Scaler

9. Image Scaler

image_scaler_capture1
image_scaler_capture2

実現される機能

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

ラスター画像(JPG)のサンプル

大きめな画像のズームイン、ズームアウトが可能です。

ベクター画像(SVG)のサンプル

ベクター画像である日本地図のズームイン、ズームアウトが可能です。

■使用手順1(画像データの場合)

1. 画像データの用意

適度なサイズ(大きめがよい)を用意し、以下のソース部分に配置する。

<script type="text/javascript" src="./cp_js/img_data.js"></script>
<div id="img_wrapper">
  <img src="./cp_img/sample1.jpg" width="300" height="200">
</div>

2. img_data.js内の設定

画像サイズやズームイン、ズームアウトに関する設定を行います。

// 初期設定
var width   = 300,        // 画像サイズ(幅)
    height  = 200;        // 画像サイズ(高)
var max_in  = 50;       // ズームイン最大倍率(50倍)
var max_out = 1;        // ズームアウト最小倍率(1倍)

3. 設定に関連するファイル

設定に関連するファイルは以下になります。赤字がカスタマイズが可能なファイルになります。

└cp_css
  └common.css
└cp_js
  └d3.v3.min.js       画像表示用のJavaScriptフレームワーク
  └img_data.js          画像の設定及び制御を行うJavaScriptファイル
└cp_img
  └sample1.jpg          サンプル画像
└index.html         サイトのHTML本体

■使用手順2(地図データの場合)

1. 地図データの取得

地図情報を提供しているサイトよりShapeFile形式(拡張子.shp)のデータを含む地図データを取得してください。本スケルトンに含まれるサンプルデータの地図は以下のサイトより取得可能です。

2. TOPOJSON形式への変換

1.で取得したShapeFile形式のファイルをJavaScriptで読み込みできるようにTOPOJSON形式へ変換してください。下記のmapShaper等のサイトへ変換が可能です。

3. map_data.js内のファイルパスの変更

map_data.jsの3行目d3.json("cp_map/japan.topojson", function(json))の赤字部分を、2.で取得したTOPOJSONファイルへのパスへ変更してください。

4. map_data.js内の取得オブジェクト名の変更

map_data.jsの37行目topojson.feature(json, json.objects.japan).geometries;の赤字部分を、以下で取得したオブジェクト名に変更してください。下の例では、“japan”がオブジェクト名になります。

objectsの第一要素(赤枠部分)がオブジェクト名

{"type":"Topology",
  "transform":{
    "scale":[0.002595118062831674,0.0021348465489249117],
    "translate":[122.94043731689453,24.209043502807617]},
    "objects":{
      "japan":{
        "type":"GeometryCollection",
        "geometries":[{
          "type":"Polygon",
          "id":0,
          "arcs":[[0,1,2,3,4]
        ]},{
          "type":"Polygon",
          "id":1,
          "arcs":[[5,6,7,8,9,10,11,12]
        ]},{
          "type":"MultiPolygon",
          "id":2,
          "arcs":[[[13]],
          [[14,15,16,17],
          [18]]
        ]},{
          "type":"Polygon",
          "id":3,
          "arcs":[[19,20,21,22,23,-18,24]
        ]}

5. 画面確認

サイト上で地図を表示し、スクロールやドラッグができることを確認してください。

6. その他の設定

map_data.jsにて以下の設定を変えることで、マップの初期表示時のサイズや位置を変更することが出来ます。

サンプル記載の初期設定
~1行目から~
// 初期設定
var scale     = 550;        // 初期表示サイズ
var map_dat   = "./cp_map/japan.topojson";  // 使用地図データとパス指定
var width     = 300,        // 地図サイズ(幅px)
    height    = 200;        // 地図サイズ(高px)
    
~13行から~
var projection = d3.geo.mercator()
      .scale(scale)
      .center([135, 38])  // 地図の中心座標
      .translate([width / 2, height / 2]);

 

その他追記可能な初期設定

var map_color = "green";     // 地図色(#ffffffの形でも可)
var map_opst  = "0.5";       // 地図色透過度
var map_strk  = "#000000";     // 境界線の色
var strk_wdth = "0.2";       // 境界線の幅

7. 設定に関連するファイル

設定に関連するファイルは以下になります。赤字がカスタマイズが可能なファイルになります。

└cp_css
  └common.css
└cp_js
  └d3.v3.min.js       地図表示用のJavaScriptフレームワーク
  └topojson.v0.min.js       topojson形式の記述を扱うプラグイン
  └map_data.js          地図の設定及び制御を行うJavaScriptファイル
└cp_map
  └japan.topojson       日本地図(※サンプルデータ)
└index.html         サイトのHTML本体