dari88's diary

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

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

　その後、Ver.4 の javascript を調べていたら、オーバーレイの正しい書き方が判明しました。clickMenu.js で kml のオーバーレイを作っており、次のように書いています。

var kmlLayer1 = new OpenLayers.Layer.Vector("LonLatLine", {
styleMap: myLineStyles,
projection: projection4326 // KMLは緯度経度
});
map.addLayer(kmlLayer1);

 　おや？　projection が projection4326 ですね。map インスタンス作るときは projection900913 だったのに・・・。ここが落とし穴でした。projection と displayProjection の仕組みを理解していないのが問題のようです。

 

サンプルサイト

　正しい書き方によるテスト２をアップしました。

 

サンプルコード

<!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://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">
                var map = null;
                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");

                function init() {
                    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
                    };

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

                    map.addControl(new OpenLayers.Control.ScaleLine({maxWidth: 150, bottomOutUnits: "", bottomInUnits: "", geodesic: true}));

                    webtisMap = new webtis.Layer.BaseMap("webtismap");
                    map.addLayer(webtisMap);

                    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
                            })
                        }),
                        projection: projection4326
                    });
                    map.addLayer(kmlLayer);

                    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: 4, strokeOpacity: 0.5, pointRadius: 5},
                        projection: projection4326
                    });
                    map.addLayer(gpxLayer);

                    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:1000px;height:800px;"></div>
    </body>
</html>