2016-11-15 54 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