javascript - 在带有 AJAX 的 Leaflet 中使用 JSON 代替 GeoJSON

Question

我正在寻找一种使用 AJAX 在传单中使用 JSON 而不是 GeoJSON 的方法。需要使用 JSON 和 AJAX。

我设法使用 AJAX 调用 JSON 文件。但是，现在我很困惑如何使用 JSON 中的数据在 map 上绘制标记。我猜我不能使用 L.geoJson()。

HTML:

<div id="map" style="width: 800px; height: 500px"></div>

这是 JavaScript 文件:

var map;
var overlay;

var addPopupsFromLocations = function(locations) {
  var popups = new Array();
  locations.forEach(function(location){
    console.log('creating popup for location ' + location.title);

    console.log(location.latitude);
    console.log(location.longitude);
      }) ;
};

function init() {
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            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>',
            id: 'examples.map-i86knfo3'
        }).addTo(map);
    }

$(document).ready(function(){
    init();
    $.ajax('locations.json', {
        dataType: 'json',
        success: addPopupsFromLocations,
        error: function(xhr, st, et) {
          console.warn(et);
        }
    });
});

这是 JSON 文件:

[
  {
    "title": "Weathertop",
    "link": "http://en.wikipedia.org/wiki/Weathertop",
    "latitude": 51.505,
    "longitude": -0.09,
    "imageUrl": "assets/img/location-images/Weathertop.jpg"
  },
{
  "title": "Rivendell",
  "link": "http://lotr.wikia.com/wiki/Rivendell",
  "latitude": -0.09,
  "longitude": 51.505,
  "imageUrl": "assets/img/location-images/Rivendell2.jpg"
},
{
  "title": "Minas Tirith",
  "link": "http://lotr.wikia.com/wiki/Minas_Tirith",
  "latitude": 38.78,
  "longitude": -77.18,
  "imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg"
}

]

控制台:

creating popup for location Weathertop
custom.js (line 7)
51.505
custom.js (line 9)
-0.09
custom.js (line 10)
creating popup for location Rivendell
custom.js (line 7)
-0.09
custom.js (line 9)
51.505
custom.js (line 10)
creating popup for location Minas Tirith
custom.js (line 7)
38.78
custom.js (line 9)
-77.18

Answer 1

I'm looking for a way to use JSON instead of GeoJSON in leaflet using AJAX.

好的:查看一些条款，

• JSON 是一种基本的数据交换格式。它不包含任何特别的内容。
• GeoJSON 是 JSON 的子集，其格式适合 map 友好且易于被 Leaflet 等内容理解。

如果您想使用 L.geoJson，您需要重新格式化您的数据，使其适合 GeoJSON specification 。您可以使用基本的 JavaScript 来完成此操作。

var geojsonFormattedLocations = locations.map(function(location) {
    return {
        type: 'Feature',
        geometry: {
        type: 'Point',
            coordinates: [location.longitude, location.latitude]
        },
        properties: {
            location
        }
    };
});