GeoJSON 不会显示在 Leaflet (1.0) 上

Question

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

我尝试创建一个 zIndex 为 10000 的新窗格并在那里添加图层但无济于事。我尝试交换纬度/经度以防我以某种方式颠倒它们，但这也不起作用。我使用了 10px 的权重来确保不会遗漏。

这是一个基本示例，我只是想将一个多边形将曼哈顿边界添加到地图上。

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/Max 混淆了：

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

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

1. 您不需要指定像素，当设置多边形样式时，传单需要一个数字。 Leaflet 显然没有优雅地处理这个错误，导致没有可见的多边形。

   （我还设置了初始缩放和居中位置）总而言之，结果如下：

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

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

我曾多次尝试交换纬度/经度，所以我知道不仅如此。那是调试代码。我认为我发布的代码 sn-p 使它们的顺序正确，但显然不是。我显示的真实形状是从 Postgres 中提取为 GeoJSON 的 MultiPolygons，所以我确信我在那里有正确的纬度/经度排序，即使它们在我的调试功能中倒退。删除“px”后，显示真实形状的功能也起作用了。

谢谢！