WMS und WFS laden und benutzerdefinierter Button

by Thomas B.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
    <div id="map" class="smallmap"></div>
    <div id="panel"></div>
</body>

CSS

#map {
    width: 400px;
    height: 400px;
    border: 1px solid #dddddd;
}
.Panel1 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 10px;
}
.Panel2 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 74px;
}
.Panel3 {
    width: 18px;
    height: 54px;
    cursor: pointer;
    right: 10px;
    top: 138px;
}
.firstItemInactive, .secondItemInactive {
    background: #30d5c8;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
}
.firstItemActive, .secondItemActive {
    background: #ffffdd;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
}
.olControlLayerSwitcher .layersDiv {
    background-color: #ff0000;
    height: 100%;
    padding: 5px 75px 5px 10px;
    width: 100%;
}
div.olMap {
    z-index: 0;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default;
}
div.olMapViewport {
    text-align: left;
    -ms-touch-action: none;
}
div.olLayerDiv {
    -moz-user-select: none;
    -khtml-user-select: none;
}
.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
    right: auto !important;
}
.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
    bottom: 15px !important;
}
/* GMaps should not set styles on its container */
 .olForeignContainer {
    opacity: 1 !important;
}
.olControlAttribution {
    font-size: smaller;
    right: 3px;
    bottom: 4.5em;
    position: absolute;
    display: block;
}
.olControlScale {
    right: 3px;
    bottom: 3em;
    display: block;
    position: absolute;
    font-size: smaller;
}
.olControlScaleLine {
    display: block;
    position: absolute;
    left: 10px;
    bottom: 15px;
    font-size: xx-small;
}
.olControlScaleLineBottom {
    border: solid 2px black;
    border-bottom: none;
    margin-top:-2px;
    text-align: center;
}
.olControlScaleLineTop {
    border: solid 2px black;
    border-top: none;
   ...

JavaScript

var map;
var layer, wms;

function init() {
    map = new OpenLayers.Map('map');
    wms = new OpenLayers.Layer.WMS(
        "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });
    var myStyle = {
        fill: true,
        fillColor: "#ff0000"
    };
    layer = new OpenLayers.Layer.Vector("WFS", {
        style: myStyle,
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS({
            url: "http://demo.opengeo.org/geoserver/wfs",
            featureType: "tasmania_roads",
            featureNS: "http://www.openplans.org/topp"
        })
    });

    map.addLayers([wms, layer]);
    map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);

        var panel_type2 = new OpenLayers.Control.Panel({
        displayClass: 'Panel2'
    });
    map.addControl(panel_type2);

    var redraw = new OpenLayers.Control.Button({
        displayClass: 'first',
        trigger: function () {
            layer.destroyFeatures();
            map.removeLayer(layer);
            var myStyle = {
                fill: true,
                fillColor: "#DFDFFF"
            };
            layer = new OpenLayers.Layer.Vector("WFS", {
                style: myStyle,
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.WFS({
                    url: "http://demo.opengeo.org/geoserver/wfs",
                    featureType: "tasmania_roads",
                    featureNS: "http://www.openplans.org/topp"
                })
            });

            map.addLayers([layer]);
        }
    });
    panel_type2.addControls([redraw]);
}