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'，我的功能就顯示出真實的形狀了。

謝謝！