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 중 하나에 넣으면 맵을 클릭하고 메인 영역 또는 사이드 바에 스왑 할 때까지 필요한대로 표시됩니다. 빈 캔버스에서 컨트롤 및 속성 버튼 (적어도 후자는 작동하지 않음) 만 표시됩니다.

"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, 
     }), 
    }); 
} 

아마 필요가 맵 새로 고침 (내가 새로 고침과 같은 유래에서 제공되는 몇 가지 방법을 시도, 렌더링, updateSize 등을 다시 그리기) 동안, 나는 또한 같은 (지도를 다시 초기화 시도 나는 원래) - 아무 소용이 없습니다.

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

여기 무슨 일이 벌어지고 있는지 궁금하십니까?

Answer 1

그래, 해결 됐어. 요점은 두 가지 일을하는 것이 었습니다.

먼저지도와 버튼을 보유하고있는 OperLayers 생성 div에서 DOM을 삭제해야했습니다 (다른 DOM 위치의 '이전'지도에 대한 참조 일 수도 있음).); 그 클래스는 ol-viewport입니다.

둘째, 노드를 교체 한 후 (위 코드에서와 같이)지도 노드의 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 
} 

:

그럼, 내가 한 것은이 있었다