Question

我正在尝试使用Leaflet将Geoserver中的数据加载到我的网站中，但是我收到错误“Uncaught SyntaxError：Unexpected token：”，其中包含指向我的GeoJSON链接的Url链接。

我对代理和CORS感到困惑，但我希望这可能是答案，但我希望有一个更简单的解决方案。如果有人能帮助我解决这个问题，我将非常感激。

这是我试图运行的代码。

<!DOCTYPE html>
<html>
<head>

    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/leaflet.css" />
    <link rel="markers" type="images/marker-icon" href="images/marker-icon.png" />

    <script src="js/leaflet.js"></script>
    <script src="js/esri-leaflet.js"></script>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script src='https://code.jquery.com/jquery-1.5.min.js'></script>

 </head>
 <body>

   <div id="map" style="width: 600px; height: 400px;"></div>

  <script>

    var mymap = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
        }).fitBounds([[51.0269253989,-1.34762355597],[51.1990603009,-0.951310026203]]);

    L.esri.basemapLayer('Imagery').addTo(mymap);

    //loads the geojson layer
    var geojsonLayer = new L.GeoJSON();

    function loadGeoJson(data) { 
        geojson.addGeoJSON(data); 
    } 
        var geoJsonUrl = "http://localhost:8080/geoserver/RSAC/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=RSAC:results_clipped_with_growth_small&maxFeatures=50&outputFormat=application%2Fjson";

        $.ajax({ 
            type: "GET",
            url: geoJsonUrl + '&callback=?', 
            dataType: 'json',
            jsonpCallback: 'loadGeoJson',
            success: loadGeoJson,   
    });

  </script>

</body>
</html>

Answer 1

这里有一个问题：

<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/jquery-1.5.min.js'></script>

你在1.11.0之后包含了jQuery两次，版本1.5（非常陈旧和过时）。只需删除第二个jQuery。

在您的Javascript中，jQuery以JSONP格式提取数据。但是，outputFormat=application/json的Geoserver URL将发送JSON（而不是JSONP）。

要禁用jQuery的JSONP检查，您必须在此处提供参数jsonp: false：

跨域“json”请求将转换为“jsonp”，除非请求在其请求选项中包含jsonp: false。 (source)

$.ajax({ 
    type: "GET",
    url: geoJsonUrl, 
    dataType: 'json',
    success: loadGeoJson,
    jsonp: false 
});

我使用随机公共Geoserver实例对此进行了测试，并且没有CORS问题，但您的里程可能会有所不同。

从Leaflet js中的Geoserver加载数据

1 个答案: