geoserver发布图层 - cytggit/Map-openlayers GitHub Wiki

登录GeoServer

在菜单中选择 GeoServer 2.8.2 ‣ Start GeoServer（linux：）
访问位于戳这里的系统界面
开启 GeoServer 界面后，使用用户名“admin”和密码“geoserver”登录，管理界面将会显示

基本介绍

数据面板中的 Layer Preview ：可以预览服务中载入的数据
数据面板中的工作区：管理GeoServer的工作区
数据面板中的数据存储：管理GeoServer的数据存储（矢量：shapefile、postgis；栅格：GeoTIFF；其他）
数据面板中的图层：管理GeoServer发布的图层
数据面板中的图层组：定义和管理图层组（图层的集合）
数据面板中的 styles ：管理GeoServer的图层样式

发布图层的例子

一. 创建工作区

    1. 添加新的工作区；
    2. 输入工作区名称：wanhuayuan；
    3. 输入工作区的URI：http://www.wanhuayuan.com，访问用；
    4. 点击保存；

二. 创建地图样式-styles

    1. 准备好sld文件（uDig编辑）；
    2. Add a new style；
    3. 输入style名称 → 选择工作区；
    4. 点击浏览、选择一个编辑好的sld文件；
    5. Upload ...（注意编码是GB2312，有中文时需把乱码修正）；
    6. 点击提交；

三. 导入数据

    1. 添加新的数据存储；
    2. 选择数据源类型：矢量 → postgis；
    3. 存储库的基本信息：选择工作区 → 数据源名称（wanhuayuan）；
    4. 基本参数：host(192.168.1.141) → port(5432) → database(mote_basemap) → 数据库的用户名和密码；
    5. 点击保存；

四. 新建图层

    1. 上述点击保存后自动跳到新建图层的页面； / 点击图层 → 添加新的资源 → 选择一个数据存储；
    2. 选择一个图层点击发布；
    3. 数据：命名(test_point) → 坐标参考(EPSG:4326) → 边框(从数据中计算/手动输入数据范围)；
    4. 发布：WMS Settings → 选择style；
    5. 点击保存；

五. 预览发布的图层

    1. Layer Preview；
    2. 选择添加的图层并点击Openlayers；

前端调用

WMS 一般：

  var wmsLayer = new ol.layer.Tile({
  	source: new ol.source.TileWMS({
  		url: 'http://localhost:8088/geoserver/wanhuayuan/wms',
  		params: {LAYERS:'wanhuayuan:wanhuayuan_all',version:'1.1.0'}
  	})
  });

WFS location（geoserver已经解决跨域问题时，用json） ajax实现：

  var flagLayer = new ol.layer.Vector({
  	source: center_wfs,
  	style: center_style
  });
  LocationRequestParam = {
  	service: 'WFS',
  	version: '1.1.0',
  	request: 'GetFeature',
  	typeName: 'wanhuayuan:location_personal', // 定位点图层
  	outputFormat: 'application/json',
  	cql_filter: 'l_id=' + deviceId
  };	
  $.ajax({  
  	url: 'http://192.168.2.107:8088/geoserver/wfs',
  	data: $.param(LocationRequestParam), 
  	type: 'GET',
  	dataType: 'json',
  	success: function(response){
  		var features = new ol.format.GeoJSON().readFeatures(response);
  		center_wfs.addFeatures(features);
  	}
  });

WFS location（geoserver已经解决跨域问题时，用json） fetch实现：

  var center_wfs = new ol.source.Vector();
  var featureRequest = new ol.format.WFS().writeGetFeature({
  	srsName: 'EPSG:4326',
  	featureNS: 'http://www.wanhuayuan.com',
  	featurePrefix: 'wanhuayuan',
  	featureTypes: ['location_personal'],
  	outputFormat: 'application/json'
  });
  fetch('http://192.168.1.148:8088/geoserver/wfs', {
  	method: 'POST',
  	body: new XMLSerializer().serializeToString(featureRequest)
  }).then(function(response) {
  	return response.json();
  }).then(function(json) {
  	var features = new ol.format.GeoJSON().readFeatures(json);
  	center_wfs.addFeatures(features);
  });

WFS heatmap（geoserver没有解决跨域问题时，用jsonp）：

  var wfsparam = {
  	service: 'WFS',
  	version: '1.1.0',
  	request: 'GetFeature',
  	typeName: 'wanhuayuan:wanhuayuan_Point', 
  	outputFormat: 'text/javascript',
  	format_options : 'callback:loadFeatures' 
  };		
  var center_wfs = new ol.source.Vector({
  	format: new ol.format.GeoJSON(),
  	loader: function (resolution, projection) {  
  		var url = 'http://localhost:8088/geoserver/wfs';					
  		$.ajax({  
  			url: url,
  			data: $.param(wfsparam), 
  			type: 'GET',
  			dataType: 'jsonp',
  			jsonpCallback: 'loadFeatures' 
  		});  
  	}, 
  	projection: 'EPSG:4326'  
  });
  window.loadFeatures = function (response) {  
  	center_wfs.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  
  }; 
  var heatLayer = new ol.layer.Heatmap({
  	source: center_wfs,
  	blur: parseInt(blur.value, 10),
  	radius: parseInt(radius.value, 10)
  });

优化应用

SQL视图

  1. 创建图层时点击：配置新的SQL视图（替换《四.2》的步骤）；
  2. 视图名称：例（location）；
  3. SQL语句：例（select * from location where l_id='%lid%'）；
  4. SQL视图参数：从SQL猜想参数；
  5. 属性：刷新（输入geom的类型和SRID && 勾选标识符）；
  6. 点击保存；
  7. 继续《四.3》及以下步骤；
  8. 前端调用时加入参数viewparams：
  var viewparams = [ 'feature_id:30050600' ];
  selectLayer = new ol.layer.Tile({
  	source: new ol.source.TileWMS({
  		url: 'http://localhost:8088/geoserver/wanhuayuan/wms',
  		params: {LAYERS:'wanhuayuan:select',version:'1.1.0',viewparams: viewparams}
  	})
  });