OpenLayers 3中Bootstrap Accordion嵌入地图控件后失效问题

嘿，我明白你遇到的困扰了——把带折叠表格的自定义控件放进OpenLayers地图里就点不动，移出去就正常，这大概率是OpenLayers的事件拦截机制和你用的Bootstrap折叠逻辑冲突了。下面给你一步步解决：

核心原因 #

OpenLayers的地图容器（ol-map）会监听鼠标的pointerdown、click等事件，用来处理地图的拖拽、缩放等交互。当你的控件在地图内部时，这些事件会被地图优先捕获，导致Bootstrap的data-toggle="collapse"绑定的折叠事件根本没机会触发。

具体解决步骤 #

1. 确保自定义控件正确继承OpenLayers Control类 #

你的代码里缺失了继承逻辑，这是自定义OpenLayers控件的基础，缺失的话控件无法正确融入地图的事件系统。要在控件构造函数里添加继承代码：

app.WeatherControl = function (opt_options) {
  var options = opt_options || {};
  // 关键：继承ol.control.Control
  ol.control.Control.call(this, {
    element: weatherUI, // 把你的weatherUI作为控件元素
    target: options.target
  });

  // 后面是你原来创建weatherUI和表格的代码...
};
// 原型链继承
ol.inherits(app.WeatherControl, ol.control.Control);

2. 阻止控件元素的事件冒泡到地图 #

在你的折叠触发元素（也就是那个带data-toggle="collapse"的<tr>）上添加事件监听，阻止事件传播到地图容器，这样地图就不会拦截这个点击了：

// 找到那个可点击的tr元素
var clickableTr = weatherUI.querySelector('.clickable');
// 阻止pointerdown事件冒泡（OpenLayers主要监听这个事件）
clickableTr.addEventListener('pointerdown', function(e) {
  e.stopPropagation();
});
// 顺便也阻止click事件冒泡，确保万无一失
clickableTr.addEventListener('click', function(e) {
  e.stopPropagation();
});

3. 手动初始化Bootstrap折叠组件 #

因为你的表格是动态创建的DOM元素，Bootstrap不会自动给它绑定折叠事件，所以要在控件添加到地图后手动初始化：

// 当控件添加到地图后，初始化折叠
var weatherControl = new app.WeatherControl();
map.addControl(weatherControl);
// 手动初始化折叠
$('#accordion').collapse();

4. 可选：调整控件的CSS层级（防止被地图图层遮挡） #

虽然你说移到外部正常，但还是可以给控件加个更高的z-index确保它在最上层：

.weatherui {
  z-index: 1000; /* 比地图默认控件层级高就行 */
  /* 你的其他样式... */
}

修改后的完整代码片段示例 #

window.app = {}; 
var app = window.app; 

//Custom Controls 
app.WeatherControl = function (opt_options) { 
  var options = opt_options || {}; 

  //Weather Layers 
  var weatherUI = document.createElement('div'); 
  weatherUI.style.cursor = 'pointer'; 
  weatherUI.style.textAlign = 'center'; 
  weatherUI.className = 'weatherui ol-unselectable ol-control'; 
  weatherUI.id = 'weatherlayerid'; 
  weatherUI.title = 'Please Select a Weather Layer'; 

  var weatherText = document.createElement('div'); 
  weatherText.innerHTML = '<table style="background-color:white" id="weatherlayers"><tbody><tr data-toggle="collapse" data-target="#accordion" class="clickable"><th id="weathertilestitle"><i class="fa fa-globe" aria-hidden="true"></i> Weather Layers <i class="fa fa-sort" aria-hidden="true"></i></th></tr></tbody><tbody style="text-align: center" id="accordion" class="collapse"><tr><td id="layergroupnames">Common</td><td><input type="checkbox" id="wind_stream" data-opacity="1"><label for="wind_stream">Wind Stream</label></td><td><input type="checkbox" id="wind_barb" data-opacity="1"><label for="wind_barb">Wind Barbs</label></td><td><input type="checkbox" id="gust" data-opacity="0.3"><label for="gust">Wind Gust</label></td><td><input type="checkbox" id="air_temperature" data-opacity="1"> <label for="air_temperature">Air Temp.</label></td><td><input type="checkbox" id="surface_pressure" data-opacity="1"><label for="surface_pressure">Surface Pressure</label></td><td><input type="checkbox" id="precipitation" data-opacity="1"><label for="precipitation">Precipitation</label></td><td><input type="checkbox" id="precipitation_shaded" data-opacity="0.3"><label for="precipitation_shaded">Precipitation(S)</label></td><td><input type="checkbox" id="significant_wave_height" data-opacity="1"><label for="significant_wave_height">Wave Height</label></td></tr><tr><td id="layergroupnames">Marine</td><td><input type="checkbox" id="primary_wave_height_direction" data-opacity="1"><label for="primary_wave_height_direction">Wave Direction</label></td><td><input type="checkbox" id="primary_wave_period" data-opacity="0.3"><label for="primary_wave_period"></label>Wave Period</td><td><input type="checkbox" id="swell_height_direction" data-opacity="1"><label for="swell_height_direction">Swell Direction</label></td><td><input type="checkbox" id="swell_period" data-opacity="0.3"><label for="swell_period"></label>Swell Period</td><td><input type="checkbox" id="sea_surface_current" data-opacity="0.3"><label for="sea_surface_current"></label>Currents</td><td><input type="checkbox" id="sea_surface_temperature" data-opacity="1"><label for="sea_surface_temperature"></label>Sea Temp.</td><td><input type="checkbox" id="sea_ice_coverage" data-opacity="0.3"><label for="sea_ice_coverage"></label>Ice Coverage</td><td><input type="checkbox" id="sea_ice_thickness" data-opacity="1"><label for="sea_ice_thickness"></label>Ice Thickness</td></tr><tr><td id="layertime">Time</td><td><input type="radio" id="h0" class="timecheckbox" name="time" value="0h" onclick="TimeButtonClicked(this)" checked=""><label id="0h_label" for="0h">Current</label></td><td><input type="radio" id="h6" class="timecheckbox" name="time" value="6h" onclick="TimeButtonClicked(this)"><label id="6h_label" for="6h">6h</label></td><td><input type="radio" id="h12" class="timecheckbox" name="time" value="12h" onclick="TimeButtonClicked(this)"><label id="12h_label" for="12h">12h</label></td><td><input type="radio" id="h24" class="timecheckbox" name="time" value="24h" onclick="TimeButtonClicked(this)"> <label id="24h_label" for="24h">24h</label></td><td><input type="radio" id="h36" class="timecheckbox" name="time" value="36h" onclick="TimeButtonClicked(this)"><label id="36h_label" for="36h">36h</label></td></tr></tbody></table>';

  weatherUI.appendChild(weatherText);

  // 关键：继承ol.control.Control
  ol.control.Control.call(this, {
    element: weatherUI,
    target: options.target
  });

  // 阻止事件冒泡到地图
  var clickableTr = weatherUI.querySelector('.clickable');
  clickableTr.addEventListener('pointerdown', function(e) {
    e.stopPropagation();
  });
  clickableTr.addEventListener('click', function(e) {
    e.stopPropagation();
  });
};

// 原型链继承
ol.inherits(app.WeatherControl, ol.control.Control);

// 初始化控件并添加到地图
var map = new ol.Map({
  // 你的地图配置...
});
var weatherControl = new app.WeatherControl();
map.addControl(weatherControl);
// 手动初始化Bootstrap折叠
$('#accordion').collapse();

按照上面的步骤修改后，你的折叠表格控件应该就能在地图内部正常工作啦！

内容的提问来源于stack exchange，提问作者Mapster