Comment mettre en évidence une ligne choisie sur un dépliant?

Je veux dessiner une carte avec peu d'itinéraires tirés sur elle.

Je veux avoir un dropbox avec les numéros 1, .., n

Lorsqu'un élément de la boîte de dépôt est choisi, l'itinéraire correspondant est mis en surbrillance sur la carte.

Entrez la description de l'image ici

J'ai commencé à utiliser "leaflet".

Comment puis-je mettre en évidence une ligne? J'ai utilisé "poids", mais c'est plus une bordure d'une ligne. J'aimerais que la ligne soit plus audacieuse.

Entrez la description de l'image ici

Voici mon code:

document.onload = loadMap(); function loadMap() { var map = L.map('map').setView([37.8, -96], 4); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoiZW======V6ZTdlb2V5cyJ9.3HqHQ4BMRvSPaYe8ToA7YQ' }).addTo(map); var marker = L.marker([51.5, -0.09]).addTo(map); var myLines = [{ "type": "LineString", "properties": { "id": "1" } "coordinates": [ [-100, 40], [-105, 45], [-110, 55] ] }, { "type": "LineString", "properties": { "id": "2" } "coordinates": [ [-105, 40], [-110, 45], [-115, 55] ] }]; var myLayer = L.geoJson().addTo(map); myLayer.addData(myLines); geojson = L.geoJson(myLines, { onEachFeature: onEachFeature }).addTo(map); } function highlightFeature(e) { var layer = e.target; layer layer.setStyle({ weight: 25, color: '#ff3300', dashArray: '', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } } function resetHighlight(e) { geojson.resetStyle(e.target); layer.setStyle({ weight: 5, color: '#0000ff', dashArray: '', fillOpacity: 0.7 }); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, // click: zoomToFeature }); } $('select[name="dropdown"]').change(function() { var item = $(this).val(); alert("call the do something function on option " + item); //how to make the chosen line highlighted ?? });

weight propriété weight ne change pas la bordure de la ligne, elle change la largeur du trait en pixels. Vous obtenez un effet de bordure parce que vous ajoutez des lignes deux fois. Ici:

 myLayer.addData(myLines);

Et ici:

 geojson = L.geoJson(myLines, { onEachFeature: onEachFeature }).addTo(map);

Lorsqu'une polyligne est planée, le style de la couche supérieure est modifié, mais parce que vous ajoutez deux fois les polylignes, il reste encore une polyligne dans la couche inférieure. Comme il est décrit ici , l'opacité de course par défaut est de 0,5 (le réglage de fillOpacity est redondant pour la polyligne, pour la modification de la propriété d' opacity opacité de opacity utilisée). Polyline à partir de la couche supérieure devient semi-transparente, et cela fait l'illusion de l'effet de bordure.

Donc, vous pouvez simplement supprimer cette ligne myLayer.addData(myLines); Et obtenir le résultat attendu.

J'ai fait un violon , où votre exemple est corrigé.