（2）Openlayers3加载Geowebcache发布的ArcGIS切片

最新推荐文章于 2019-02-27 18:07:25 发布

GISer.Wang

最新推荐文章于 2019-02-27 18:07:25 发布

阅读量2.4k

点赞数

分类专栏：开源GIS

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/80743052

版权

开源GIS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1.引言
2. 获取切片服务所需要的各种属性
3 .Openlayers3加载服务

1.引言

前面曾经说过：可以使用Geowebcache将ArcGIS切片发布为服务，然后在Web前端使用Openlayers调用发布的切片服务，这样的好处就是避开了ArcGIS Server的限制，全部使用GIS的开源解决方案，同时还可以借助ArcGIS的制图功能。在本篇博客中主要介绍如何使用Openlayers3调用Geowebcache发布的ArcGIS切片。

2. 获取切片服务所需要的各种属性

如果想调用发布的切片主要有以下几点需要注意的地方：

切片地图服务类型和服务名称
地图的中心显示坐标：center
地图的全图范围：fullExtent
地图的投影：projection
地图的源：origin
地图的切片方案：resolutions

2.1 登录`geowebcache`查看服务的名称和图片类型

浏览器访问geowebcache，可以看到服务的名称为image，图片的格式为PNG

这里写图片描述

2.2 查看地图的中心坐标

点击上图中的png，可以查看地图的切片，将鼠标放在地图相对中央的地方，可以查看该位置的坐标

这里写图片描述

2.3 查看地图的投影、全图范围、源、和切片方案

在地图切片页面，右键查看源代码，可以查看到相关属性信息

这里写图片描述

3 .`Openlayers3`加载服务

加载切片服务的全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.5.0/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v3.5.0/build/ol.js"></script>
</head>
<body>
    <div id="allmap" class="allmap"></div>
</body>
<script>
    //对应源代码中的投影
    var projection = ol.proj.get('EPSG:32651')
    //对应源代码中的源信息
    var origin = [-5120900, -9998100]
    //对应源代码中的全图范围信息
    var fullExtent = [-5120900.0,3244260.3589873835,393146.22809245717,9998100.0]
    //对应源代码中的切片方案信息
    var resolutions = [16.933367200067735, 8.466683600033868, 4.233341800016934, 2.116670900008467, 1.0583354500042335]
    var tileGrid = new ol.tilegrid.TileGrid({
        tileSize: 256,
        origin: origin,
        extent: fullExtent,
        resolutions: resolutions
    })
    //url是本地的geowebcache的地址
    //params中 Layers是对应的服务名称，format是图片格式，SRS是地图的坐标系
    //view中中心坐标填写，上述查看的中心坐标
    //view的resolution填写切片方案数组中的其中一个数字。
    var map = new ol.Map({
        target: 'allmap',
        layers: [new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: "http://localhost:8080/geowebcache/service/wms",
                params: {'LAYERS': 'image', format: 'image/png', SRS: 'EPSG:32651'},
                tileGrid: tileGrid
            })
        })],
        view: new ol.View({
            center: [389958.15696, 3246151.05912],
            resolutions: resolutions,
            resolution: 8.466683600033868,
            projection: projection,
            extent: fullExtent
        })
    })
</script>
</html>