使用Openlayers

在其他内容里已经讲到了Openlayers来发布,在下面将使用openlayers加载,Geoserver发布的 内容

WMS

Web地图服务(WMS):利用具有地理空间位置信息的数据制作地图,其中将地图定义为地理数据可视的表现,地图本身并不是数据。地图通常以图像格式表达,例如PNG,GIF或是JPEG,有时候也表达为基于矢量图形,如可缩放矢量图形(SVG)或是网络电脑图形元文件等格式(WebCGM)。地图服务是专门提供共享地图数据的服务,负责根据客户程序的请求,提供地图图像、指定坐标点的要素信息、以及地图服务的功能说明信息。

上节发布内容的URL可以看到使用的是WMS服务

http://localhost:8080/geoserver.war/demo/wms?service=WMS&
version=1.1.0&request=GetMap&layers=demo%3Akaz_adm2_v079&
bbox=5175449.5%2C4946436.5%2C9719601.0%2C7446127.5&
width=768&height=422&srs=EPSG%3A3857&format=application/openlayers

request=GetMap :WMS规范定义了三个接口(操作):GetCapabilities(获取服务能力), GetMap(获取地图)和GetFeatureInfo(获取对象信息)。其中GetMap为核心操作。 GetCapabitities返回服务级元数据,它是对服务信息内容和要求参数的一种描述; GetMap返回一个地图影像,其地理空间参考和大小参数是明确定义了的; GetFeatureInfo(可选)返回显示在地图上的某些特殊要素的信息。 这个规范还定义了一个用于调用上述操作的万维网统一资源定位器(URL)语法和服务级元数据的XML(可扩展标记语言)表达法。

发布WMS

使用Openlayer加载GeoServer发布的图层。

使用GeoServer自带的图层

shpfile

URL:

http://localhost:8080/geoserver.war/newyork/wms?service=WMS&
version=1.1.0&request=GetMap&layers=newyork%3Anyc_roads&
bbox=984018.1663741902%2C207673.09513056703%2C991906.4970533887%2C219622.53973435296&
width=506&height=768&srs=EPSG%3A2908&format=application/openlayers

创建一个HTML文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    </body>
    </html>

添加js

<link rel="stylesheet" href="../ol/css/ol.css" type="text/css">
<script src="../ol/build/ol.js" type="text/javascript"></script>

添加导入js

var format = 'image/png';
    var bounds = [-180.0,-90.0,
        180.0,90.0];//范围
    var ImageMap = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            //自己的服务url
            url: 'http://localhost:8080/geoserver.war/newyork/wms',
            //设置服务参数
            params: {
                'FORMAT': format,
                'VERSION': '1.1.0',
                STYLES: '',
                //图层信息
                LAYERS: 'newyork:nyc_roads',
            }
        })
    });

    //设置地图投影
    var projection = new ol.proj.Projection({
        code: 'EPSG:4326',//投影编码
        units: 'degrees',
        axisOrientation: 'neu'
    });

    //设置地图
    var map = new ol.Map({
        //地图中的比例尺等控制要素
        controls: ol.control.defaults({
            attribution: false
        }).extend([
            new ol.control.ScaleLine()
        ]),
        //设置显示的容器
        target: 'map',
        //设置图层
        layers: [vector, ImageMap],
        //设置视图
        view: new ol.View({
            //设置投影
            projection: projection
        })
    });

发布