GeoJSON n'apparaîtra pas sur Leaflet (1.0)

Question

J'essaie d'afficher un peu de GeoJSON sur ma carte, et cela ne fonctionne pas. Je tire des multipolygones complexes de la base de données, mais par souci de simplicité, j'ai essayé de construire un polygone de base à la main. Je ne peux pas le montrer non plus.

J'ai essayé de créer un nouveau panneau avec un zIndex de 10000 et d'y ajouter la couche en vain. J'ai essayé d'échanger lat/long au cas où je les inverserais d'une manière ou d'une autre, et cela n'a pas fonctionné non plus. J'utilise un poids de 10px pour m'assurer qu'il n'y a aucun moyen de le manquer.

Voici l'exemple de base où j'essaie juste d'ajouter un polygone qui relie Manhattan à une carte.

var mapDivId = 'map'; 
var leafletMap = L.map(mapDivId, 
       {'boxZoom': true, 
       'doubleClickZoom': false, 
       'scrollWheelZoom': true, 
       'touchZoom': true, 
       'zoomControl': true, 
       'dragging': true}); 

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
}); 
osm.addTo(leafletMap); 

var districtOutlineStyle = { 
    "color": "black", 
    "weight": "10px", 
    "opacity": "0.5" 
}; 

var overlaySimplePolygonAroundManhattan = function() { 
    xmin = 40.68291; 
    xmax = 40.87903; 
    ymin = -74.04772; 
    ymax = -73.90665; 

    geoJsonShape = {'type': "Polygon", 
        'coordinates': [[[xmin, ymin], [xmin, ymax], [xmax, ymax], [xmax, ymin], [xmin, ymin]]]}; 
    districtsOverlay = L.geoJSON(geoJsonShape, 
          {style: districtOutlineStyle}); 
    leafletMap.addLayer(districtsOverlay); 
}; 

overlaySimplePolygonAroundManhattan(); 

Une idée pour laquelle il n'affichera pas le polygone? Ceci est la fiche 1.1.0.

Merci!

Answer 1

Deux choses devraient aider:

1. Votre xMin/Max sont mélangés avec vous yMin/Max:

Donc, si vous avez pour commencer, vous ne trouverez pas votre polygone à moins de zoomer vers l'Antarctique.

xmin = 40.68291; // 40 degrees north, not east 
    xmax = 40.87903; 
    ymin = -74.04772; // 74 degrees west, not south 
    ymax = -73.90665; 

2. Vous n'avez pas besoin de spécifier pixels, dépliant attend un numéro coiffant le polygone. La brochure ne gère pas cette erreur avec élégance, ce qui entraîne l'absence de polygone visible.

   (je mis aussi le zoom initial et l'emplacement de centrage) Au total, cela donne un résultat comme:

var mapDivId = 'map'; 
 
var leafletMap = L.map(mapDivId, 
 
       {'boxZoom': true, 
 
       'doubleClickZoom': false, 
 
       'scrollWheelZoom': true, 
 
       'touchZoom': true, 
 
       'zoomControl': true, 
 
       'dragging': true}).setView([40.75, -73.97], 10); 
 
    
 

 
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
 
}); 
 

 
osm.addTo(leafletMap); 
 

 
var districtOutlineStyle = { 
 
    "color": "black", 
 
    "weight": 10, 
 
    "opacity": "0.5" 
 
}; 
 

 

 
var overlaySimplePolygonAroundManhattan = function() { 
 
    ymin = 40.68291; 
 
    ymax = 40.87903; 
 
    xmin = -74.04772; 
 
    xmax = -73.90665; 
 
    
 
    geoJsonShape = {"type": "Polygon", 
 
        "coordinates": [[[xmin, ymin],[xmax, ymin], [xmax, ymax], [xmin, ymax], [xmin, ymin]]]}; 
 
        
 
    districtsOverlay = L.geoJSON(geoJsonShape, {style: districtOutlineStyle}); 
 
    leafletMap.addLayer(districtsOverlay); 
 
    
 
    // Alternative approach: 
 
    //L.geoJSON(geoJsonShape,{style: districtOutlineStyle}).addTo(leafletMap); 
 
}; 
 

 

 
overlaySimplePolygonAroundManhattan();

#map { 
 
    width: 600px; 
 
    height: 400px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.css"/> 
 

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

Answer 2

Andrew est juste! C'est parce que j'ai spécifié des pixels au lieu d'un nombre pour le poids. Cela fonctionne très bien maintenant.

J'avais essayé plusieurs fois de changer lat/long, donc je savais que ce n'était pas seulement ça. Et c'était le code de débogage. Je pensais que l'extrait de code que j'avais posté les avait dans le bon ordre mais apparemment pas. Les vraies formes que j'affiche sont MultiPolygons tirées de GeoJSON de Postgres, j'étais donc confiant d'avoir la bonne lat/longue commande, même si elles étaient en arrière dans ma fonction de débogage. Dès que j'ai supprimé 'px', ma fonction pour afficher les vraies formes a aussi fonctionné.

Merci!