开源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 #10opacity: 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",...

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