近期由于一些原因,对开源GIS临时突击了一下,对GIS方面的知识有了进一步认识,但由于工作的原因,不能把精力一直放在这个上面,所以现在就对这一阶段的学习情况做一下总结,暂时搁置一下
Geoserver发布
- 数据库使用postgresql+postgis,把以前项目中存在sqlserver中的空间数据用FME转换到postgresql数据库中,由于坐标系统进行自定义偏移的缘故,在postgis中会新增坐标系用以区分现已存在的坐标系统。在Geoserver添加自定义坐标系可以参考文章如何给GeoServer增加其支持的坐标系种类
基于Geoserver发布地图
openlayer访问
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<style>
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
#map {
clear: both;
position: relative;
width: 768px;
height: 542px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<div id="map">
<div id="overlayer" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;"></div>
</div>
<script type="text/javascript">
var format = 'image/png';
var bounds = [424727.5625, 3160929.5,
440532.8125, 3172085.25];
var centerP = [431851.666, 3166587.459];
var tiled = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/SuiChang/wms',
params: {
'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'SuiChang:SuiChang_Group'
}
})
});
var overlayer = new ol.Overlay({
position: centerP,
element:document.getElementById('overlayer')
});
var interaction = new ol.interaction.DragRotateAndZoom();
var interactions = ol.interaction.defaults().extend([interaction]);
var control = new ol.control.FullScreen();
var controls = new ol.control.defaults().extend([control]);
var projection = new ol.proj.Projection({
code: 'EPSG:900914',
units: 'm',
axisOrientation: 'neu',
global: false
});
var map = new ol.Map({
target: 'map',
layers: [
tiled
],
view: new ol.View({
projection: projection,
center: centerP,
zoom:12
}),
// interactions: interactions,
overlays: [overlayer]
// controls: controls
});
map.addControl(control);
map.addInteraction(interaction);
// map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>