OpenlayersとGeoExtで電子国土地図を使ってみる。 [Chapter 1]

OpenlayersとGeoExtで電子国土地図を使ってみる。 [Chapter 1]

おわび、プログラムコード内で¥が抜けてしまっているようです。これは、WordPressとdokuwiki pluginの相性の問題のようです。
気づいた部分は全角の'¥'に置き換えています。
現在、dokuwikiへの移動を進めていますので、今しばらくお待ちください。

さて、前回OpenLayersとGeoExtがセットアップできましたので、早速使ってみましょう。
定番のGooglemap電子国土地図v.4をGeoExtで表示させます。
電子国土地図の詳細情報は、こちらのHPを参照してください。

動作確認環境は、ms4wです。 linuxでも大丈夫だと思います。

準備

まずは、C:¥ms4w¥Apache¥htdocs内にtestと言うフォルダーを作成します。
この中にテストするhtmlとjsを入れていきます。

そして、C:¥ms4w¥httpd.d内にhttpd_test.confファイルを作成して、次のスクリプトを入力して、保存します。

Alias /test/ "C:/ms4w/Apache/htdocs/test/"

<Directory "C:/ms4w/Apache/htdocs/test/">
  AllowOverride None
  Options Indexes FollowSymLinks Multiviews
  Order allow,deny
  Allow from all
</Directory>

後は、apacheをrestartしてconfファイルを再読込させます。 忘れずに!!

まずはサンプルのテスト

とりあえずは、サンプルをコピーして、localサイドのOpenLayerとGeoExtで表示できるかのテストをします。

C:¥ms4w¥apps¥GeoExt-1.1¥examplesから次の2つのファイルをC:¥ms4w¥Apache¥htdocs¥testにコピーします。

  1. mappanel-div.html
  2. mappanel-div.js

次に、mappanel-div.htmlを修正します。

mappanel-div.htmlの修正後

<html>
    <head>
        <title>GeoExt MapPanel Example</title>
 
        <script type="text/javascript" src="http://localhost/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://localhost/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/ext-3.4.0/examples/shared/examples.css" />
        <script src="http://localhost/OpenLayers-2.11/OpenLayers.js"></script>
        <script type="text/javascript" src="http://localhost/GeoExt-1.1/script/GeoExt.js"></script>
 
        <script type="text/javascript" src="mappanel-div.js"></script>
 
    </head>
    <body>
        <h1>GeoExt.MapPanel with an Existing OpenLayers.Map</h1>
        <p>This example shows the how to create a MapPanel with a map that has
        already been created.  See <a href="mappanel-div.html">mappanel-div.html</a>
        for an example that creates the MapPanel without creating the map first.<p>
        <p>This example makes use of a CookieProvider. The MapPanel
        being a stateful component, if you reload the page the map should be
        at the same location as previously. Also the getState and
        applyState methods are overloaded so the size of the map
        panel is also restored when refreshing the page.</p>
        <p>The js is not minified so it is readable. See <a href="mappanel-div.js">mappanel-div.js</a>.</p>
        <div id="mappanel"></div>
        <input type="button" onclick="mapSizeUp()" value="bigger"></input>
        <input type="button" onclick="mapSizeDown()" value="smaller"></input>
    </body>
</html>

元のファイルと比べてくださいね。 localhostに置き換わっている部分が今回修正したところです。

次に、ブラウザーからhttp://localhost/test/mappanel-div.htmlとすれば、

blog.godo-tys.jp_wp-content_gallery_geoext_image05.jpg

が表示されます。
biggerボタンクリックでmappanelが大きくなり、smallerボタンクリックで小さくなります。
とりあえず、OK。

電子国土地図v4の表示

電子国土地図v.4のjavascript設定

電子国土ポータルサイトから、v4のjsをこちらからダウンロードします。

C:¥ms4w¥appsにV4source.zipを解凍してコピーします。
フォルダーの構成は、C:¥ms4w¥apps¥v4¥cssC:¥ms4w¥apps¥v4¥webtisとしています。

C:¥ms4w¥httpd.d内にhttpd_webtis_v4.confのconfファイルを作成します。
httpd_webtis_v4.confの内容は、

Alias /v4/ "C:/ms4w/apps/v4/"

<Directory "C:/ms4w/apps/v4/">
  AllowOverride None
  Options Indexes FollowSymLinks Multiviews
  Order allow,deny
  Allow from all
</Directory>

後は、apacheをrestartしてconfファイルを再読込させます。 忘れずに!!

電子国土地図v.4のサンプル表示

次に電子国土のポータルサイトのサンプルソースコードからhtmlファイル参考にC:ms4wApachehtdocstest内にdk_v4.htmlファイルを作成して、修正します。

dk_v4.htmlの修正後

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>デフォルトデータセット(地図)を表示する</title>
<script type="text/javascript" src="http://localhost/OpenLayers-2.11/OpenLayers.js" charset="UTF-8"></script>
<script type="text/javascript" src="http://localhost/v4/webtis/webtis_v4.js" charset="UTF-8"></script>
<link rel="stylesheet" href="http://localhost/v4/css/webtis.css" type="text/css">
<script type="text/javascript">
//<!--
/*グローバル変数の宣言ここから*/
//地図インスタンス
var map = null;
 
//初期の経度
var initCX = 140.0852778;
 
//初期の緯度
var initCY = 36.10416667;
 
//初期のズームレベル
//※ここで設定するズームレベルはデータセットの最小ズームレベルが0になる
//※デフォルトデータセットでは「ズームレベル5」が0になる
var initZoomLv = 0;
 
//真球メルカトル投影(電子国土WebシステムVer.4もこれに準拠)を定義
var projection900913 = new OpenLayers.Projection("EPSG:900913");
 
//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");
/*グローバル変数の宣言ここまで*/
 
/*地図の初期表示設定ここから*/
function init(){
	//真球メルカトル投影のときの最大範囲(単位はm)
	var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
 
	//真球メルカトル投影のときの最大範囲に範囲を制限
	var restrictedExtent = maxExtent.clone();
 
	//真球メルカトル投影のときの最大解像度
	var maxResolution = 156543.0339;
 
        //地図表示画面のオプション設定
	var options = {
		//「controls」を設定することで、デフォルトのコントロールを破棄してコントロールを再設定
		controls: [
			//地図マウスイベントのハンドル設定。
			new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}}),
 
			//左上のパンズームバーを設定
			new OpenLayers.Control.PanZoomBar(),
 
			//キーボードをデフォルトに設定
			new OpenLayers.Control.KeyboardDefaults(),
 
			//国土地理院著作表示
			//※OpenLayrsサイトを作るときは必ずこれを書くこと
			new OpenLayers.Control.Attribution()
		],
 
		//背景地図の地理座標系
		projection: projection900913,
 
		//表示の地理座標系
		displayProjection: projection4326,
 
		//背景地図の単位
		units: "m",
 
		//背景地図の最大解像度
		maxResolution: maxResolution,
 
		//背景地図の最大範囲
		maxExtent: maxExtent,
 
		//背景地図の表示制限範囲
		restrictedExtent: restrictedExtent
	};
 
	//OpenLayers APIのMapクラスからインスタンスを作成
	map = new OpenLayers.Map('map', options);
 
	//スケールバーコントロール表示(最大ピクセル150、下段単位無、EPSG:900913)
	map.addControl(new OpenLayers.Control.ScaleLine({maxWidth:150,bottomOutUnits: "", bottomInUnits: "",geodesic:true}));
 
	//電子国土WebシステムVer.4背景地図レイヤーインスタンスを作成。データセットは未指定で、デフォルトデータセットを利用
	webtisMap = new webtis.Layer.BaseMap("webtismap");
 
	//背景地図レイヤーをMapに追加
	map.addLayer(webtisMap);
 
	//初期の中心座標を指定(経緯度で入力して、内部的に真球メルカトル座標に変換して表示)
	map.setCenter(new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913), initZoomLv);
 
	//右クリックでブラウザのデフォルトのメニューが開かないようにする
	document.getElementById('map').oncontextmenu = function(e){
		e = e?e:window.event;
		if(e.preventDefault)	{
			e.preventDefault(); // For non-IE browsers.
		}else{
			return false; // For IE browsers.
		}
	}
}
 
/*地図の初期表示設定ここまで*/
//-->
</script>
</head>
<body onload="init();">
<div id="map" name="map" style="width:500px;height:500px;"></div>
</body>
</html>

C:¥ms4w¥apps¥v4¥css内にwebtis.cssファイルも作成しておきましょう。

@charset "utf-8";
 
/* 縮尺バー用 */
div.olControlScaleLine {
	background-color:#ffffff;
	/* for IE */
	filter:alpha(opacity=60);
	/* CSS3 standard */
	opacity:0.6;
}
 
div.olControlAttribution {
	font-size:12px;
	line-height:12px;
	bottom:5px;
}

UTF-8で保存してくださいね。

次に、ブラウザーからhttp://localhost/test/dk_v4.htmlとすれば、

blog.godo-tys.jp_wp-content_gallery_geoext_image04.jpg

が表示されます。
とりあえず、OK。

GooglemapをGeoExtで表示 

C:¥ms4w¥Apache¥htdocs¥testに以下のファイルを作成します。

  1. mappanel-googlemap.html
  2. mappanel-googlemap.js

mappanel-googlemap.htmlの作成

<html>
    <head>
        <title>GeoExt MapPanel Example Googlemap</title>
 
        <script type="text/javascript" src="http://localhost/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://localhost/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/ext-3.4.0/examples/shared/examples.css" />
        <script src="http://localhost/OpenLayers-2.12/OpenLayers.js"></script>
        <script type="text/javascript" src="http://localhost/GeoExt-1.1/script/GeoExt.js"></script>
        <script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
 
        <script type="text/javascript" src="mappanel-googlemap.js"></script>
 
    </head>
    <body>
        <h1>GeoExt.MapPanel with Googlemap</h1>
        <p>This example shows the how to create a MapPanel with a map that has
        already been created.  See <a href="mappanel-googlemap.html">mappanel-googlemap.html</a>
        for an example that creates the MapPanel without creating the map first.<p>
        <p>This example makes use of a CookieProvider. The MapPanel
        being a stateful component, if you reload the page the map should be
        at the same location as previously. Also the getState and
        applyState methods are overloaded so the size of the map
        panel is also restored when refreshing the page.</p>
        <p>The js is not minified so it is readable. See <a href="mappanel-googlemap.js">mappanel-googlemap.js</a>.</p>
        <div id="mappanel"></div>
        <input type="button" onclick="mapSizeUp()" value="bigger"></input>
        <input type="button" onclick="mapSizeDown()" value="smaller"></input>
    </body>
</html>

mappanel-googlemap.jsの作成

/** api: example[mappanel-googlemap]
*  Map Panel (in a Window)
*  -------------------------
*  Render a map panel in a Window.
*/
 
//初期の経度
var initCX = 138.727284;
 
//初期の緯度
var initCY = 35.360496;
 
//真球メルカトル投影
var projection900913 = new OpenLayers.Projection("EPSG:900913");
 
//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");
 
//mappanelの定義
var mapPanel, controls = [];
 
Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    //真球メルカトル投影のときの最大範囲(単位はm)
    var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
    //真球メルカトル投影のときの最大範囲に範囲を制限
    var restrictedExtent = maxExtent.clone();
    //真球メルカトル投影のときの最大解像度
    var maxResolution = 156543.0339;
 
    var map = new OpenLayers.Map();
    var gmaplayerRoad = new OpenLayers.Layer.Google(
            '道路地図',
            {numZoomLevels: 20},
            {visibility: true}
    );
    var gmaplayerHybrid = new OpenLayers.Layer.Google(
            '衛星写真',
            {type: google.maps.MapTypeId.HYBRID},
            {numZoomLevels: 20},
            {visibility: true}
    );
 
    map.addLayers([gmaplayerRoad, gmaplayerHybrid]);
    map.addControls(controls);
 
    mapPanel = new GeoExt.MapPanel({
        title: "GeoExt MapPanel",
        renderTo: "mappanel",
        stateId: "mappanel",
        height: 400,
        width: 600,
        map: map,
 
        //初期の中心座標を指定(経緯度で入力して、内部的に真球メルカトル座標に変換して表示)
        center: new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913),
        zoom: 10,
        //Googlemap地図の地理座標系
        projection: projection900913,
        //表示の地理座標系
        displayProjection: projection4326,
        //Googlemap地図の最大解像度
        maxResolution: maxResolution,
        //Googlemap地図の最大範囲
        maxExtent: maxExtent,
        //Googlemap地図の表示制限範囲
        restrictedExtent: restrictedExtent,
        //Googlemap地図の単位
        units: "m",
 
        // パネルサイズの変更
        getState: function() {
            var state = GeoExt.MapPanel.prototype.getState.apply(this);
            state.width = this.getSize().width;
            state.height = this.getSize().height;
            return state;
        },
        applyState: function(state) {
            GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
            this.width = state.width;
            this.height = state.height;
        }
    });
});
 
controls.push(
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 10}}),
        new OpenLayers.Control.KeyboardDefaults(),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.PanPanel(),
        new OpenLayers.Control.ZoomPanel()
    );
 
// functions for resizing the map panel
function mapSizeUp() {
    var size = mapPanel.getSize();
    size.width += 40;
    size.height += 40;
    mapPanel.setSize(size);
}
function mapSizeDown() {
    var size = mapPanel.getSize();
    size.width -= 40;
    size.height -= 40;
    mapPanel.setSize(size);
}

次に、ブラウザーからhttp://localhost/test/mappanel-googlemap.htmlとすれば、

blog.godo-tys.jp_wp-content_gallery_geoext_image06.jpg

が表示されます。
とりあえず、OK。 zoompanelが重なっているようで。。。
OpenLayers-2.10や2.11に変更してみるもの良いですね。

電子国土地図をGeoExtで表示

C:¥ms4w¥Apache¥htdocs¥testに以下のファイルを作成します。

  1. mappanel-dk_v4.html
  2. mappanel-dk_v4.js

mappanel-dk_v4.htmlの作成

<html>
    <head>
        <title>GeoExt MapPanel Example CyberJapan map</title>
 
        <script type="text/javascript" src="http://localhost/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://localhost/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://localhost/ext-3.4.0/examples/shared/examples.css" />
        <script src="http://localhost/OpenLayers-2.12/OpenLayers.js"></script>
        <script type="text/javascript" src="http://localhost/GeoExt-1.1/script/GeoExt.js"></script>
        <script type="text/javascript" src="http://localhost/v4/webtis/webtis_v4.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="http://localhost/v4/css/webtis.css" type="text/css">
        <script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
 
        <script type="text/javascript" src="mappanel-dk_v4.js"></script>
 
    </head>
    <body>
        <h1>GeoExt.MapPanel with CyberJapan map</h1>
        <p>This example shows the how to create a MapPanel with a map that has
        already been created.  See <a href="mappanel-dk_v4.html">mappanel-dk_v4.html</a>
        for an example that creates the MapPanel without creating the map first.<p>
        <p>This example makes use of a CookieProvider. The MapPanel
        being a stateful component, if you reload the page the map should be
        at the same location as previously. Also the getState and
        applyState methods are overloaded so the size of the map
        panel is also restored when refreshing the page.</p>
        <p>The js is not minified so it is readable. See <a href="mappanel-dk_v4.js">mappanel-dk_v4.js</a>.</p>
        <div id="mappanel"></div>
        <input type="button" onclick="mapSizeUp()" value="bigger"></input>
        <input type="button" onclick="mapSizeDown()" value="smaller"></input>
    </body>
</html>

mappanel-dk_v4.jsの作成

/** api: example[mappanel-dk_v4]
*  電子国土地図 ver.4の表示
*  http://portal.cyberjapan.jp/index.html
*  Map Panel (in a Window)
*  -------------------------
*  Render a map panel in a Window.
*/
 
//初期の経度
var initCX = 138.727284;
 
//初期の緯度
var initCY = 35.360496;
 
//真球メルカトル投影
var projection900913 = new OpenLayers.Projection("EPSG:900913");
 
//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");
 
//mappanelの定義
var mapPanel, controls = [];
 
Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    //真球メルカトル投影のときの最大範囲(単位はm)
    var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
    //真球メルカトル投影のときの最大範囲に範囲を制限
    var restrictedExtent = maxExtent.clone();
    //真球メルカトル投影のときの最大解像度
    var maxResolution = 156543.0339;
 
    var map = new OpenLayers.Map();
    //電子国土WebシステムVer.4背景地図レイヤーインスタンスを作成。
    //データセットは未指定で、デフォルトデータセットを利用
    webtisMap = new webtis.Layer.BaseMap("webtismap");
    map.addLayers([webtisMap]);
    map.addControls(controls);
 
    mapPanel = new GeoExt.MapPanel({
        title: "GeoExt MapPanel",
        renderTo: "mappanel",
        stateId: "mappanel",
        height: 400,
        width: 600,
        map: map,
 
        //初期の中心座標を指定(経緯度で入力して、内部的に真球メルカトル座標に変換して表示)
        center: new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913),
        zoom: 10,
        //Googlemap地図の地理座標系
        projection: projection900913,
        //表示の地理座標系
        displayProjection: projection4326,
        //Googlemap地図の最大解像度
        maxResolution: maxResolution,
        //Googlemap地図の最大範囲
        maxExtent: maxExtent,
        //Googlemap地図の表示制限範囲
        restrictedExtent: restrictedExtent,
        //Googlemap地図の単位
        units: "m",
 
        // パネルサイズの変更
        getState: function() {
            var state = GeoExt.MapPanel.prototype.getState.apply(this);
            state.width = this.getSize().width;
            state.height = this.getSize().height;
            return state;
        },
        applyState: function(state) {
            GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
            this.width = state.width;
            this.height = state.height;
        }
    });
});
 
controls.push(
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 10}}),
        new OpenLayers.Control.KeyboardDefaults(),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.PanPanel(),
        new OpenLayers.Control.ZoomPanel()
    );
 
// functions for resizing the map panel
function mapSizeUp() {
    var size = mapPanel.getSize();
    size.width += 40;
    size.height += 40;
    mapPanel.setSize(size);
}
function mapSizeDown() {
    var size = mapPanel.getSize();
    size.width -= 40;
    size.height -= 40;
    mapPanel.setSize(size);
}

次に、ブラウザーからhttp://localhost/test/mappanel-dk_v4.htmlとすれば、

blog.godo-tys.jp_wp-content_gallery_geoext_image07.jpg

が表示されます。
とりあえず、OK。 zoompanelが重なっているようで。。。
OpenLayers-2.10や2.11に変更してみるもの良いですね。
OpelayersとGooglemapの不具合も出ませんね? なぜだ???

最後に

Googlemapと電子国土地図は細かな部分は違いますが、地図を表示すると言う部分ではGeoExtで表示できると言うことがわかりました。

今回作成したサンプルをこちらにアップしておきます。使用する際は自己責任にて使って下さい。

今後は、いくつかのサンプルを参照しながら、手を加えていきたいと考えています。

おまけ

DBFの編集ソフトを作成してみました。
GISエンジンはMapWinGISを使っています。
ベクターに登録も行っています。

また、株式会社森林再生システムと共同開発でExcelGISも作成しておりますので、覗いてみてください。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.