Geoserver&Openlayers总结

作者: 山华水清 | 来源:发表于2017-09-04 00:03 被阅读93次

Geoserver&Openlayers总结
一、Openlayers3通过Geoserver往数据库中添加数
openlayers 谷歌地图源
OpenLayers典型部分概述
openlayers使用百度地图瓦片偏移问题解决方案
openlayers5实战--踩坑总结
开源技术解决交警设施智能化管理
openlayers feature clone
OpenLayers简介及源码运行
Openlayers API整理

近期由于一些原因，对开源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>