开源GIS学习：boundlessgeo官方案例“Building an Autocomplete Parcel Lookup”学习

　　 boundlessgeo官方网站提供了一些很好的开源gis案例，但有些部署需要它们的开源gis套件，但是我们可能并不想安装该套件，而且我试过，在下载时会很慢，这时，在学习这些案例时可能会碰到一些问题，本文记录了我在学习Building an Autocomplete Parcel Lookup该案例（http://workshops.boundlessgeo.com/tutorial-autocomplete/）时碰到的一些问题以及对应的解决方法。
　　首先，数据的下载，导入，发布等步骤按照教程一步步做基本没有问题，注意创建数据库时一定要运行“create extension postgis”，使得postgis插件生效。
　　问题主要发生在前端与geoserver交互的过程，官方网站已经提供了前端网页代码及对应的依赖，在未安装套件的情况下，可能需要注意的有：

1. index.html页面

-前端把app包下的Popup.js及LayersControl.js包含在“head”标签下

<script src="src/app/Popup.js"></script>
<script src="src/app/LayersControl.js"></script>

-“body”下app.js引用位置保证正确

<script src="src/app/app.js"></script>

2. app.js页面

-url地址补全，务必把http协议名加上

var url = 'http://localhost:9090/geoserver/ows?';

-openlayer底图来源为“MapQuest“，但在加载时总报错，因此先注释掉，需要可以试试其它来源底图，不要把自己发布的底图也注释掉。

  layers: [
    // MapQuest streets
    // new ol.layer.Tile({
      // title: 'Street Map',
      // group: "background",
      // source: new ol.source.MapQuest({layer: 'osm'})
    // }),
    // MapQuest imagery
    // new ol.layer.Tile({
      // title: 'Aerial Imagery',
      // group: "background",
      // visible: false,
      // source: new ol.source.MapQuest({layer: 'sat'})
    // }),
    // MapQuest hybrid (uses a layer group)
    // new ol.layer.Group({
      // title: 'Imagery with Streets',
      // group: "background",
      // visible: false,
      // layers: [
        // new ol.layer.Tile({
          // source: new ol.source.MapQuest({layer: 'sat'})
        // }),
        // new ol.layer.Tile({
          // source: new ol.source.MapQuest({layer: 'hyb'})
        // })
      // ]
    // }),
    new ol.layer.Tile({
      title: layerTitle,
      source: wmsSource,
      // TUTORIAL CHANGE #10
      opacity: 0.6
      // !TUTORIAL CHANGE #10
    }),
    highlight
  ]

3. 跨域问题
　　在实现地址自动填充以及点击查询时，都需要与geoserver交互会出现“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.”错误。在尝试了多种方法后，发现用”jsonp”方法请求可以解决该问题。
　　 在实现地址自动填充时， 参照geoserver关于wfs服务输出格式的帮助将app.js下wfsParams下“outputFormat”修改为’text/javascript’实现jsonp请求，默认callback参数为parseResponse。然后对应修改ajax请求数据类型为“jsonp”，并添加“jsonpCallback”参数。
需要注意，要实现jsonp支持，需要配置“ENABLE_JSONP”全局环境变量，设置值为true，参照：http://docs.geoserver.org/latest/en/user/services/wms/global.html#wms-global-variables

var wfsParams = {

    service: 'WFS',
    version: '2.0.0',
    request: 'GetFeature',
    typeName: 'county:address_autocomplete',
    outputFormat: 'text/javascript',
    srsname: 'EPSG:3857',
    viewparams: viewParamsStr
  };
  $.ajax({
    url: url,
    data: wfsParams,
    type: "GET",
    dataType: "jsonp",
    jsonpCallback:"parseResponse",

　　 点击地图查询时，需要与geoserver WMS GetFeatureInfo服务交互，也会产生跨域问题，原来程序采用gml格式交互，因为不知道怎么样实现跨域，因此改为jsonp方式。

   //原来gml：
   infoFormat = 'application/vnd.ogc.gml/3.1.1'; 
   //修改jsonp格式：
   infoFormat = 'text/javascript'; 

   //原来gml格式：
   var format = new ol.format.GML({featureNS: featureNS, featureType: featureType});
   //修改为geojson格式：
   var format= new ol.format.GeoJSON({
        defaultDataProjection: "EPSG:3857"
   });

//ajax方法，添加dataType和jsonpCallback参数：
   $.ajax({
    url: url,
    type: "GET",
    dataType: "jsonp",
    jsonpCallback:"parseResponse",
    ...

　　 以上问题对于大佬来说可能很容易解决，但是对于萌新来说，一步步解决问题还是有点成就感的，当然，直接方法是避免产生跨域问题。