背景
最近遇到一個(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í)別不能通過(guò)zoom來(lái)指定,指定了也無(wú)效,必須通過(guò)resolution來(lái)指定 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/