在静态网页中加载GeoServer中的地图(openlayers)

本文转载自查看原文 2018-04-03 15:59 2462 geoserver/ webgis/ openlayers/ WebGIS

启动GeoServer服务，登录Admin Page。

选择一个图层，点击openlayers

在显示的地图上单击右键，显示源码，出现如下图

在新建项目中引入openlayers包。
新建静态页面，在页面中链入样式，图中标签copy于上图源码，可修改
tip【HTML <link> 标签：链接一个外部样式表】

添加map,并设置好相应投影（projection）、范围（bounds,extent）等
```
<div id="map"></div>
```
成功将地图图层加载在页面

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="lib/ol4.6.4/css/ol.css" type="text/css">
    <style>
        html,
        body,
        #map{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

    </style>
</head>
<body>
<div id="map"></div>
<script src="lib/ol4.6.4/build/ol.js"></script>
<script>
    var format= 'image/png';
    var untiled = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8086/geoserver/sf/wms',
            params: {'FORMAT':  format,
                'VERSION': '1.1.1',
                STYLES: '',
                LAYERS: 'sf:roads'
            }
        })
    });
    var format= 'image/png';var projection = new ol.proj.Projection({
        code: 'EPSG:26713',
        units: 'm',
        axisOrientation: 'neu',
        global: false
    });
    var bounds = [589434.8564686741, 4914006.337837095,
        609527.2102150217, 4928063.398014731];
    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: 'map',
        layers: [
            untiled
        ],
        view: new ol.View({
            projection: projection
        })
    });
    map.getView().fit(bounds, map.getSize());
</script>

</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Openlayers中加载GeoJson文件显示地图 openLayers加载高德地图 Openlayers实例-加载天地图 Vue中使用Openlayers加载Geoserver发布的ImageWMS Leaflet加载GeoServer发布的WMTS地图服务 ArcGIS中加载百度地图 Openlayers加载腾讯、高德、天地图 OpenLayers中地图缩放级别的设置方法 Django模版中加载静态文件配置详解 jquery在网页中加载本地json文件