在html中绘制geojson点答案

【问题标题】：Plotting geojson points in html在html中绘制geojson点
【发布时间】：2017-10-08 07:12:22
【问题描述】：

我正在创建一个类似于此处example 示例的网络地图，但使用的是我的数据。

我的 geojson 点不会像示例那样显示，这是我的 geojson 文件 points.geojson 的样子：

    {
"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>

为什么我的积分没有显示？

【问题讨论】：

标签： javascript html leaflet geojson

【解决方案1】：

我会说你的观点确实出现了，但不是你期望的地方。

GeoJSON 格式需要按[longitude, latitude] 顺序排列的坐标。 Leaflet 然后在内部反转此顺序，因为它使用[latitude, longitude]。

但您仍然需要提供符合 GeoJSON 的数据。

【讨论】：

感谢您的坐标解释，那么您的意思是通过反转坐标还是“符合GeoJSON”的数据？
谢谢！这就是问题所在并通过 chrome 运行，所以我将浏览器切换到 Foxfire 并反转坐标，再次感谢！