postgresql,postgis,geoserver 发布地图服务，并用.net mvc openlayers3进行显示

1.所需工具

postgres版本 9.6.1

对应的postgis

geoserver 2.8.2

openlayers3

 

2.将postgres postgis ,geosever安装好，再用如下指令，在postgres的cmd工具psql中，进行postgis的拓展

-- Enable PostGIS (includes raster)
CREATE EXTENSION postgis;
-- Enable Topology
CREATE EXTENSION postgis_topology;
-- fuzzy matching needed for Tiger
CREATE EXTENSION fuzzystrmatch;
-- Enable US Tiger Geocoder
CREATE EXTENSION postgis_tiger_geocoder;
拓展到postgis,获得geometry类型。

--psql shell命令窗口第一次登录需要password
--之后都会隐藏。

db=# CREATE TABLE public."PuKouMapDb"(
db(# "Id"serial PRIMARY KEY,
db(# "Type" integer,
db(# "ObjectId" character varying(128),
db(# "Polygon" geometry,
db(# "ZipName" character varying(128),
db(# "FilePath" character varying(128),
db(# "FileNames" character varying(128),
db(# "ObjectName" character varying(128));

建表，在pgadmin中建表主键不会自增，只能在psql中进行设置。

方法一:serial表示主键自增,在建表的时候就添加进去，上述即是。

方法二：先建表，在建一个递增的序列，再将这个主键与这个序列相关联，更具有可控性。

ex:

CREATE TABLE public."Destination"
db-# (
db(# id integer PRIMARY KEY,
db(# x character varying(128),
db(# y character varying(128),
db(# z character varying(128));

CREATE SEQUENCE Destination_id_seq
START WITH 1
INCREMENT BY 1
NO MINVALUE
NO MAXVALUE
CACHE 1;

alter table test_c alter column id set default nextval('Destination_id_seq');

3.安装完geoserver之后，登上http://localhost:8080/geoserver/web/,因为我本地装了tomcat所以该服务运行在本地的tomcat上。输入用户名 admin 密码 geosever登录。

点击左侧数据存储，进去添加新的数据存储，选择PostGIS - PostGIS Database，然后填写相关的postgres数据库信息。

完成之后，会出现图层的发布页面，选择相应的存放图层数据的数据库，选择坐标参考系统中的定义SRS，选择相应的坐标系。

自动计算边框。（连接上数据库之后，想要发布另一个表里的图层，直接点击左侧的图层，添加新的资源）

完成之后可以在Layer Preview中进行预览。

4.在预览界面，查看网页源码，

var format = 'image/png';

var bounds = [40344004, 3525087.75,
40384268, 3570959];

var untiled = new ol.layer.Image({
	source: new ol.source.ImageWMS({
	ratio: 1,
	url: 'http://localhost:8080/geoserver/cite/wms',
	params: {'FORMAT': format,
	'VERSION': '1.1.1',
	LAYERS: 'cite:export_output4',
	STYLES: '',
	}
	})
	});

以wms方式加载源。

 

var projection = new ol.proj.Projection({
	code: 'EPSG:900913',
	units: 'm',
	axisOrientation: 'neu'
	});
	var map = new ol.Map({
	controls: ol.control.defaults({
	attribution: false
	}).extend([mousePositionControl]),
	target: 'map',
	layers: [
	untiled //图层
	],
	view: new ol.View({
	projection: projection//加载坐标系
	})
	});

 map.getView().fit(bounds, map.getSize());

 

将这两个代码段加到自己的前台openlayer的js中即可。