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

最新推荐文章于 2023-02-08 13:37:33 发布

ahxgu66028

最新推荐文章于 2023-02-08 13:37:33 发布

阅读量603

点赞数

原文链接：http://www.cnblogs.com/asummer/p/8708995.html

版权

启动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>

转载于:https://www.cnblogs.com/asummer/p/8708995.html

ahxgu66028

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在静态网页中加载GeoServer中的地图(openlayers)

启动GeoServer服务，登录Admin Page。选择一个图层，点击openlayers在显示的地图上单击右键，显示源码，出现如下图在新建项目中引入openlayers包。新建静态页面，在页面中链入样式，图中标签copy于上图源码，可修改tip【HTML <link> 标签：链接一个外部样式表】...
复制链接

扫一扫