GeoJSON不会显示在传单上（1.0）

Question

我想在我的地图上显示一些GeoJSON，但它不工作。我从数据库中提取复杂的多边形，但为了简单起见，我尝试手工构建基本的多边形。我无法让它显示出来。

我试着创建一个zIndex为10000的新窗格，然后在那里添加图层无济于事。我尝试交换纬度/长度，以防我以某种方式扭转它们，而这也不起作用。我使用10像素的重量来确保没有办法可以错过。

这里是一个基本的例子，我只是试图添加一个将曼哈顿界定为地图的多边形。

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(); 

任何想法为什么它不会显示多边形？这是宣传单1.1.0。

谢谢！

Answer 1

两件事情应该有所帮助：

1. 你XMIN/Max是夹杂了你YMIN /最大值：

所以，如果你是放大开始，你不会找到你的多边形除非缩小到南极洲。

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

不需要指定像素，小叶被定型时多边形期望的数。传单不会优雅地处理这个错误，导致没有可见的多边形。

（我还设置了初始变焦和中心位置）总之，这给了像一个结果：

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

安德鲁是正确的！这是因为我为像素指定了像素而不是数字。它现在很好用。

我曾尝试交换经纬度多次，所以我知道这不仅仅是这样。那就是调试代码。我认为我发布的代码片段有正确的顺序，但显然不是。我展示的真实形状是MultiPolygons，从Postgres中抽取为GeoJSON，所以我确信我有正确的纬度/经度排序，即使他们在我的调试功能中倒退。只要我删除'px'，我的功能就显示出真实的形状了。

谢谢！