<html>
<front>
<objectif jeu de caractères="utf-8" />
<titre>Ajouter une ligne GeoJSON</titre>
<objectif prénom="fenêtre" contenu="échelle initiale = 1, échelle maximale = 1, évolutive utilisateur = non" />
<scénario src="https://maps.flightmap.io/flightmapjs"></scénario>
<lien href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="feuille de style" />
<Catégorie>
corps {
marge: 0;
rembourrage: 0; }
#carte {
position: absolu ;
top: 0;
bas: 0;
largeur: 100%; }
</Catégorie>
</front>
<corps>
<div id="carte"></div>
<scénario>
var carte = neufs mapboxgl.Carte({
récipient: 'carte',
Catégorie: 'style-dark.json',
centre: [- 122.486052, 37.830348],
zoom: 15, accessToken = ' '
}); map.on('charge', fonction () { map.addLayer({
'identifiant': 'route',
'taper': 'ligne',
'la source': {
'taper': 'geojson',
'Les données': {
'taper': 'Caractéristique',
'Propriétés': {},
'géométrie': {
'taper': 'ChaîneLigne',
'coordonnées': [ [- 122.48369693756104, 37.83381888486939], [- 122.48348236083984, 37.83317489144141], [- 122.48339653015138, 37.83270036637107], [- 122.48356819152832, 37.832056363179625], [- 122.48404026031496, 37.83114119107971], [- 122.48404026031496, 37.83049717427869], [- 122.48348236083984, 37.829920943955045], [- 122.48356819152832, 37.82954808664175], [- 122.48507022857666, 37.82944639795659], [- 122.48610019683838, 37.82880236636284], [- 122.48695850372314, 37.82931081282506], [- 122.48700141906738, 37.83080223556934], [- 122.48751640319824, 37.83168351665737], [- 122.48803138732912, 37.832158048267786], [- 122.48888969421387, 37.83297152392784], [- 122.48987674713133, 37.83263257682617], [- 122.49043464660643, 37.832937629287755], [- 122.49125003814696, 37.832429207817725], [- 122.49163627624512, 37.832564787218985], [- 122.49223709106445, 37.83337825839438], [- 122.49378204345702, 37.83368330777276] ] } } },
'disposition': {
'jointure de ligne': 'tour',
'line-cap': 'tour'
},
'Peinture': {
'couleur de la ligne': '#ff0000',
'largeur de ligne': 8
} }); });
</scénario>
</corps>
</html>