電子国土WebのページにGoogleマップを追加する方法

　電子国土WebのVer.4は基本的にOpenLayersに準拠しているので、電子国土WebのページにGoogleマップのレイヤーを追加してみました。これが結構難しいんですね。で、難儀した点をメモしておきます。これは12月6日の日記の続きです。

難点１

　電子国土Webでは地理院地図を切り替えるたびに地理院地図のレイヤーを削除して新規にレイヤーを定義しています。このためGoogleマップのレイヤーを単純に追加しただけでは表示に混乱を来します。

　対策として、function changeMap()をhtmlに記述して再定義します。初期にmapに追加したgoogleマップを一旦削除して、地理院地図をmapに追加した後に再度mapに追加するように書き換えました。

function changeMap(mapid){
    // ヤマレコ用
    map.removeLayer(Google_Physical);
    map.removeLayer(Google_Streets);
    map.removeLayer(Google_Hybrid);
    map.removeLayer(Google_Satellite);

        if (!mapid) {
                return;
        }
        
        var tmpDataSet = dataSetObj.dataSet_Default;
        var overLayerZindex = 110;
        
        if(overLayer){
                map.removeLayer(overLayer);
                overLayer = null;
        }

        var overlayDataSet = null;
        var overlayName;

        switch (mapid){
                case 'Spring':  tmpDataSet = dataSetObj.dataSet_Spring; overlayName = "Color"; overlayDataSet = dataSetObj.dataSetOverlay_Color; break;
                case 'Summer':  tmpDataSet = dataSetObj.dataSet_Summer; overlayName = "Color"; overlayDataSet = dataSetObj.dataSetOverlay_Color; break;
                case 'Summer_n':        tmpDataSet = dataSetObj.dataSet_Summer_n; overlayName = "Color"; overlayDataSet = dataSetObj.dataSetOverlay_Summer_n; break;
                case 'Autumn':  tmpDataSet = dataSetObj.dataSet_Autumn; overlayName = "Color"; overlayDataSet = dataSetObj.dataSetOverlay_Color; break;
                case 'Autumn_n':        tmpDataSet = dataSetObj.dataSet_Autumn_n; overlayName = "Color"; overlayDataSet = dataSetObj.dataSetOverlay_Autumn_n; break;
                case 'Winter':  tmpDataSet = dataSetObj.dataSet_Winter; overlayName = "Color"; overlayDataSet = dataSetObj.dataSetOverlay_Color; break;
                case 'Grey':    tmpDataSet = dataSetObj.dataSet_Mono;   overlayName = "Grey";  overlayDataSet = dataSetObj.dataSetOverlay_Mono;  break;
                case 'Grey_n':  tmpDataSet = dataSetObj.dataSet_Mono_n;   overlayName = "Grey";  overlayDataSet = dataSetObj.dataSetOverlay_Mono_n;  break;

                case 'Season':  tmpDataSet = dataSetObj.dataSet_Season; break;
                case 'Blank':   tmpDataSet = dataSetObj.dataSet_Blank;          break;
                case 'Relief':  tmpDataSet = dataSetObj.dataSet_Relief; break;
                case 'Jaise':   tmpDataSet = dataSetObj.dataSet_Jaise;          break;
                case 'DJBMO':   tmpDataSet = dataSetObj.dataSet_Y2K7; overlayName = "IndexY2K7"; overlayDataSet = dataSetObj.dataSetOverlay_IndexY2K7; break;
                case 'NLII4':   tmpDataSet = dataSetObj.dataSet_YK88;           break;
                case 'NLII3':   tmpDataSet = dataSetObj.dataSet_YK84;           break;
                case 'NLII2':   tmpDataSet = dataSetObj.dataSet_YK79;           break;
                case 'NLII1':   tmpDataSet = dataSetObj.dataSet_YK74;           break;
                case 'DJBMM_n': tmpDataSet = dataSetObj.dataSet_Default_n;      break;
                case 'pale':    tmpDataSet = dataSetObj.dataSet_Pale;           break;
                case 'Default':
                default:                tmpDataSet = dataSetObj.dataSet_Default;        break;
        }

        var command = "";
        
        var baseZIndex = 100;
        if (webtisMap) {
                baseZIndex = webtisMap.getZIndex();
                map.removeLayer(webtisMap);
        }

        webtisMap = new webtis.Layer.BaseMap("地理院地図", {
                wrapDateLine: true,
                dataSet: tmpDataSet,
                errorImagePath: webtis.TILE_URL.NODATA
        });

        map.addLayer(webtisMap);
        webtisMap.setZIndex(baseZIndex);
        
        map.addLayers([Google_Physical, Google_Streets, Google_Hybrid, Google_Satellite]);  // ヤマレコ用
        
        setTimeout('webtisMap.redraw(true);', 3000);

        if (overlayDataSet != null) {
                overLayer = new webtis.Layer.BaseMap(overlayName, {
                        isBaseLayer: false,
                        dataSet: overlayDataSet,
                        wrapDateLine: true
                });
                map.addLayer(overLayer);
                overLayer.setZIndex(overLayerZindex);
                
                setTimeout('overLayer.redraw(true);', 3000);
        }
}

 

 難点２

　LayerSwitcherのアイコンの表示位置を変更するのが極めて困難でした。普通はstyle.cssのクラス.olControlLayerSwitcherに対して定義しているLayerSwitcherの配置をhtml内で再定義すれば良さそうなものです。しかし、電子国土Webではstyle.cssをjavascript内から読み込んでいるので、手に負えません。ネットで調べても対策は得られす、試行錯誤した結果次の結論に至りました。

    LayerSwitcher = new OpenLayers.Control.LayerSwitcher();
    map.addControl(LayerSwitcher);
    document.getElementById(LayerSwitcher.id).style.top="50px";   

これはベスト解でしょうね。

サンプルサイト

　詳しいソースコードはこちらのデモページのソースを見てください。ヤマレコ用とコメントのある場所を見れば大概分かると思います。