電子国土WebのページにGoogleマップを追加する方法
電子国土WebのVer.4は基本的にOpenLayersに準拠しているので、電子国土WebのページにGoogleマップのレイヤーを追加してみました。これが結構難しいんですね。で、難儀した点をメモしておきます。これは12月6日の日記の続きです。
難点1
電子国土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); } }
難点2
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";
これはベスト解でしょうね。
サンプルサイト
詳しいソースコードはこちらのデモページのソースを見てください。ヤマレコ用とコメントのある場所を見れば大概分かると思います。