Leaflet GeoJSON赢得'；单张上的t节目（1.0）

我试图在地图上显示一些GeoJSON，但它不起作用。我正在从数据库中提取复杂的多面体，但为了简单起见，我尝试手动构造一个基本多边形。我也看不出来

我尝试创建一个zIndex为10000的新窗格，并在其中添加图层，但没有效果。我尝试交换lat/long，以防我以某种方式反转它们，但这也不起作用。我使用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();

var-mapDivId='map'；
var-map=L.map（mapDivId，
{'boxZoom'：对，
“双击缩放”：false，
“scrollWheelZoom”：正确，
“touchZoom”：正确，
“zoomControl”：正确，
“拖动”：true}）；
var osm=L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”
});
osm.addTo（单张地图）；
var DistrictionOutlineStyle={
“颜色”：“黑色”，
“重量”：“10px”，
“不透明度”：“0.5”
};
var overlaysample=function（）{
xmin=40.68291；
xmax=40.87903；
ymin=-74.04772；
ymax=-73.90665；
geoJsonShape={'type'：“Polygon”，
‘坐标’：[[xmin，ymin]，[xmin，ymax]，[xmax，ymax]，[xmax，ymin]，[xmin，ymin]]}；
districtsOverlay=L.geoJSON（geoJsonShape，
{style:districtOutlineStyle}）；
单张地图。添加图层（districtsOverlay）；
};
overlaysimplementaroundmanhattan（）；

知道为什么它不会显示多边形吗？这是传单1.1.0

---

谢谢

有两件事应该有帮助：

您的xMin/Max与您的yMin/Max混淆了：

因此，如果您在开始时放大，除非缩小到南极洲，否则将找不到多边形

  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-map=L.map（mapDivId，
{'boxZoom'：对，
“双击缩放”：false，
“scrollWheelZoom”：正确，
“touchZoom”：正确，
“zoomControl”：正确，
“拖动”：true}）.setView（[40.75，-73.97]，10）；
var osm=L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”
});
osm.addTo（单张地图）；
var DistrictionOutlineStyle={
“颜色”：“黑色”，
“重量”：10，
“不透明度”：“0.5”
};
var overlaysample=function（）{
ymin=40.68291；
ymax=40.87903；
xmin=-74.04772；
xmax=-73.90665；
geoJsonShape={“类型”：“多边形”，
“坐标”：[[[xmin，ymin]，[xmax，ymin]，[xmax，ymax]，[xmin，ymax]，[xmin，ymin]]}；
districtsOverlay=L.geoJSON（geoJsonShape，{style:districtOutlineStyle}）；
单张地图。添加图层（districtsOverlay）；
//备选办法：
//geoJSON（geoJsonShape，{style:districtOutlineStyle}）.addTo（单张地图）；
};
overlaysimplementaroundmanhattan（）
#地图{
宽度：600px；
高度：400px；
}

安德鲁是对的！这是因为我为权重指定了像素，而不仅仅是一个数字。现在效果很好

我多次尝试交换lat/long，所以我知道这不仅仅是这样。这就是调试代码。我认为我发布的代码片段的顺序是正确的，但显然不是。我显示的真实形状是从Postgres中提取为GeoJSON的多多边形，因此我相信我在那里有正确的lat/long顺序，即使它们在我的调试函数中是反向的。一旦我删除了“px”，我的显示真实形状的功能也起了作用

谢谢大家!
 很高兴解释您的问题的确切原因！请注意，它更适合作为对答案的评论，以查明根本原因。感谢别人的方法就是接受帮助你的答案。@ghybs我刚才也说过了。我希望它能让你更好地编排评论的格式，让它们更长。这就是我最初没有把它作为评论的原因。安德鲁是对的！这是因为我为权重指定了像素，而不仅仅是一个数字。现在效果很好。我多次尝试交换lat/long，所以我知道这不仅仅是这样。这就是调试代码。我认为我发布的代码片段的顺序是正确的，但显然不是。我显示的真实形状是从Postgres中提取为GeoJSON的多多边形，因此我相信我在那里有正确的lat/long顺序，即使它们在我的调试函数中是反向的。一旦我删除了“px”，我的显示真实形状的功能也起了作用。