2016-11-15 91 views
0

我想熟悉單張地圖,但是我找不到他們的教程非常直觀。我一直在使用他們的geojson教程,並查看他們示例的源代碼,嘗試將我自己的數據添加到我創建的地圖中,但是我沒有成功進行多邊形顯示。將JSON圖層添加到單張地圖

HTML:

<!DOCTYPE html > 

<html> 
<head> 

<title>Leaflet Ex</title> 

<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
<script src="creek.js" type="text/javascript"></script> 

</head> 

<body> 

<div id="mapid" style="width: 1000px; height: 700px;"></div> 

<script type="text/javascript"> 
     var map = L.map('mapid').setView([49.2485, -122.9995], 15); 

     L.tileLayer('https://api.mapbox.com/styles/v1/***/civ43lux700032iqp0990mgfn/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGd3YWx0b24iLCJhIjoiSUZURmlaUSJ9.FLL81KvyJ3kCFiUbUgCAWg', { 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
      maxZoom: 18, 
     }).addTo(map); 

     L.geoJson(creek, { 
      style: function (feature) { 
       return feature.properties && feature.properties.style; 
      } 
     }).addTo(map); 

</script> 

</body> 

</html> 

JSON:

var creek = { 

"type": = "Feature", 
"properties": { 
    "AREA":4575.273, 
    "PERIMETER":1396.149, 
    "CREEK_":2, 
    "CREEK_ID":5, 
    "TYPE":"water", 
    "CODE":"Guichion Creek" 
    "style": { 
     weight: 1, 
     color: "#000", 
     opacity: 1, 
     fillColor: "#0D00F2", 
     fillOpacity: 0.7 
    } 
} 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [ 
         [ 
          [500001.59375,5455104],[500001.84375,5455110],[500010.09375,5455109.5],[500012.5,5455105.5],[500013.15625,5455100.5],[500013.78125,5455094],[500014.4375,5455085.5],[500014.4375,5455080],[500014.4375,5455076],[500013.5625,5455073.5],[500012.28125,5455068.5],[500010.75,5455065.5],[500008.59375,5455062.5],[500006.4375,5455059],[500004.90625,5455057],[500004.90625,5455049],[500004.90625,5455042.5],[500005.34375,5455038],[500006,5455031.5],[500006,5455028.5],[500006.4375,5455024.5],[500007.5,5455021],[500009.25,5455016.5],[500010.53125,5455014],[500010.96875,5455010],[500011.1875,5455005],[500011.84375,5454999.5],[500012.28125,5454991.5],[500013.78125,5454982.5],[500015.53125,5454975.5],[500016.84375,5454969],[500018.78125,5454964.5],[500019.875,5454959.5],[500022.25,5454947.5],[500023.96875,5454941.5],[500025.71875,5454936.5],[500026.375,5454928],[500027.25,5454921.5],[500026.59375,5454910.5],[500026.15625,5454906],[500026.375,5454893.5],[500027.03125,5454887],[500027.03125,5454881],[500027.25,5454876],[500027.875,5454871],[500028.96875,5454868.5],[500032.4375,5454864],[500033.96875,5454861],[500034.59375,5454856.5],[500033.75,5454851.5],[500031.125,5454847],[500028.75,5454842],[500026.59375,5454840.5],[500023.34375,5454838],[500020.5,5454836],[500019.65625,5454831.5],[500019.21875,5454826],[500017.46875,5454820.5],[500017.46875,5454814],[500016.40625,5454807],[500015.3125,5454801],[500014.21875,5454796],[500014,5454790.5],[500013.15625,5454786],[500013.5625,5454779],[500012.71875,5454775],[500011.40625,5454770.5],[500010.96875,5454760],[500011.1875,5454744],[500011.40625,5454734],[500010.53125,5454727.5],[500009.03125,5454721],[500008.375,5454712.5],[500006.4375,5454702],[500005.34375,5454694],[500004.46875,5454687],[500003.59375,5454683],[500003.375,5454673],[500003.15625,5454667],[500001.65625,5454659],[500000.78125,5454650.5],[500000.125,5454643],[499999.28125,5454639],[499998.40625,5454634.5],[499997.75,5454629.5],[499997.09375,5454624.5],[499996.21875,5454621.5],[499995.375,5454617.5],[499993.1875,5454613],[499991.25,5454609],[499991.03125,5454602.5],[499990.375,5454597.5],[499988,5454592],[499986.6875,5454588.5],[499986.03125,5454583.5],[499985.8125,5454578],[499984.53125,5454572],[499983.4375,5454561.5],[499981.9375,5454555],[499980.40625,5454550],[499980.40625,5454542],[499980.84375,5454532.5],[499978.6875,5454522.5],[499978.46875,5454517],[499977.375,5454514],[499971.9375,5454506],[499965.65625,5454499],[499958.28125,5454491],[499953.09375,5454486.5],[499947.03125,5454483],[499938.125,5454478],[499930.53125,5454474.5],[499922.53125,5454469.5],[499916.65625,5454464],[499914.0625,5454467],[499918.40625,5454470],[499922.75,5454474],[499929.03125,5454478.5],[499931.1875,5454479.5],[499935.09375,5454480],[499941.59375,5454484.5],[499952.65625,5454491.5],[499958.5,5454498.5],[499964.15625,5454504],[499968.46875,5454508],[499973.46875,5454523.5],[499975.40625,5454531.5],[499976.28125,5454546.5],[499978.46875,5454556],[499979.53125,5454566],[499981.9375,5454585],[499985.625,5454599.5],[499988.21875,5454615],[499992.125,5454629],[499994.9375,5454642],[499998.625,5454653],[499998.40625,5454660],[500000.78125,5454674.5],[500001,5454688.5],[500001.65625,5454700.5],[500003.59375,5454709],[500005.5625,5454724],[500005.125,5454736.5],[500005.125,5454756],[500007.28125,5454782],[500008.375,5454798.5],[500010.09375,5454809.5],[500014.21875,5454830.5],[500018.125,5454848],[500019.875,5454859.5],[500022.03125,5454864],[500022.46875,5454886.5],[500022.6875,5454903.5],[500022.03125,5454928],[500020.71875,5454935.5],[500017.46875,5454940.5],[500015.3125,5454962.5],[500011.1875,5454977],[500005.78125,5454990.5],[500005.78125,5454995],[500005.5625,5455005.5],[500003.8125,5455011.5],[500001,5455019.5],[499995.59375,5455034],[499990.8125,5455050.5],[499985.8125,5455062],[499983.65625,5455065.5],[499984.09375,5455078],[499986.25,5455080.5],[499990.15625,5455083.5],[499995.15625,5455090.5],[499999.90625,5455098],[500001.59375,5455104] 
         ] 
        ] 
} 
}; 

任何幫助搞清楚我的問題是,將不勝感激!

+0

這是無效的JSON。這應該是一個紅旗或許:''type「:=」Feature「,' – WillardSolutions

+0

此外,樣式屬性名稱(」weight「,」color「...)應該用引號 –

回答

1

錯字,就在這裏:

"type": = "Feature", 

檢查object initializer syntax in JS,公告不存在的=操作者的使用在那裏。

將來,使用諸如JSONlintGeoJSONLint之類的工具來檢查JSON/GeoJSON的有效性。儘可能避免手動編寫JSON/GeoJSON。使用瀏覽器的調試功能來捕捉那樣的錯誤。


除此之外,注意座標系此L.LatLng

var map = L.map('mapid').setView([49.2485, -122.9995], 15); 

而在你GeoJSON的座標:

[500001.59375,5455104], ... 

這些肯定不是經緯度座標。從它的外觀來看,它們應該是某種UTM座標(假東和北和500,000和5000000)。

按照GeoJSON specs,特別section 4 of RFC 7946

座標參考系爲所有以GeoJSON座標是 地理座標參照系統,採用世界大地測量 系統1984(WGS 84)[WGS84]基準,經度和緯度單位爲 的十進制度數。

換句話說,如果您想要符合GeoJSON標準,請在WGS84(AKA EPSG:4326)中將座標轉換爲經緯度。就像現在一樣,宣傳單將嘗試在西經50萬度,北經5450000度的地方有一個點,這絕對沒有意義。

轉換您的座標。如果您對如何實現這一目標沒有任何線索,請先研究proj4,相關實用程序如cs2csogr2ogr,表親項目如proj4js或圖形GIS軟件(如gvSIG和QGIS)。

+0

謝謝!完全忘了座標系不匹配,所以我只是使用FME重新投射,因爲這就是我首先將數據移入json的方式。 – Eidolon

+0

如果您是FME用戶,您應該可以將其重新導入到EPSG:4326並從那裏生成GeoJSON,我認爲? – IvanSanchez