Geoserver&Openlayers总结

近期由于一些原因,对开源GIS临时突击了一下,对GIS方面的知识有了进一步认识,但由于工作的原因,不能把精力一直放在这个上面,所以现在就对这一阶段的学习情况做一下总结,暂时搁置一下

Geoserver发布

  1. 数据库使用postgresql+postgis,把以前项目中存在sqlserver中的空间数据用FME转换到postgresql数据库中,由于坐标系统进行自定义偏移的缘故,在postgis中会新增坐标系用以区分现已存在的坐标系统。在Geoserver添加自定义坐标系可以参考文章如何给GeoServer增加其支持的坐标系种类
    基于Geoserver发布地图

openlayer访问

OpenLayers访问Geoserver发布的地图

<!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>

参考资料

  1. cdnjs
  2. epsg.io
  3. PostGIS
  4. proj4js
  5. GIS加油站
  6. TypeSearch
  7. GeoServer documentation
  8. Geoserver&Openlayers系统
  9. OpenLayers 3 Beginner’s Guide
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 序: 很多新接触GIS的人员对地图投影以及坐标系统很难理解,甚至做GIS开发做了好几年的人也有这方面的疑惑,地...
    三维GIS那点事_王跃军阅读 17,551评论 3 43
  • 之前写了一篇名为《GISer们还有机会屌丝逆袭吗?》的文章,希望能和广大GISer一起探讨地理信息产业留给小团队和...
    老俞的随想录阅读 6,163评论 8 64
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 风异波诡, 云走霞飞, 梦舟里, 问苍水—— 我是谁? 无缘于仙岛, 又不得尘归… 忽觉一袭凉微微, 慢睁目, 满...
    刘万军L阅读 155评论 0 0
  • 习惯了一睁眼就刷刷朋友圈 用随手点的赞问声早安 曾经熟悉的朋友许久不见 每天相逢在虚拟的空间 陌生的朋友忘了为何遇...
    遥远的鱼223阅读 474评论 0 50