2017-06-19 27 views
0

我想通過使用Leaflet和GeoServer顯示彈出窗口,但不知道爲什麼不起作用。我感謝任何幫助。通過使用GeoServer的WFS彈出不會出現在傳單中使用WFS的

 <script> 
    var map = L.map('map').setView([-36.799907, 174.708520], 11); 
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; 
    var osm = new L.TileLayer(osmUrl, { minZoom: 8, maxZoom: 18, attribution: osmAttrib }); 
    map.addLayer(osm); 

    //L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', { 
    // maxZoom: 20, 
    // subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] 
    //}).addTo(map); 


    var mywms = L.tileLayer.wms("http://localhost:9090/geoserver/localhost/wms", { 
     layers: 'localhost:TEST_JSON', 
     format: 'image/png', 
     transparent: true, 
     version: '1.1.0' 
    }); 
    mywms.addTo(map); 

    var owsrootUrl = 'https://localhost:9090/geoserver/ows'; 

    var defaultParameters = { 
     service: 'WFS', 
     version: '2.0.0', 
     request: 'GetFeature', 
     typeName: 'localhost:TEST_JSON', 
     outputFormat: 'text/javascript', 
     format_options: 'callback:getJson', 
     SrsName: 'EPSG:2193' 
    }; 

    var parameters = L.Util.extend(defaultParameters); 
    var URL = owsrootUrl + L.Util.getParamString(parameters); 

    var WFSLayer = null; 
    var ajax = $.ajax({ 
     url: URL, 
     dataType: 'jsonp', 
     jsonpCallback: 'getJson', 
     success: function (response) { 
      WFSLayer = L.geoJson(response, { 
       style: function (feature) { 
        return { 
         stroke: false, 
         fillColor: 'FFFFFF', 
         fillOpacity: 0 
        }; 
       }, 
       onEachFeature: function (feature, layer) { 
        popupOptions = { maxWidth: 200 }; 
        layer.bindPopup("Popup text,cvbcvbcvbcvb " , popupOptions); 
       } 
      }).addTo(map); 
     } 
    }); 

作爲一個測試,我在我的瀏覽器中輸入這個網址,

http://localhost:9090/geoserver/ows?service=wfs&version=2.0&request=GetFeature 

而得到這個錯誤:

<ows:ExceptionReport xmlns:xs="http://www.w3.org/2001/XMLSchema" 
xmlns:ows="http://www.opengis.net/ows/1.1" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.0.0" 
xsi:schemaLocation="http://www.opengis.net/ows/1.1 
    http://localhost:9090/geoserver/schemas/ows/1.1.0/owsAll.xsd"> 
<ows:Exception exceptionCode="MissingParameterValue" locator="GetFeature"> 
<ows:ExceptionText> 
    The query should specify either typeName, featureId filter, or a stored query id 
</ows:ExceptionText> 
</ows:Exception> 
</ows:ExceptionReport> 

誰能幫我送通過網址的GET請求請參閱GeoServer的迴應?

+1

仔細閱讀錯誤消息:'查詢應指定typeName,featureId過濾器或存儲的查詢ID',並查看您在WFS請求('http:// localhost:9090/geoserver/ows?service = wfs&version = 2.0&request = GetFeature')中發送哪些查詢參數。 。 – IvanSanchez

+0

比你伊凡。毫無疑問,在Post中設置參數,但我應該如何定義它們。什麼是格式?有沒有訂單?我正在尋找一個例子。 –

+0

geoserver附帶一組您可以探索的演示請求 - 查看演示菜單並選擇演示請求 –

回答

1

這麼簡單,但花了很長時間才弄明白。

利用Geoserver在我沒有SSL,所以應該是

owsrootUrl = 'http://localhost:9090/geoserver/ows';EPSG:4326

var owsrootUrl = new L.GeoJSON(); 
    owsrootUrl = 'http://localhost:9090/geoserver/ows'; 

    var defaultParameters = { 
     service: 'WFS', 
     version: '2.0.0', 
     request: 'GetFeature', 
     typeName: 'localhost:TEST_JSON', 
     outputFormat: 'text/javascript', 
     format_options: 'callback:getJson', 
     SrsName: 'EPSG:4326' 
    }; 

    var parameters = L.Util.extend(defaultParameters); 
    var URL = owsrootUrl + L.Util.getParamString(parameters); 

    var WFSLayer = null; 
    var ajax = $.ajax({ 
     url: URL, 
     dataType: 'jsonp', 
     jsonpCallback: 'getJson', 
     success: function (response) { 
      WFSLayer = L.geoJson(response, { 
       style: function (feature) { 
        return { 
         stroke: false, 
         fillColor: 'FFFFFF', 
         fillOpacity: 0 
        }; 
       }, 
       onEachFeature: function (feature, layer) { 
        popupOptions = { maxWidth: 200 }; 
        layer.bindPopup("Popup text, access attributes with ParcelID:"+feature.properties.parcelid+"<br> this land has "+feature.properties.lat+" numbers</br>" 
         , popupOptions); 
       } 
      }).addTo(map); 
     } 
    }); 

這個職位是非常有益的:https://gis.stackexchange.com/questions/64406/getting-wfs-data-from-geoserver-into-leaflet