je suis passionné par les multiples composantes du web ce qui m'a conduit vers le webmapping, bon voilà mon problème : j'ai récupéré ce code sur un site il permet de faire une carte avec possibilité de cocher les couches avec les bibliothèque openlayers et Jquery. La plupart des tutoriels que je suis recommande de séparer les fichiers html, javascript et le fichier css. alors j'ai voulu séparer ce code suivant les 3 trois fichiers. et mon code fonctionne mais quand on coche une case l'interaction ne marche pas, je suppose que j'ai du commettre une erreur surtout sur l'intégration du jquery car c'est celui que je maitrise le moins. quelqu'un pourrait il m'aidé avec un peu de commentaire si possible. voici le code que je veux séparer dans trois fichiers : html, css, javascript
- Code: Tout sélectionner
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OpenLayers 3 Layer Switcher Example</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
html { width:100%; height:100%; margin:0; }
body { width:100%; height:100%; margin:0; font-family:sans-serif; }
#map { width:100%; height:100%; margin:0; }
#toolbox { position:absolute; top:8px; right:8px; padding:3px; border-radius:4px; color:#fff; background: rgba(255, 255, 255, 0.4); z-index:100; }
#layerswitcher { margin:0; padding:10px; border-radius:4px; background:rgba(0, 60, 136, 0.5); list-style-type:none; }
</style>
</head>
<body>
<div id="map"></div>
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> MapQuest Satellite</label></li>
<li><label><input type="radio" name="layer" value="1"> MapQuest Hybrid</label></li>
<li><label><input type="radio" name="layer" value="2"> MapQuest OSM</label></li>
<li><label><input type="radio" name="layer" value="3"> OSM</label></li>
</ul>
</div>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function switchLayer()
{
var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
}
$(function() { switchLayer() } );
$("#layerswitcher input[name=layer]").change(function() { switchLayer() } );
var layers = [];
layers[0] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) });
layers[1] = new ol.layer.Group({ layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }), new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'hyb'}) }) ] });
layers[2] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) });
layers[3] = new ol.layer.Tile({ source: new ol.source.OSM() });
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([ new ol.control.ScaleLine({ units:'metric' }) ]),
layers: layers,
view: new ol.View({
center: ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
</script>
</body>
</html>
SitemapIndex
Flux RSS