我正在尝试熟悉传单 map ，但是我发现他们的教程不是很直观。我一直在使用他们的 geojson 教程并查看他们示例的源代码，尝试将我自己的数据添加到我正在创建的 map 中，但是我没有成功地显示多边形。
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/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/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 © <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]
]
]
}
};
任何帮助找出我的问题所在的帮助将不胜感激!
最佳答案
错字，就在这里:
"type": = "Feature",
检查object initializer syntax in JS ，请注意其中没有使用 = 运算符。
将来，使用类似 JSONlint 的工具和 GeoJSONLint检查 JSON/GeoJSON 的有效性。如果可能的话，避免手动编写 JSON/GeoJSON。使用浏览器的调试功能来捕获此类错误。
<小时/>除此之外，请注意此 L.LatLng 的坐标系:
var map = L.map('mapid').setView([49.2485, -122.9995], 15);
以及 GeoJSON 中的坐标:
[500001.59375,5455104], ...
这些绝对不是纬度-经度坐标。从表面上看，它们应该是某种 UTM 坐标(500000 和 5000000 的东移和北移)。
根据GeoJSON specs ，特别是section 4 of RFC 7946 :
The coordinate reference system for all GeoJSON coordinates is a geographic coordinate reference system, using the World Geodetic System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units of decimal degrees.
换句话说，如果您想符合 GeoJSON 标准，请将坐标转换为 WGS84(又名 EPSG:4326)中的经纬度。现在，Leaflet 会尝试在西经 500000 度、北纬 5450000 度有一个点，这完全没有意义。
转换您的坐标。如果您不知道如何做到这一点，请首先研究 proj4 ，相关实用程序，如 cs2cs或ogr2ogr ，表弟项目如 proj4js ，或 gvSIG 和 QGIS 等图形 GIS 软件。
关于javascript - 将 JSON 图层添加到 Leaflet map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40618972/