openlayer加載geoserver發佈的wfs圖層方法

openlayer加載geoserver發佈的wfs圖層方法

//測試添加wfs圖層
      var t_geoserver_url="http://192.168.30.16:8080/geoserver";
      this.map.addLayer(this.map.createLayerByWFSJsonp("onemap:bz_point","wfs標記點圖層",t_geoserver_url));
      this.map.addLayer(this.map.createLayerByWFSJsonp("onemap:cjqy2010","wfs村級行政區圖層",t_geoserver_url));

//添加wfs格式的jsonp的圖層ok
cwgisMap.prototype.createLayerByWFSJsonp = function (layerName, caption, geoserver_url) {
  //
  var t_wfsUrl = "";
  //geoserver_url="http://192.168.30.16:8080/geoserver";
  if (caption && caption.trim() == "") caption = layerName; 

  this.vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON({
      geometryName: "geom"
    }),    
    name: layerName,
    caption: caption,
    url: function (extent) {      
        t_wfsUrl = geoserver_url + "/wfs?service=wfs&version=1.0.0&request=GetFeature&typeName=" + layerName;
        t_wfsUrl += '&outputFormat=application/json&srsname=EPSG:3857&';
        t_wfsUrl += 'bbox=' + extent.join(',') + ',EPSG:3857';
        //
        return t_wfsUrl;      
    },
    strategy: ol.loadingstrategy.bbox
  });
  var BSIconStyle = new ol.style.Style({
    /*icon樣式*/
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      opacity: 0.95,
      src: '../static/imgs/data/bs2.png'
    }))
  });

  var vLayer = new ol.layer.Vector({
    source: this.vectorSource,
    name:layerName,
    caption:caption,
    type:2,
    style: [new ol.style.Style({ //繪製幾何圖形樣式
      fill: new ol.style.Fill({ //填充樣式
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new ol.style.Stroke({ //邊線樣式
        color: 'rgba(255, 0, 0, 0.5)',
        lineDash: [10, 10],
        width: 2
      }),
      image: new ol.style.Circle({ //點樣式
        radius: 8,
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 0, 0, 0.7)'
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 0, 0, 0.2)'
        })
      })
    })]
  });
  return vLayer;
};