dari88's diary

これから趣味にするプログラミング/PHP/javascript/kohana/CMS/web design/

電子国土WebシステムVer.4のテスト1：　国土地理院の背景地図に gpx と kml のルートをオーバーレイする方法

※ この記事のやり方は推奨できないことが判明しました。正しい書き方は次の記事を見てください。　13/12/03 追記

 

　電子国土WebシステムVer.4は現在試験公開中ですが、なかなか正式公開されませんね。ヤマレコダウンローダーの開発にてVer.3では背景地図に赤線を引かせることができず、くやしいのでVer.4とOpenLayersの検討をしています。

　まずはVer.4のサンプル集から「デフォルトデータセット(地図)を表示する」をたたき台にしてgpxやkmlのレイヤーをオーバーレイしてみました。結論から言うと試験公開中の電子国土WebシステムVer.4は何かが変です。単純なオーバーレイが出来ない！

 

問題点と対策

　上記の例題や、電子国土ポータルのHOMEのjavascriptを見るとOpenLayers APIのMapクラスからインスタンス'map'を作成する段階で真球メルカトル投影("EPSG:900913")と等経緯度投影("EPSG:4326")を定義していますが、この段階で定義すると何をどうしてもgpxやkmlをオーバーレイできません。試験公開中の”webtis_v4.js”に問題があるとしか思えません。対策としては背景地図のレイヤーを作る段階で定義します。

 

サンプルサイト

　今回の電子国土WebシステムVer.4のテスト1をサイトにアップしておきましたので、見てください。赤線がgpxで青線がこれを間引きしたkmlのオーバーレイです。実際に奥久慈男体山南ルートを歩いてきて採取したgpsデータを元にしています。オーバーレイの配置はピタリと合っています。

 

サンプルコード

　以下が今回のテストコードです。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js" charset="UTF-8"></script> 
        <script type="text/javascript" src="http://portal.cyberjapan.jp/sys/v4/webtis/webtis_v4.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="http://portal.cyberjapan.jp/sys/v4/css/webtis.css" type="text/css">
        <script type="text/javascript">
            function init() {

                var initCX = 140.424731;
                var initCY = 36.711636;
                var initZoomLv = 15;
                var projection900913 = new OpenLayers.Projection("EPSG:900913");
                var projection4326 = new OpenLayers.Projection("EPSG:4326");
                var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
                var restrictedExtent = maxExtent.clone();
                var maxResolution = 156543.0339;
                var options = {
                    controls: [
                        new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}}),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.KeyboardDefaults(),
                        new OpenLayers.Control.Attribution()
                    ],
//                    projection: projection900913,
//                    displayProjection: projection4326,
                    units: "m",
                    maxResolution: maxResolution,
                    maxExtent: maxExtent,
                    restrictedExtent: restrictedExtent
                };

                var map = new OpenLayers.Map('canvas', options);

                var webtisMap = new webtis.Layer.BaseMap("webtismap",
                        {
                            projection: projection900913,
                            displayProjection: projection4326
                        });


                var kmlLayer = new OpenLayers.Layer.Vector("KML Layer", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "track.kml",
                        format: new OpenLayers.Format.KML({
                            extractStyles: true,
                            extractAttributes: true,
                            maxDepth: 2
                        })
                    })
                });


                var gpxLayer = new OpenLayers.Layer.Vector("GPX Data", {
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "track-373349.gpx",
                        format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
                    }),
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    style: {fillColor: "darkred", strokeColor: "red", strokeWidth: 2, strokeOpacity: 0.5, pointRadius: 5},
                });


                map.addLayer(webtisMap);
                map.addLayer(kmlLayer);
                map.addLayer(gpxLayer);

                map.setCenter(new OpenLayers.LonLat(initCX, initCY).transform(projection4326, projection900913), initZoomLv);

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body onload="init();">
        <div id="canvas" style="width:1000px; height:800px">
        </div>
        <p>電子国土WebシステムVer.4のテスト1</p>
    </body>
</html>