APP
背景
最近遇到一個(gè)需求，要使用OpenLayer加載ArcGIS Server發(fā)布的服務(wù)。如果直接拷貝OpenLayer提供的在線官方Demo，然后修改下地圖服務(wù)地址是跑不通的，這是因?yàn)镺penLayer默認(rèn)加載的ArcGIS服務(wù)是規(guī)范化的切片方案（從0級(jí)到20級(jí)，每一級(jí)的切片比例尺都是固定的），但是由于現(xiàn)場(chǎng)使用的是自定義的切片方案，所以還需要去調(diào)整下代碼。
關(guān)鍵點(diǎn)
在加載ArcGIS Server發(fā)布的自定義切片方案的服務(wù)時(shí)，需要重點(diǎn)關(guān)注以下幾個(gè)概念：
origin：坐標(biāo)原點(diǎn)
resolutions：切片方案分辨率數(shù)組
matrixIds：分辨率對(duì)應(yīng)的級(jí)別
projection：坐標(biāo)系
具體可以參考下圖：
完整代碼
<!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 () {
// 地圖坐標(biāo)
var projection = ol.proj.get('EPSG:4326');
// 基礎(chǔ)地圖服務(wù)切片地址
var tileUrl = "http://localhost/gisserver/rest/services/MyMapService/MapServer/tile/{z}/{y}/{x}";
// 坐標(biāo)原點(diǎn)
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
});
// 瓦片數(shù)據(jù)源
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({
//初始化中心點(diǎn)坐標(biāo)
center: [113.2759, 23.1170],
resolutions: resolutions,
// 注意：此處指定縮放級(jí)別不能通過zoom來指定，指定了也無效，必須通過resolution來指定
resolution: 8.423434728299542E-4,
projection: projection,
extent: fullExtent
})
});
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
如果對(duì)您有所幫助，歡迎您點(diǎn)個(gè)關(guān)注，我會(huì)定時(shí)更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。
?
本文摘自 ：https://www.cnblogs.com/
