从零开始gis——(5)使用openlayer访问发布的地图服务

地图服务发布好之后，就可以开始用js进行开发了，我们使用开源的openlayer.版本是4.6.5

首先引入openlayer的js文件和css文件,然后进行开发，代码:

<div id="map" class="map" style="width:1000px; height:500px;border:1px solid red"></div>
<script>
    // 这里是新建一个瓦片图层
    var tiled = new ol.layer.Tile({
        // 这是瓦片图层源，即使用发布好的服务就行
        source: new ol.source.TileWMS({
            //  这里url的格式就是  http://localhost:8080/geoserver/{workspaceName}/wms
            url: 'http://localhost:8080/geoserver/gl/wms',
            // 这里参数layers的是  工作空间:图层名称
            params: {'LAYERS': 'gl:mypolygn', 'TILED': true, 'VERSION': '1.1.1'},
            // 服务类型: geoserver
            serverType: 'geoserver'
        })
    })
    // 图层是一个数组，因为会有多个图层的情况，我们这里就一个图层
    var layers = [
        tiled
    ];
    // 地图的参考坐标系，这里就用之前建立的图层使用的坐标系即可
    var projection = new ol.proj.Projection({
        code: 'EPSG:4326',
        // 单位'degrees', 'ft', 'm', 'pixels', 'tile-pixels' or 'us-ft'.
        units: 'degrees',
        // 轴线方向 有neu  enu  目前没看出作用，
        axisOrientation: 'neu',
        // projection信息是否对整个地球有效，默认false
        global: true
    });

    var view = new ol.View({
        // 视图中心坐标
        center: [-1.3, 0.7],
        // 视图范围 minx  miny  maxx  maxy
        extent:[-2.5, 0, 0, 1.3],
        // 缩放登记
        zoom: 9,
        // 参考坐标系
        projection:projection
    })

    var map = new ol.Map({
        layers: layers,
        // dom元素的id
        target: 'map',
        view: view
    });

</script>