DOM操作後に空のOpenLayersキャンバス

Question

ユーザーは、サイドバーにある機能にすばやく切り替えることができます。サイドバーの特定のdivをクリックすると、divをメインエリアに移動し、メインエリアのdivをサイドバーに移動する（スワップコンテンツ）。したがって、CSSクラスとそのdivのDOM位置を入れ替えるjavascript関数を実装しました。

var node1 = document.querySelector(".one"); 
var node2 = document.querySelector(".other"); 
node1.classList.toggle("other"); 
node1.classList.toggle("one"); 
node2.classList.toggle("one"); 
node2.classList.toggle("other"); 
var clone1 = node1.cloneNode(true); 
var clone2 = node2.cloneNode(true); 
node2.parentNode.replaceChild(clone1, node2); 
node1.parentNode.replaceChild(clone2, node1); 

たとえば、divの画像などでうまく動作します。単純なOpenLayersマップをそれらのdivの1つに入れると、マップをクリックしてメインエリアまたはサイドバーにスワップするまで、必要なように表示されます。空のキャンバス上で、コントロールと属性ボタン（少なくとも後者は機能しません）のみを取得します。

"use_strict"; 
var Map = {}; 
Map.locationLonLat = [0, 51.477222]; 
Map.zoom = 15; 

Map.initMap = function() { 
    var map = new ol.Map({ 
     target: "map", 
     layers: [ 
      new ol.layer.Tile({ 
       source: new ol.source.OSM(), 
       alpha: true, 
       isBaseLayer: true, 
      }), 
     ], 
     view: new ol.View({ 
      center: new ol.proj.fromLonLat(Map.locationLonLat), 
      zoom: Map.zoom, 
     }), 
    }); 
} 

私はおそらく必要なのは、マップの更新です（と私はStackOverflowの上で提供される方法のいくつかを試してみましたが、リフレッシュのように、レンダリング、再描画、updateSizeなど）が、私ももう一度マップを初期化しようとした（よう私はもともと） - 無駄に。

<div class="sidebar" onclick="Util.swapNodes(event); Map.initMap();"> 

何が起こっているのですか？

Answer 1

さて、それを修正しました。まず、私は、地図とそのボタンを保持するOperLayers生成divからDOMをクリアしなければなりませんでした（おそらく、別のDOM位置にある "古い"マップへの参照をクリアする必要がありました） ）;そのクラスはol-viewportです。

第2に、ノードをスワップした後（上のコードのように）、マップノードのIDも変更する必要がありました。少なくとも私は古いIDを直接「リフレッシュする」方法を見つけられませんでした。

var mapNode = document.querySelector(".map"); // finds the class 
if (mapNode.parentNode.classList.contains("one")) { 
    mapNode.id = "mapone"; // change the id 
    document.querySelector(".ol-viewport").remove(); // remove old div 
    map.setTarget("mapone"); // re-set target to new id 
} else if (mapNode.parentNode.classList.contains("other")) { 
    mapNode.id = ("mapother"); // change the id 
    document.querySelector(".ol-viewport").remove(); // remove old div 
    map.setTarget("mapother"); // re-set target to new id 
} 

：

だから、私がやったことは、このました