MapBox auf (‚load‘, function() zeigt Daten, die ausgeblendet werden soll, wenn ich die Karte öffnen

ich die ‚Student Kommentare‘ Schicht als zunächst versteckt unter Verwendung eines setLayoutProperty Aufruf gesetzt haben, wie hier gesehenMapBox auf (‚load‘, function() zeigt Daten, die ausgeblendet werden soll, wenn ich die Karte öffnen

map.on('load', function() { 
 
map.setLayoutProperty('user-data-comments', 'visibility', 'none'); 
 
    map.setLayoutProperty('user-data-comments-text', 'visibility', 'none'); 
 
    });

Allerdings, wenn ich die interaktive Webmap öffnen, zeigt MapBox den Text, bevor er sich versteckt, wenn es sollte nur von Anfang versteckt erscheinen. Sie können den Webmap here finden. ich bin mir nicht sicher, ob dies ein Fehler ist oder ich muss meinen Code irgendwie neu schreiben, den Quellcode finden Sie unter here.

Lassen Sie mich wissen, was Sie denken. Danke!

Quelle

2017-12-29 Camila Andino

sollten Sie die Schicht Schaffung Logik innerhalb des Ladeereignis – gvmani

Mein Code Schichten bewegen in MapBox Studio erstellt verweist, so dass ich nicht eine spätere Erstellungslogik innerhalb des Codes selbst haben. Ich verwende einfach Java, um die vorhandenen Layer ein- und auszuschalten - bitte überprüfe den Quellcode! @ gvmani –

Probe von [https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/] genommen und modifizierte

mapboxgl.accessToken = 'pk.eyJ1IjoiY2FtaWxhYW5kaW5vIiwiYSI6ImNqMWlhbnlubDAxNHIyd2xtanQwZmZ3NTkifQ.QypsX075VYyKWFYilxAfxA'; 
 

 
var map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/mapbox/streets-v9', 
 
    zoom: 15, 
 
    center: [-71.97722138410576, -13.517379300798098] 
 
}); 
 

 
map.on('load', function() { 
 
    map.addSource('museums', { 
 
     type: 'vector', 
 
     url: 'mapbox://mapbox.2opop9hr' 
 
    }); 
 
    
 

 
    map.addSource('contours', { 
 
     type: 'vector', 
 
     url: 'mapbox://mapbox.mapbox-terrain-v2' 
 
    }); 
 
    map.addLayer({ 
 
     'id': 'contours', 
 
     'type': 'line', 
 
     'source': 'contours', 
 
     'source-layer': 'contour', 
 
     'layout': { 
 
      'visibility': 'visible', 
 
      'line-join': 'round', 
 
      'line-cap': 'round' 
 
     }, 
 
     'paint': { 
 
      'line-color': '#877b59', 
 
      'line-width': 1 
 
     } 
 
    }); 
 
}); 
 

 
var toggleableLayerIds = [ 'contours', 'museums' ]; 
 

 
for (var i = 0; i < toggleableLayerIds.length; i++) { 
 
    var id = toggleableLayerIds[i]; 
 

 
    var link = document.createElement('a'); 
 
    link.href = '#'; 
 
    link.className = i==1 ? '' :'active'; 
 
    link.textContent = id; 
 
    link.loaded = false; 
 
    link.onclick = function (e) { 
 
     var clickedLayer = this.textContent; 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     if(this.loaded === false){ 
 
     this.loaded= true; 
 
     map.addLayer({ 
 
     'id': 'museums', 
 
     'type': 'circle', 
 
     'source': 'museums', 
 
     'layout': { 
 
      'visibility': 'none' 
 
     }, 
 
     'paint': { 
 
      'circle-radius': 8, 
 
      'circle-color': 'rgba(55,148,179,1)' 
 
     }, 
 
     'source-layer': 'museum-cusco' 
 
    }); 
 
     } 
 
     var visibility = map.getLayoutProperty(clickedLayer, 'visibility'); 
 

 
     if (visibility === 'visible') { 
 
      map.setLayoutProperty(clickedLayer, 'visibility', 'none'); 
 
      this.className = ''; 
 
     } else { 
 
      this.className = 'active'; 
 
      map.setLayoutProperty(clickedLayer, 'visibility', 'visible'); 
 
     } 
 
    }; 
 

 
    var layers = document.getElementById('menu'); 
 
    layers.appendChild(link); 
 
}

#menu { 
 
     background: #fff; 
 
     position: absolute; 
 
     z-index: 1; 
 
     top: 10px; 
 
     right: 10px; 
 
     border-radius: 3px; 
 
     width: 120px; 
 
     border: 1px solid rgba(0,0,0,0.4); 
 
     font-family: 'Open Sans', sans-serif; 
 
    } 
 

 
    #menu a { 
 
     font-size: 13px; 
 
     color: #404040; 
 
     display: block; 
 
     margin: 0; 
 
     padding: 0; 
 
     padding: 10px; 
 
     text-decoration: none; 
 
     border-bottom: 1px solid rgba(0,0,0,0.25); 
 
     text-align: center; 
 
    } 
 

 
    #menu a:last-child { 
 
     border: none; 
 
    } 
 

 
    #menu a:hover { 
 
     background-color: #f8f8f8; 
 
     color: #404040; 
 
    } 
 

 
    #menu a.active { 
 
     background-color: #3887be; 
 
     color: #ffffff; 
 
    } 
 

 
    #menu a.active:hover { 
 
     background: #3074a4; 
 
    }

<html> 
 
<head> 
 
    <meta charset='utf-8' /> 
 
    <title>Show and hide layers</title> 
 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script> 
 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' /> 
 
    <style> 
 
     body { margin:0; padding:0; } 
 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
 
    </style> 
 
</head> 
 
<body> 
 

 

 

 
<nav id="menu"></nav> 
 
<div id="map"></div> 
 

 

 

 
</body> 
 
</html>

Quelle

2017-12-29 09:36:07 gvmani

Haben Sie den Link zu meiner Webkarte angeschaut? Wenn Sie es öffnen, werden Sie sofort sehen, worauf ich mich in der Frage bezogen habe. Wenn Sie den Link öffnen, erscheint der Text aus den Kommentaren für eine Sekunde und verschwindet dann - was ich nicht möchte! (Öffnen Sie diese: https://camilaandinod.github.io/Project-test/index.html) Auch, was Sie hier beziehen, habe ich in einer anderen Frage gefragt - siehe hier (https://stackoverflow.com/questions/ 48018703/mapbox-how-to-set-up-the-menu-so-das-nur-die-sichtbaren-Ebenen-sind-in-einem-s) –

@CamilaAndino, es wird einfacher sein, wenn Sie aktualisieren können deinen Style im Studio und setze die Sichtbarkeitseigenschaft auf none. Dann sollte es im Click-Event möglich sein, die Sichtbarkeit nach Bedarf zu ändern. – gvmani

MapBox auf (‚load‘, function() zeigt Daten, die ausgeblendet werden soll, wenn ich die Karte öffnen

Antwort

Verwandte Themen