在HTML中绘制geojson点 [英] Plotting geojson points in html
问题描述
我正在创建一个与此处示例类似的网络地图示例，但其中包含我的数据
I am creating a webmap similar to the example here example, but with my data.
我的geojson点不会显示为示例，这是我的geojson文件 points.geojson 的样子:
My geojson points won't display like the examples, here's what my geojson file points.geojson looks like:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "RENTAL_ID": 146057249, "CUSTOMER_I": 2256099, "LOCATION": "Boston", "VEHICLE_VI": "FHB 1675", "START_DATE": "2017\/03\/1 00:03:00", "END_DATE_L": "2017\/03\/1 00:10:00", "END_LATITU": 30.22478, "END_LONGIT": -97.72464, "DISTANCE": 5, "DURATION": 7, "DURATION_P": 0, "DURATION_D": 7, "SERVICE_DR": 0, "VEHICLE_TY": "HW 2.0" }, "geometry": { "type": "Point", "coordinates": [ 42.355672, -71.058712 ] } },
{ "type": "Feature", "properties": { "RENTAL_ID": 146057187, "CUSTOMER_I": 2435897, "LOCATION": "Boston", "VEHICLE_VI": "JHD 8492", "START_DATE": "2017\/03\/1 00:00:00", "END_DATE_L": "2017\/03\/1 00:19:00", "END_LATITU": 30.25766855, "END_LONGIT": -97.7383573, "DISTANCE": 13, "DURATION": 19, "DURATION_P": 0, "DURATION_D": 19, "SERVICE_DR": 0, "VEHICLE_TY": "B Class" }, "geometry": { "type": "Point", "coordinates": [ 42.361507, -71.090126 ] } }
]
}
这是我写的代码:
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.09], 13);
// load a tile layer
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 100,
minZoom: 9
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("point.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
为什么我的积分不显示?
Why are my points not displaying?
推荐答案
我会说您的观点确实出现了，但没有出现在您希望的地方.
I would say that your points do appear, but not where you expect them to.
GeoJSON格式期望坐标以[longitude, latitude]的顺序进行.然后，Leaflet在内部颠倒此顺序，因为它使用[latitude, longitude].
GeoJSON format expects coordinates in the order [longitude, latitude]. Leaflet then internally reverses this order, since it uses [latitude, longitude].
但是您仍然需要提供与GeoJSON兼容的数据.
But you still need to feed a GeoJSON compliant data.
这篇关于在HTML中绘制geojson点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
