Hallo zusammen,
Ich bin ganz neu bei Leaflet.
Ich versuche, eine dynamicMapLayer einzurichten, die für jede Ebene im Map-Service ein Popup hat.
Alle Beispiele, die ich bisher gesehen habe, verwenden vorgefertigte Beispiele mit einfachen Layer-Definitionen. Ich benutze einen Map-Service mit mehr als zwei Dutzend Layern, von denen jeder eine eigene Menge an Feldern hat.
Was ich gerne machen möchte, ist Popup-Definitionen zu erstellen, die für jeden Layer unterschiedlich sind. Wo ich feststecke, ist, dass ich nicht weiß, wie man die Layer-Namen identifiziert, die in das featureCollection-Array aufgenommen werden.
Das ist der Code, den ich unten verwende. Er gibt ein Popup zurück, wenn er ein Feature mit den Feldern Facility Identifier und LegacyID erkennt.
Idealerweise hätte ich eine Methode, die basierend auf dem Layer-Namen (z.B. Sewer Manholes, Streets, Sewer Cleanout usw.) die entsprechenden Popup-Felder zurückgibt.
Kann mir jemand den richtigen Weg zeigen? Vielen Dank.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Learning Leaflet</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Leaflet von CDN laden -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
<style>
html, body, #map {
width : 100%;
height : 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
document.getElement
var map = L.map('map').setView([35.578, -82.50], 17);
<!-- L.esri.basemapLayer("Gray").addTo(map); -->
var networkInfrastructure = L.esri.dynamicMapLayer('http://gis.msdbc.org/arcgis/rest/services/InternalViewer/NetworkInfrastructureI/MapServer',{useCors: false}).addTo(map);
var networkArray = networkInfrastructure.getLayers();
networkInfrastructure.bindPopup(function(error, featureCollection) {
if (error || featureCollection.features.length === 0) {
alert("du hast es verpasst.");
return false;
} else {
var obj = featureCollection.features[1].properties;
// Popup-Info
var facilityID = obj["Facility Identifier"];
var legacyID = obj["LEGACYID"];
// Popup zurückgeben
return 'Facility ID: ' + facilityID + "<br>" +
'Legacy ID: ' + legacyID;
}
});
</script>
</body>
</html>
