由于项目要求,需要使用OpenLayers加载ArcGIS的REST切片服务。OpenLayers官网只提供了加载ArcGIS标准切片服务的demo,但很多时候考虑到切片服务太占用磁盘空间,我们在ArcGIS Server中会自定义切片的等级,如下图所示,切片服务TestMapService只使用了0-4级切片。
在利用OpenLayers加载自定义切片服务之前,我们需要先获取该服务的一些参数,如下图所示:
有了这些参数就可以用OpenLayers加载ArcGIS自定义的切片服务了,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>REST服务</title>
<link href="scripts/ol.css" rel="stylesheet" />
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="scripts/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 坐标原点
var origin = [
-400.0,
399.9999999999998
];
// 分辨率
var resolutions = [
0.29743262572878504,
0.15228550437313793,
0.07614275218656896,
0.03807137609328448,
0.01903568804664224
];
// 地图范围
var extent = [
-121.04290329332338,
-7.1283531563668845,
35.35203341553756,
56.39654924514745
];
// 瓦片网格
var tileGrid = new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
extent: extent,
resolutions: resolutions
});
// 瓦片数据源
var source = new ol.source.XYZ({
tileGrid: tileGrid,
projection: ol.proj.get('EPSG:4326'),
url: "https://localhost:6443/arcgis/rest/services/TestMapService/MapServer/tile/{z}/{y}/{x}"
});
// 显示地圖
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: source
}),
],
view: new ol.View({
center: [30, 30],
resolutions: resolutions,
resolution: 0.15228550437313793,
projection: ol.proj.get('EPSG:4326'),
extent: extent
})
});
</script>
</body>
</html>
程序运行结果如下图所示: