http://gis.stackexchange.com/questions/166383

http://gis.stackexchange.com/questions/166383

by Pavlos Tsagkis

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.10.0/css/ol.css">
<script src="http://openlayers.org/en/v3.10.0/build/ol-debug.js"></script>
<title>Vector layer example</title>
<body>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a>

        <div id="popup-content"></div>
    </div>
    <select id="layer-select">
        <option value="AerialWithLabels" selected>Aerial with labels</option>
        <option value="Road">Road</option>
    </select>
</body>

JavaScript

var style = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0)'
    }),
    stroke: new ol.style.Stroke({
        color: '#000066',
        width: 1
    }),
});
var styles = [style];



function loadFeatures(response) {
    formatWFS = new ol.format.WFS(),
    sourceVector.addFeatures(formatWFS.readFeatures(response));
}


var layerVector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'http://openlayers.org/en/v3.8.2/examples/data/geojson/countries.geojson',
        format: new ol.format.GeoJSON(),
        wrapX: false
    })
});


var baseStyles = [
    'Road',
    'AerialWithLabels' ];
var baseLayers = [];
var i, ii;
for (i = 0, ii = baseStyles.length; i < ii; ++i) {
    baseLayers.push(new ol.layer.Tile({
        visible: false,
        preload: Infinity,
        source: new ol.source.BingMaps({
            key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
            imagerySet: baseStyles[i]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
        })
    }));
}
var lyrsToAdd = baseLayers.concat(layerVector);
var map = new ol.Map({
    layers: lyrsToAdd, //new ol.layer.Tile({source: new ol.source.OSM()}), layerVector],
    loadTilesWhileInteracting: true,
    target: document.getElementById('map'),
    view: new ol.View({
        //projection:projection
        center: ol.proj.transform(
        [-116, 42], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

var select = document.getElementById('layer-select');

function onChange() {
    var style = select.value;
    for (var i = 0, ii = baseLayers.length; i < ii; ++i) {
        baseLayers[i].setVisible(baseStyles[i] === style);
    }
}
$(".layer-select").change(function() {
  onChange();
});
select.addEventListener('change', onChange);
onChange();

var highlightStyleCache = {};

var featureOverlay = new...