携帯向け簡易地図
拡大縮小・移動できる地図
MapServer開発キットを使用すれば簡単に日本の地図を表示させることができます。
※地図データはデモ用の簡易データを使用しています。実際はさらに詳細な地図を表示させることが可能です。
解説
このデモで使用したMapファイルです。各設定の意味はコード内にコメントとして記述してあるとおりですが、
基本的にはスケールバーとレイヤ1枚のシンプルな設定構成になっています。
#デモ用Mapファイル設定
MAP
STATUS ON # 地図を表示するかどうか。ほとんどの場合はON
UNITS DD # この地図の単位(緯度経度)
IMAGECOLOR 200 220 250 # 背景色 R G B
FONTSET "./fontfile" # フォント用ファイル
SHAPEPATH "./shapefile" # シェープファイルが保存されているディレクトリ
IMAGETYPE PNG # 地図画像を保存する形式
SCALEBAR # スケールバーオブジェクトの開始
STATUS embed # スケールバーを地図内に埋め込むという意味
POSITION LL # 左下に表示
STYLE 1 # 0 か 1 で表示方法を指定する
UNITS KILOMETERS # スケールバーの単位
SIZE 200 10 # スケールバーの大きさ(ピクセル)
COLOR 0 0 0 # スケールバーの色
#BACKGROUNDCOLOR 0 255 0 # STYLE が0の時に使用される
#IMAGECOLOR 255 255 255 # スケールバーの背景色
INTERVALS 4 # 線の間隔の数
TRANSPARENT ON #透明設定
LABEL # ラベルオブジェクトの開始
COLOR 0 0 0 # 文字の色
END
END # スケールバーのオブジェクトの終了
LAYER # ここからレイヤーの開始
NAME "sample1" # レイヤーを識別するための名前
DATA "t_ksjgyousei"
TYPE POLYGON # 図形の描画方法(POLYGONは多角形)
STATUS ON # レイヤーのステータス
CLASS # クラスオブジェクトの開始
COLOR 250 250 220 # 色
OUTLINECOLOR 100 100 100 # 輪郭の色
END
DEBUG ON
END
END
PHPのスクリプトで緯度・経度を受け取り、移動や尺度調整を行っています。
<?php
//デモ用PHPファイル
ini_set("display_errors", "On");
if (!extension_loaded("MapScript")) {
dl("./php_mapscript.so"); // エクステンションのロード
}
// 日本の最北端などの緯度経度情報
$max_lon = 153 + 59/60 + 11/3600; $min_lon = 122 + 56/60 + 1/3600;
$max_lat = 45 + 33/60 + 28/3600; $min_lat = 20 + 25/60 + 31/3600;
$zoom = 1;
// 拡大縮小のロジック
if (isset($_GET["max_lon"])) {
$max_lon = floatval($_GET["max_lon"]);
$min_lon = floatval($_GET["min_lon"]);
$max_lat = floatval($_GET["max_lat"]);
$min_lat = floatval($_GET["min_lat"]);
$zoom = intval($_GET["zoom"]);
}
$lon = $max_lon - $min_lon; $lat = $max_lat - $min_lat;
if (isset($_GET["zoomup"]) && $zoom < 10) {
$max_lon -= $lon / 4; $min_lon += $lon / 4;
$max_lat -= $lat / 4; $min_lat += $lat / 4;
$zoom ++;
}
if (isset($_GET["zoomdown"]) && $zoom > 1) {
$max_lon += $lon / 2; $min_lon -= $lon / 2;
$max_lat += $lat / 2; $min_lat -= $lat / 2;
$zoom --;
}
// 上下左右への移動のロジック
if (isset($_GET["up"])) {
$max_lat += $lat / 4; $min_lat += $lat / 4;
}
if (isset($_GET["down"])) {
$max_lat -= $lat / 4; $min_lat -= $lat / 4;
}
if (isset($_GET["left"])) {
$max_lon -= $lon / 4; $min_lon -= $lon / 4;
}
if (isset($_GET["right"])) {
$max_lon += $lon / 4; $min_lon += $lon / 4;
}
//MapScript部分
$map = ms_newMapObj("./demo.map");
$map->setSize(240, 240); // 地図の画像サイズの指定
// 地図を描画する緯度経度の指定
$map->setExtent($min_lon, $min_lat, $max_lon, $max_lat);
$hash = md5($min_lon . $min_lat . $max_lon . $max_lat . $zoom);
$image_file = "img/" . $hash .".png";
$image_path = dirname(__FILE__) . "/" .$image_file;
if (!is_file($image_path)) {
$img = $map->draw(); // 画像の作成
$img->saveImage($image_path); // 作成された画像の保存
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.png" type="image/png" />
<title>デモンストレーション</title>
</head>
<body>
<form action="<?php echo $_SERVER["SCRIPT_NAME"]?>" method=GET>
<input type=hidden name=max_lon value=<?php echo $max_lon?> />
<input type=hidden name=min_lon value=<?php echo $min_lon?> />
<input type=hidden name=max_lat value=<?php echo $max_lat?> />
<input type=hidden name=min_lat value=<?php echo $min_lat?> />
<input type=hidden name=zoom value=<?php echo $zoom?> />
<p align=center>
<input type=submit name=zoomup value="+">
<input type=submit name=zoomdown value="-">
<input type=submit name=left value="←">
<input type=submit name=up value="↑">
<input type=submit name=down value="↓">
<input type=submit name=right value="→">
</p>
<p align=center>
<img src="<?php echo $image_file ?>">
<p>
</form>
</body>
</html>
今回のデモのコードは以上のようにかなり短く、単純なものになっています。このように、単純に拡大縮小・移動のできる地図であれば、すぐに作成することができます。
また、携帯端末からでも地図の拡大縮小や移動をさせることも可能です。
このデモではデモ用地図データを使用しているため実用的な地図ではありませんが、
実際の運用の際にはアシアル日本地図データをご利用いただくことにより、
様々なデータが表示できるようになります。