DOM 操作后清空 OpenLayers 画布答案

【问题标题】：Empty OpenLayers canvas after DOM manipulationDOM 操作后清空 OpenLayers 画布
【发布时间】：2017-07-30 08:12:34
【问题描述】：

我希望用户能够快速切换到位于边栏中的功能。当 sHe 单击侧边栏中的特定 div 时，我希望该 div 移动到主区域，而主区域中的 div 移动到侧边栏（交换内容）。因此，我实现了一个 javascript 函数，用于交换这些 div 的 css 类和 DOM 位置。

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

虽然我可能只需要刷新地图（我尝试了 Stackoverflow 上提供的一些方法，如刷新、重绘、渲染、updateSize 等），但我也尝试再次初始化地图（就像我最初所做的那样） - 无济于事。

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

知道这里发生了什么吗？

【问题讨论】：

标签： javascript dom html5-canvas openlayers

【解决方案1】：

好的，解决了。重点是做两件事：

首先，我必须从 OperLayers 生成的 div 中清除 DOM，该 div 包含地图及其按钮（并且可能是对不同 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
}

【讨论】：