从零开始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>

这里写图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值