OpenLayers 3 Bootstrap 手风琴不工作

Question

我是 Openlayers 的新手！我想用手风琴 table 创建一个自定义控件。问题是当我单击控件 div 时，它无法正常工作。如果我删除地图外的 div 它工作正常。

我添加了以下代码片段来说明问题。

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><td><input type="radio" id="h48" class="timecheckbox" name="time" value="48h" onclick="TimeButtonClicked(this)"><label id="48h_label" for="48h">48h</label></td><td><input type="radio" id="h60" class="timecheckbox" name="time" value="60h" onclick="TimeButtonClicked(this)"><label id="60h_label" for="60h">60h</label></td><td><input type="radio" id="h72" class="timecheckbox" name="time" value="72h" onclick="TimeButtonClicked(this)"><label id="72h_label" for="72h">72h</label></td></tr></tbody></table><div style="display:none" id="graph-windbeaufort"> <div id="scale-title">Beaufort Scale</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">9</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">11</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">12</div></div></div><div style="display:none" id="graph-windgust"> <div id="scale-title">Gust - Beaufort Scale</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">9</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">11</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">12</div></div><div class="graph-section graph-level14"> <div class="graph-bar"></div><div class="graph-caption">13</div></div><div class="graph-section graph-level15"> <div class="graph-bar"></div><div class="graph-caption">14</div></div><div class="graph-section graph-level16"> <div class="graph-bar"></div><div class="graph-caption">15</div></div><div class="graph-section graph-level17"> <div class="graph-bar"></div><div class="graph-caption">16</div></div><div class="graph-section graph-level18"> <div class="graph-bar"></div><div class="graph-caption">17</div></div></div><div style="display:none" id="graph-precipitation"> <div id="scale-title">Precipitation Scale - mm/h</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">0.1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">0.2</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">0.4</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">0.7</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">20</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">40</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">70</div></div></div><div style="display:none" id="graph-waveheight"> <div id="scale-title">Wave & Swell Height(m)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">0.5</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">1.5</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">9</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level14"> <div class="graph-bar"></div><div class="graph-caption">11</div></div><div class="graph-section graph-level15"> <div class="graph-bar"></div><div class="graph-caption">12</div></div><div class="graph-section graph-level16"> <div class="graph-bar"></div><div class="graph-caption">13</div></div><div class="graph-section graph-level17"> <div class="graph-bar"></div><div class="graph-caption">14</div></div><div class="graph-section graph-level18"> <div class="graph-bar"></div><div class="graph-caption">15</div></div><div class="graph-section graph-level19"> <div class="graph-bar"></div><div class="graph-caption">16</div></div><div class="graph-section graph-level20"> <div class="graph-bar"></div><div class="graph-caption">17</div></div><div class="graph-section graph-level21"> <div class="graph-bar"></div><div class="graph-caption">18</div></div><div class="graph-section graph-level22"> <div class="graph-bar"></div><div class="graph-caption">19</div></div><div class="graph-section graph-level23"> <div class="graph-bar"></div><div class="graph-caption">20</div></div></div><div style="display:none" id="graph-waveperiod"> <div id="scale-title">Wave & Swell Period(s)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">8</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">12</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">14</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">16</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">18</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">20</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">22</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">24</div></div><div class="graph-section graph-level14"> <div class="graph-bar"></div><div class="graph-caption">26</div></div><div class="graph-section graph-level15"> <div class="graph-bar"></div><div class="graph-caption">28</div></div><div class="graph-section graph-level16"> <div class="graph-bar"></div><div class="graph-caption">30</div></div></div><div style="display:none" id="graph-currents"> <div id="scale-title">Currents(kn)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">0.2</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">0.5</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">1.5</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">2</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">2.5</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">3</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">4</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">5</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">6</div></div><div class="graph-section graph-level12"> <div class="graph-bar"></div><div class="graph-caption">7</div></div><div class="graph-section graph-level13"> <div class="graph-bar"></div><div class="graph-caption">8</div></div></div><div style="display:none" id="graph-icecover"> <div id="scale-title">Ice Coverage(%)</div><div class="graph-section graph-level1"> <div class="graph-bar"></div><div class="graph-caption">0</div></div><div class="graph-section graph-level2"> <div class="graph-bar"></div><div class="graph-caption">1</div></div><div class="graph-section graph-level3"> <div class="graph-bar"></div><div class="graph-caption">10</div></div><div class="graph-section graph-level4"> <div class="graph-bar"></div><div class="graph-caption">20</div></div><div class="graph-section graph-level5"> <div class="graph-bar"></div><div class="graph-caption">30</div></div><div class="graph-section graph-level6"> <div class="graph-bar"></div><div class="graph-caption">40</div></div><div class="graph-section graph-level7"> <div class="graph-bar"></div><div class="graph-caption">50</div></div><div class="graph-section graph-level8"> <div class="graph-bar"></div><div class="graph-caption">60</div></div><div class="graph-section graph-level9"> <div class="graph-bar"></div><div class="graph-caption">70</div></div><div class="graph-section graph-level10"> <div class="graph-bar"></div><div class="graph-caption">80</div></div><div class="graph-section graph-level11"> <div class="graph-bar"></div><div class="graph-caption">90</div></div></div>';
            weatherUI.appendChild(weatherText);

            $("div").on("click", 'input[id="wind_stream"]', function () {
                $("#graph-windbeaufort").toggle(this.checked);
            });

            $("div").on("click", 'input[id="wind_barb"]', function () {
                $("#graph-windbeaufort").toggle(this.checked);
            });

            $("div").on("click", 'input[id="gust"]', function () {
                $("#graph-windgust").toggle(this.checked);
            });

            $("div").on("click", 'input[id="precipitation_shaded"]', function () {
                $("#graph-precipitation").toggle(this.checked);
            });

            $("div").on("click", 'input[id="primary_wave_height_direction"]', function () {
                $("#graph-waveheight").toggle(this.checked);
            });

            $("div").on("click", 'input[id="swell_height_direction"]', function () {
                $("#graph-waveheight").toggle(this.checked);
            });

            $("div").on("click", 'input[id="primary_wave_period"]', function () {
                $("#graph-waveperiod").toggle(this.checked);
            });

            $("div").on("click", 'input[id="swell_period"]', function () {
                $("#graph-waveperiod").toggle(this.checked);
            });

            $("div").on("click", 'input[id="sea_surface_current"]', function () {
                $("#graph-currents").toggle(this.checked);
            });

            $("div").on("click", 'input[id="sea_ice_coverage"]', function () {
                $("#graph-icecover").toggle(this.checked);
            });

            $("div").on("click", "#weatherlayers input:radio", function (e) {
                map.overlayMapTypes.clear();
                var ly = $("#weatherlayers input[type='checkbox']:checked");
                $.each(ly, function (i, val) {
                    updateLayers(val);
                })
            });
            $("div").on("click", "#weatherlayers input:checkbox", function (e) {
                updateLayers(this);
            });

        ol.control.Control.call(this, {
            element: weatherUI,
            target: options.target
        });
    };
    ol.inherits(app.WeatherControl, ol.control.Control);


var oSM = new ol.layer.Tile({
  source: new ol.source.OSM({
    crossOrigin: null,
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  })
});
var layers = [
        oSM
      ];
      var map = new ol.Map({
      controls: ol.control.defaults().extend([
            new app.WeatherControl()
        ]),
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([-5.3525700, 36.1447400]),
          zoom: 6
        })
      });

.map {
        height: 400px;
        width: 100%;
      }
.ol-zoom {
    left: unset !important;
    right: .5em !important;
    top: unset !important;
    bottom: .5em !important;
}

.ol-attribution {
    left: .5em!important;
    right: unset!important;
}
/*Custom Control*/
.weatherui {
    top: 25px!important;
    left: .5em;
}

.ol-touch .weatherui {
    top: 30px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"/>

<div id="map" class="map"></div>

我也在 google 地图上尝试了类似的方法，效果很好。不知道是否与 openlayers 上的事件有关，或者与 bootstrap.

无关但有点有趣的事情

提前致谢...

Answer 1

我通过添加以下行解决了问题；

$('[data-toggle="collapse"]', weatherText).click(function (e) { e.preventDefault(); $('#accordion').toggle() });

它需要一个有趣的点击事件...

OpenLayers 3 Bootstrap 手风琴不工作

OpenLayers 3 Bootstrap accordion is not working

javascript

jquery

openstreetmap

twitter-bootstrap-3

openlayers-3