加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

Openlayers之离线加载ArcGISServer瓦片

(2018-04-03 10:44:28)
分类： openlayer
https://blog.csdn.net/smilecoffin/article/details/77249167
[html] view plain copy
  1. >  
  2. <</span>html xmlns="http://www.w3.org/1999/xhtml">  
  3. <</span>head>  
  4.     <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <</span>title></</span>title>  
  6.     <</span>link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">  
  7.       
  8.     <</span>script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></</span>script>  
  9.     <</span>script src="https://openlayers.org/en/v4.2.0/build/ol.js"></</span>script>  
  10.     <</span>script type="text/javascript">  
  11.         window.onload = function () {  
  12.             // 投影  
  13.             var projection = ol.proj.get('EPSG:4326');  
  14.             // 坐标原点  
  15.             var origin = [-400.0, 400];  
  16.             // 分辨率  
  17.             var resolutions = [  
  18.                 0.7031250000029744,  
  19.                 0.3515625000014872,  
  20.                 0.1757812499888463,  
  21.                 0.08789062499442316,  
  22.                 0.04394531250910888,  
  23.                 0.021972656242657134,  
  24.                 0.010986328121328567,  
  25.                 0.00549316407256159,  
  26.                 0.0027465820243834896,  
  27.                 0.0013732910240890498,  
  28.                 6.866455120445249E-4,  
  29.                 3.433227441249574E-4,  
  30.                 1.7166138395978374E-4,  
  31.                 8.583068008258684E-5,  
  32.                 4.291534004129342E-5,  
  33.                 2.145767002064671E-5,  
  34.                 9.658089455004757E-6,  
  35.                 5.364423453814192E-6,  
  36.                 2.682199829602067E-6,  
  37.                 1.3411118121060625E-6  
  38.             ];  
  39.             // 瓦片网格  
  40.             var tileGrid = new ol.tilegrid.TileGrid({  
  41.                 tileSize: 256,  
  42.                 origin: origin,  
  43.                 resolutions: resolutions  
  44.             });  
  45.   
  46.             var map = new ol.Map({  
  47.                 target: 'map',  
  48.                 layers: [  
  49.                     new ol.layer.Tile({  
  50.                          source: new ol.source.OSM(),  
  51.                     }),  
  52.                     // 瓦片图层  
  53.                     new ol.layer.Tile({  
  54.                         // 瓦片图像数据源  
  55.                         source: new ol.source.TileImage({  
  56.                             projection: projection,  
  57.                             // 瓦片网格  
  58.                             tileGrid: tileGrid,  
  59.                             // 瓦片路径函数  
  60.                             tileUrlFunction: function (tileCoord, pixelRatio, proj) {  
  61.                                 // 缩放级别  
  62.                                 var z = zeroPad(tileCoord[0], 2, 10);  
  63.                                 // 瓦片行号  
  64.                                 var x = zeroPad(tileCoord[1], 8, 16);  
  65.                                 // 瓦片列号  
  66.                                 var y = zeroPad(-tileCoord[2] - 1, 8, 16);  
  67.                                 // 瓦片本地路径  
  68.                                 return "TestMapTile/" + "L" + z + "/" + "R" + y + "/" + "C" + x + ".png";  
  69.                             }  
  70.                         }),  
  71.                     }),  
  72.                 ],  
  73.                 view: new ol.View({  
  74.                     center: [113.226, 23.408],  
  75.                     // 分辨率  
  76.                     resolutions: resolutions,  
  77.                     // 地图当前缩放层级  
  78.                     resolution: 9.658089455004757E-6,  
  79.                     projection: projection,  
  80.                 })  
  81.             });  
  82.   
  83.             // 进制转换并补齐Arcgis Server目录和名称前面的0  
  84.             function zeroPad(num, len, radix) {  
  85.                 var str = num.toString(radix || 10);  
  86.                 while (str.length <</span> len) {  
  87.                     str = "0" + str;  
  88.                 }  
  89.                 return str;  
  90.             }  
  91.         };  
  92.     </</span>script>  
  93. </</span>head>  
  94. <</span>body>  
  95.     <</span>div id="map"></</span>div>  
  96. </</span>body>  
  97. </</span>html>  

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有