[OpenLayers]中央に十字線(センターマーカー)を表示する
OpenLayersで地図の中央に十字線(センターマーカー)を表示するサンプルです。十字線は任意に表示・非表示を切り替えることを可能にしました。
OpenLayers.jsのダウンロード
OpenLayer 2.13.1
http://openlayers.org/two/ <ダウンロード>
Zipファイルを展開後(解凍後)に使用するファイルはOpenLayers.jsとimgフォルダ、themeフォルダです。この3点があればサンプルは動作します。
サンプル
地図の中央に十字線を表示するサンプルです。リンクの「十字架を表示する」「十字架を表示しない」で表示を切り替えることが出来ます。
サンプルコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="OpenLayers.js"></script>
<script type="text/javascript">
// 座標系の設定
var projection3857 = new OpenLayers.Projection("EPSG:3857");
var projection4326 = new OpenLayers.Projection("EPSG:4326");
var map = null;
var cross_control = null;
// -------------------------------------------------------------------------
// マップの生成
//
// fx 経度(例：富士山 138.731388) ※1
// fy 緯度(例：富士山 35.362222)
// izoom 表示倍率(用途にもよりますが10ぐらいが目安)
// imaxZoomLevel 最大倍率(用途にもよりますが17ぐらいが目安)
//
// ※1 googleマップや地理院地図の検索では「緯度,経度」の順番です。
function init_map(fx,fy,izoom,imaxZoomLevel){
// マップの生成
map = new OpenLayers.Map({
div: "map",
projection: projection3857,
displayProjection: projection4326,
});
// レイヤーの生成
map.addLayer(new OpenLayers.Layer.XYZ(
"標準地図", // レイヤー名
"https://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", // url
{
// options(attribution:帰属,,minZoomLevel:最小倍率(未使用),maxZoomLevel:最大倍率)
attribution : "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoomLevel : imaxZoomLevel
}
));
// マップの中心を設定
map.setCenter(new OpenLayers.LonLat(
fx, // X:経度
fy // Y:緯度
).transform(projection4326, projection3857),// 座標系
izoom // デフォルトズームレベル
);
// 十字架コントロールの生成
create_cross_control();
}
// 十字架の生成
function create_cross_control(){
cross_control = new OpenLayers.Control();
cross_control.draw= function(){
// アイコンのサイズ
var iconsize = new OpenLayers.Size(32, 32);
// マップの中央座標の算出
var point = new OpenLayers.Pixel(map.getCurrentSize().w / 2 - (iconsize.w / 2),
map.getCurrentSize().h / 2 - (iconsize.h / 2));
// ユニークIDの生成
var uniqid = OpenLayers.Util.createUniqueID("petitmonte.com");
// イメージの生成
cross_control.div = OpenLayers.Util.createAlphaImageDiv(
uniqid, // ユニークID
point , // マップの中央座標
iconsize, // アイコンのサイズ
"test.gif", // アイコンファイル名
"absolute" // 絶対位置
);
return cross_control.div;
};
map.addControl(cross_control);
}
// 十字架の削除
function remove_cross_control(){
if (cross_control){
map.removeControl(cross_control);
}
cross_control = null;
}
// onresizeイベント
window.onresize = function(){
// 十字架の再生成
remove_cross_control();
create_cross_control();
}
// onloadイベント
window.onload = function() {
// マップの生成(経度、緯度、倍率、最大倍率)
init_map(138.731388,35.362222,12,18);
}
</script>
<style type="text/css">
/* 国土地理院の出典表示用 */
body {padding: 0; margin: 0}
div.olControlAttribution {
padding: 3px;
color:#000000;
background-color:#ffffff;
background-color:rgba(230,255,255,0.7);
font-size:12px;
line-height:14px;
bottom:5px;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- マップの表示エリア -->
<div id="map" style="height: 350px; width: 100%;"></div>
<!-- メッセージ -->
<div id="msg"><br />
<a href="#" onclick="remove_cross_control();create_cross_control();return false;">十字架を表示する</a>
<a href="#" onclick="remove_cross_control();return false;">十字架を表示しない</a>
</div>
</body>
</html>
十字線のアイコンは下記をダウンロードして下さい。サイズは48x48ですがプログラム側で32x32などに変更可能です。
(48x48)
※直リンクは禁止です。必ずダウンロードして使用してください。
※このアイコンは非商用・商用問わずにご利用可能です。
サンプルの解説
十字架は「new OpenLayers.Control();」で十字架用コントロールを作成後、マップに追加しています。十字架の描画部分はdrawイベントで行います。
ブラウザのサイズが変更するとマップサイズが変更される為、再描画する必要があります。その処理はOnResizeイベントで行っています。
動作環境
このサンプルは「OpenLayers2.13.1」で動作確認をしております。その他のバージョンですと動作しない場合もございますのでご了承ください。
OpenLayers関連記事
・国土地理院の地図をブログやWEBサイトで使用する
・地図に便利なコントロールを追加する1
・地図に便利なコントロールを追加する2
・複数のレイヤーを重ねてレイヤーを切り替え
・中央に十字線(センターマーカー)を表示する
・左右に切れ目のない地図を表示する
・緯度、経度、ズームレベルを取得する
・地図にマーカーを設定する
・マーカーにクリックイベントを設定する
・マーカーの説明をポップアップする
・KMLファイルを読み込む
公式リンク
・地理院タイルを用いた開発(国土地理院)
・OpenLayers2.13.1の解説(英語 -公式)
・OpenLayers2.13.1のexamples(英語 -公式)
プチモンテ ※この記事を書いた人
 | |
| 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～ | |
