上篇 使用Geoserver(其實是Geowebcache) 發佈本地的ArcGIS 切片地圖， 成功發佈了ArcGIS 的切片地圖，本篇介紹使用 OpenLayers 加載 Geowebcache 發佈的wms服務。
openlayes版本 ：3.13.1
geowebcache: 1.10.0
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./libs/ol3.13.1/ol.css" />
<style type="text/css">
/* 鼠標位置控件層樣式設置 */
#mouse-position {
float: left;
position: absolute;
bottom: 5px;
width: 500px;
height: 20px;
/*在地圖容器中的層，要設置z-index的值讓其顯示在地圖上層*/
z-index: 2000;
}
/* 鼠標位置信息自定義樣式設置 */
.custom-mouse-position {
color: rgb(0,0,0);
font-size: 16px;
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<div id="map">
<div id="mouse-position">
</div>
</div>
</body>
<script src="libs/ol3.13.1/ol-debug.js"></script>
<script src="./libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
//實例化鼠標位置控件（MousePosition）
var mousePositionControl = new ol.control.MousePosition({
//座標格式
coordinateFormat: ol.coordinate.createStringXY(4),
//地圖投影座標系（若未設置則輸出爲默認投影座標系下的座標）
projection: 'EPSG:3857',
//座標信息顯示樣式類名，默認是'ol-mouse-position'
className: 'custom-mouse-position',
//顯示鼠標位置信息的目標容器
target: document.getElementById('mouse-position'),
//未定義座標的標記
undefinedHTML: ' '
});
var pos = ol.proj.get('EPSG:3857');
var map=new ol.Map({
//地圖容器div的ID
target: 'map',
//地圖容器中加載的圖層
layers: [
// new ol.layer.Tile({
// source: new ol.source.OSM()
// })
],
view: new ol.View({
//設置地圖投影座標系
projection: pos,
center: [133135942.5127,4932500.5445],
zoom:10
}),
//加載控件到地圖容器中
controls: ol.control.defaults({
/* @type {ol.control.Attribution} */
attributionOptions: ({
//地圖數據源信息控件是否可收縮,默認爲true
collapsible: true
})
}).extend([mousePositionControl])//加載鼠標位置控件
});
var layer=new ol.layer.Tile({
source:new ol.source.TileWMS({
url:'http://localhost:8081/geowebcache/service/wms',
params:{
'LAYERS':'test1',
'FORMAT':'image/png',
'SRS':'EPSG:3857'
},
tileGrid:new ol.tilegrid.TileGrid({
resolutions:[156543.03392800014,
78271.51696399994,
39135.75848200009,
19567.87924099992,
9783.93962049996,
4891.96981024998,
2445.98490512499,
1222.992452562495,
611.4962262813797,
305.74811314055756,
152.87405657041106,
76.43702828507324,
38.21851414253662,
19.10925707126831,
9.554628535634155,
4.77731426794937,
2.388657133974685,
1.1943285668550503,
0.5971642835598172,
0.29858214164761665],
origin:[-20037508.342787001, 20037508.342787001]
})
})
})
map.addLayer(layer);
</script>
</html>需要注意的是：
params中對應 切片地圖的 名稱，格式和參考系統，
其中resolutions 和 origin 對應的範圍在 arcgis 切片目錄下 con.xml 配置文件中可以找到。
參考系統不對，或範圍格式不對可能出不了圖。
效果：
