（2）Openlayers3加载Geowebcache发布的ArcGIS切片
目录
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>- 加载成功之后页面的显示
转载自：https://blog.csdn.net/LoveCarpenter/article/details/80743052
