APP
背景
最近遇到一個需求，要使用OpenLayer加載ArcGIS Server發布的服務。如果直接拷貝OpenLayer提供的在線官方Demo，然后修改下地圖服務地址是跑不通的，這是因為OpenLayer默認加載的ArcGIS服務是規范化的切片方案（從0級到20級，每一級的切片比例尺都是固定的），但是由于現場使用的是自定義的切片方案，所以還需要去調整下代碼。
關鍵點
在加載ArcGIS Server發布的自定義切片方案的服務時，需要重點關注以下幾個概念：
origin：坐標原點
resolutions：切片方案分辨率數組
matrixIds：分辨率對應的級別
projection：坐標系
具體可以參考下圖：
完整代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script type="text/javascript">
window.onload = function () {
// 地圖坐標
var projection = ol.proj.get('EPSG:4326');
// 基礎地圖服務切片地址
var tileUrl = "http://localhost/gisserver/rest/services/MyMapService/MapServer/tile/{z}/{y}/{x}";
// 坐標原點
var origin = [-400.0, 400.0];
// 分辨率
var resolutions = [0.0016846869456599084, 8.423434728299542E-4, 4.211717364149771E-4, 2.1058467847698563E-4];
//地圖范圍
var fullExtent = [112.30626776825166,22.590658569048593,114.72797295438163,23.82554016094057];
var tileGrid = new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
extent: fullExtent,
resolutions: resolutions
});
// 瓦片數據源
var tileArcGISXYZ = new ol.source.XYZ({
tileGrid: tileGrid,
projection: projection,
url: tileUrl,
});
var map = new ol.Map({
target: 'map',
layers: [
// 瓦片圖層
new ol.layer.Tile({
source: tileArcGISXYZ
}),
],
view: new ol.View({
//初始化中心點坐標
center: [113.2759, 23.1170],
resolutions: resolutions,
// 注意：此處指定縮放級別不能通過zoom來指定，指定了也無效，必須通過resolution來指定
resolution: 8.423434728299542E-4,
projection: projection,
extent: fullExtent
})
});
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
?
本文摘自 ：https://www.cnblogs.com/
