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中即可。