OpenLayers添加添加和删除叠加的功能？

Question

我正在尝试根据复选框选择创建切片源网址。我的项目是googlemaps，现在我将它移到openlayers。我无法弄清楚如何添加功能。它破坏了我的代码。下面的代码段显示了我的代码。我评论了函数部分bc它正在打破片段。

＆＃13;

＆＃13;

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.style.zIndex = '3';
            weatherUI.title = 'Please Select a Weather Layer';
        var weatherText = document.createElement('div');
        weatherText.style.zIndex = '3';
        weatherText.innerHTML = '<table style="background-color:rgba(0,60,136,.5)" 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.getOverlays().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);
        });  


/*function updateLayers(control) {
    var base_URL = 'http://weather.openportguide.de/tiles/actual/';
    var checked = control.checked;
    var time = $("#weatherlayers  input[type='radio']:checked").val();
    var opacity = $(control).data("opacity");
    var layername = control.id;
    for (_layer in map.getOverlays().getArray()) {
        if (map.getOverlays().getAt(_layer).title == layername + time) {
            if (checked == false) {
                map.removeOverlay(_layer);
                return;
            }
        }
    }
    if (checked == false)
        return;
    var weatheroverlaylayer = new ol.layer.Tile({
            title: layername + time,
            visible: false,
            source: new ol.source.XYZ({
                url: base_URL + layername + "/" + time + "/" + "{z}/{x}/{y}.png",
            })
        }),

};
*/

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

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

＆＃13;

.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;
}

input[type="checkbox"] {
    cursor: pointer;
    -webkit-appearance: none;
    background: #ff5f5f;
    border-radius: 1px;
    box-sizing: border-box;
    position: relative;
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    border-width: 0;
    transition: all .3s linear;
    margin-top: 0px !important;
    vertical-align: initial;
}

input[type="checkbox"]:checked {
    background-color: #2ECC71;
}

input[type="checkbox"]:focus {
    outline: 0 none;
    box-shadow: none;
}

label {
    font-weight: 500 !important;

}

td {
    padding-right: 9px !important;
    text-align: left !important;
    color: white !important;
}

.g-navionics-overlay-logo, .jnc-navionics-overlay-logo {
    bottom: 0px !important;
    left: 50% !important;
}

#scale-title {
    font-size: larger;
    font-weight: 700
}

#map {
    width: 100%;
    height: 550px
}

#leftpaneltitle{
    text-align: center
}

#uploadbutton, #deletebutton {
    position: relative;
    margin-top: 25px;
}

#inputfileupload, #inputdeletefile {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    background-color: transparent;
    color: transparent;
}

#weathertilestitle {
    font-size: 18px;
    color: white;
    padding: 5px

}

#weathertilestitle2 {
    font-size: 18px;
    color: white;
    padding: 5px
}

#weathermapdiv {
    top: 110px !important
}

#planmapdiv {
    top: 60px !important;
    left: 0px !important;
    
}

#calculationmapdiv {
    top: 75px !important;
    left: 0px !important;
}

#positionmapdiv {
    top: 60px !important;
    right: 0px !important;
}

#layergroupnames {
    font-size: 14px;
    font-weight: 600;
    color: white
}

#layertime {
    font-size: 14px;
    font-style: italic;
    color: white;
    font-weight: 600
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何让我的updatelayer功能适用于openlayers？

提前致谢...

Answer 1

我不确定您是否要创建叠加层，我不认为您在getAt()使用了if (map.getOverlays().getAt(_layer).title == layername + time)方法。

如果您要创建叠加层，请尝试为它们添加ID，以便您可以使用getOverlayById方法获取叠加层。然后，您可以使用addOverlay(overlay)和removeOverlay(overlay)这样的方法

function updateLayers(control) {
    //YOUR CODE
    var overlay = map.getOverlayById(id);
    if(CONDITION) {
        map.removeOverlay(overlay);
    }
    //YOUR CODE
}