Question

我无法让jsonp为数据服务网站工作。下面是我的脚本，它将在传单地图上绘制数据点，只要它们在同一个域中。我需要通过使用jsonp更进一步。我无法理解jsonp教程，特别是了解如何处理json文件的响应。这是我第一次尝试使用这种方法，而且我还没有成功，因为我还没有完全理解js / html。任何帮助都会很棒，因为我认为只需几行代码就可以使其正常工作。感谢。

<html>
<head>
  <meta charset="utf-8"/>
  <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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <style>
    #map{ width: 1000px; height: 600px; }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  var map = L.map('map',{center: [35, -121],zoom: 7});
  var myStyle = {"color": "#ff7800", "weight": 5, "opacity": 0.65};

  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}).addTo(map);

  $.getJSON("http://localhost:8000/erdCalCOFIcufes.geojson", function(data) {
      L.geoJson(data, {
        style: myStyle
      }).addTo(map);
  })

  </script>
</body>
</html>

请注意，它在本地托管，详情如下。我需要使用的网站就在这里......

https://coastwatch.pfeg.noaa.gov/erddap/tabledap/erdCalCOFIcufes.geoJson?longitude,latitude,sardine_eggs&cruise=%22201504%22&sardine_eggs%3E=0&.draw=markers&.marker=5%7C5&.color=0x000000&.colorBar=%7C%7C%7C%7C%7C&.bgColor=0xffccccff

如果没有适当的jsonp来抓取数据进行绘制，这就是看起来的样子。目前，我已经能够通过使用以下内容在与geojson文件相同的域中托管脚本来获取数据...

python -m SimpleHTTPServer

这更多是为了证明概念而不适合我的需要。

    <html>
<head>
  <meta charset="utf-8"/>
  <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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <style>
    #map{ width: 1000px; height: 600px; }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  var map = L.map('map',{center: [35, -121],zoom: 7});
  var myStyle = {"color": "#ff7800", "weight": 5, "opacity": 0.65};
  
  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}).addTo(map);

  $.getJSON("http://localhost:8000/erdCalCOFIcufes.geojson", function(data) {
      L.geoJson(data, {
        style: myStyle
      }).addTo(map);
  })

  </script>
</body>
</html>

geojson文件如下所示。我削减了很多分，以使其更容易消化。

{
  "type": "FeatureCollection",
  "propertyNames": ["sardine_eggs"],
  "propertyUnits": ["count"],
  "features": [

{"type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-123.3226, 38.1476] },
  "properties": {
    "sardine_eggs": 0 }
},
{"type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-123.3527, 38.1785] },
  "properties": {
    "sardine_eggs": 1 }
},
{"type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-123.369, 38.238] },
  "properties": {
    "sardine_eggs": 0 }
},
{"type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-117.3725, 32.6873] },
  "properties": {
    "sardine_eggs": 0 }
},
{"type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-117.2973, 32.6538] },
  "properties": {
    "sardine_eggs": 0 }
}

  ],
  "bbox": [-126.5296, 29.8483, -117.2931, 43.7501]
}

JSONP - 用于与传单一起访问数据网站

0 个答案: