openlayer调用geoserver

openlayer3调用geoserver

• 一、写在前面
• 二、实现过程
• 1. 调用wms
• 2. 调用wfs
• loader方式加载
• url方式加载加载
• 3 调用wcs
• 三、结尾

一、写在前面

openlayer3调用geoserver

二、实现过程

首先初始化地图

    var map = new ol.Map({
      layers: [baseLayer, wmsLayer],
      target: 'map',
      view: new ol.View({
        center: [120.5467674176599, 30.634534885764285],
        units: "degrees",
        projection: "EPSG:4326",
        zoom: 13
      })
    });

添加osm的底图

    var baseLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    map.addLayer(wmsLayer);

1. 调用wms

wms是较为简单的服务，无需过多的配置

    var wmsLayer = new ol.layer.Image({
      source: new ol.source.ImageWMS({
        // 此处为geoserver服务器中地址，可点击Layer Preview，通过openlayer查看浏览器地址获取。
        url: 'http://localhost:8082/geoserver/tongxiang/wms',
        params: {
          // 此处的名称为geoserver图层选项中图层名称
          'LAYERS': 'tongxiang:geo_civil_engineering'
        }
      })
    });
    map.addLayer(wmsLayer);

2. 调用wfs

查看api可知，调用wfs有两种方式，一种是采用loader加载，另一种是通过url加载，前者可设置为jsonp的方式可直接解决跨域的问题，后一种需要在服务器端设置跨域。

loader方式加载

首先设置vectorSource

    var wfsParams = {
      service: 'WFS',
      version: '1.0.0',
      request: 'GetFeature',
      typeName: 'tongxiang:geo_civil_engineering',  //图层名称     
      outputFormat: 'text/javascript', 
      format_options: 'callback:loadFeatures'  //回调函数声明  
    };

    var vectorSource = new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      loader: function (extent, resolution, projection) {  
        var url = 'http://localhost:8082/geoserver/tongxiang/wfs';
        $.ajax({
          url: url,
          data: $.param(wfsParams),   //传参  
          type: 'GET',
          dataType: 'jsonp',   //解决跨域 
          jsonpCallback: 'loadFeatures'  //回调  

        });
      },
      strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
        maxZoom: 25
      })),
      projection: 'EPSG:4326'
    });
    window.loadFeatures = function (response) {
      vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  
    };

添加图层

    var wfsLayer = new ol.layer.Vector({
      source: vectorSource1
    });
    map.addLayer(wfsLayer);

url方式加载加载

设置vectorSource

    var vectorSource1 = new ol.source.Vector({
    // 将参数写在url中，可复制该url，修改部分参数啊
      url: `http://localhost:8082/geoserver/tongxiang/wfs?service=wfs&version=1.1.0&request=GetFeature
            &typeNames=tongxiang:geo_civil_engineering&outputFormat=application/json&srsname=EPSG:4326`,
    // 设置文件格式，geometry_data为矢量源中表示空间位置的字段
      format: new ol.format.GeoJSON({
        geometryName: 'geometry_data'
      })
    });

添加图层

    var wfsLayer = new ol.layer.Vector({
      source: vectorSource1
    });
    map.addLayer(wfsLayer);

3 调用wcs

openlayer调用wcs服务是通过wms

    var wcsLayer = new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: 'http://localhost:8082/geoserver/tongxiang/wms',
        params: { 'LAYERS': 'tongxiang:l8Img_SH' },
        serverType: 'geoserver'
      })
    })
    map.addLayer(wcsLayer);

三、结尾

geoserver版本：2.15.2
geoserver服务器：Jetty
geoserver介绍：
wms、wfs、wcs：