一、引言

上一篇文章中讲解了在线切片的加载，本篇文章重点讲解离线切片的加载。离线切片加载在之前研究过一段时间，因为主要使用arcgis有依赖性一直没用下决定弄懂，上周看了三四天终于把这个研究通了，哈哈哈能为单位节约不少资金了。主要有离线切片的制作和加载、切片加载的原理。

二、离线标准与自定义切片的制作与使用

1、离线切片的制作

这里我使用的是arcgis server切图，分别制作了标准切片（arcgis online）与自定义切片（suggest）。

这里离线切片标准的与自定义的有什么区别呢？

这里发布的主要区别就是分辨率resolution（比例尺scale），起始点origin，范围full extent，下面会详细解释，先记住，这个是标准切片的：

2、离线切片的使用

在arcgis server中寻找切好的图片

然后将这些切片拷贝到web服务器上面就可以使用了，当然你要记住切片的参数，就是上面提到的分辨率、起始点、范围等。

三、离线标准切片加载

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="js/ol.css"><script src="lib/jquery/jquery-3.3.1.min.js"></script><script src="js/ol.js"></script></head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">// 设置地图中心，此处进行坐标转换， 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标//[106.677, 36.7388]是下载地图的中心经纬度//var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');//var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');//创建地图var map = new ol.Map({view: new ol.View({center: [508833, 299749],//地图中心位置//center:[503409, 305653],zoom: 18//地图初始层级
/*            center: [12956575, 4853684],//地图中心位置//center:[503409, 305653],zoom: 10//地图初始层级*/}),//添加地图图层//这里注销在下面添加新的离线地图图层/*layers: [new ol.layer.Tile({source:new  ol.source.OSM()})],*///将地图添加到的map容器中target: 'map'});//给8位字符串文件名补0function zeroFill(num, len, radix) {var str = num.toString(radix || 10);while (str.length < len) {str = "0" + str;}return str;}// ol.source.XYZ添加瓦片地图的层var tileLayer = new ol.layer.Tile({source: new ol.source.XYZ({tileUrlFunction: function (coordinate) {//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);var x = 'C' + zeroFill(coordinate[1], 8, 16);var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);var z = 'L' + zeroFill(coordinate[0], 2, 10);//return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径return 'http://localhost:8080/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径},projection: 'EPSG:3857'})});map.addLayer(tileLayer);//添加到map里面map.on('click', function(evt) {var coor=evt.coordinate;alert(coor);});
</script></body>
</html>

注意这里直接使用了new ol.source.XYZ，在tileUrlFunction中将XYZ重新拼接为真正瓦片所在地址。

四、离线自定义切片加载（重点非常有用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="js/ol.css"><script src="lib/jquery/jquery-3.3.1.min.js"></script><script src="js/ol.js"></script></head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">var projection = ol.proj.get('EPSG:3857');// 瓦片地址// 瓦片地址格式：http://localhost:6080/arcgis/rest/services/Test/Beijing/MapServer/tile/{z}/{y}/{x}var tileUrl = "http://localhost:6080/arcgis/rest/services/test/cadcustom/MapServer/tile/{z}/{y}/{x}";// 原点var origin = [ -2.00377E7 ,3.02411E7];// 分辨率var resolutions = [2.116670900008467,1.0583354500042335,0.5291677250021167,0.26458386250105836,0.13229193125052918,0.06614596562526459];// 地图范围var fullExtent = [ 508609.7079405099,299415.4490000001,509204.2680308107,299922.62196192663];var tileGrid = new ol.tilegrid.TileGrid({tileSize: 256,origin: origin,//extent: fullExtent,resolutions: resolutions});//给8位字符串文件名补0function zeroFill(num, len, radix) {var str = num.toString(radix || 10);while (str.length < len) {str = "0" + str;}return str;}// 瓦片数据源var tileArcGISXYZ = new ol.source.XYZ({tileGrid: tileGrid,projection: projection,tileUrlFunction: function (coordinate) {//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);var x = 'C' + zeroFill(coordinate[1], 8, 16);var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);var z = 'L' + zeroFill(coordinate[0], 2, 10);//return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径return 'http://localhost:8080/tile/arcgiscustom/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径}});var map = new ol.Map({target: 'map',layers: [// 瓦片图层new ol.layer.Tile({source: tileArcGISXYZ})],view: new ol.View({center:[509018, 299803],//resolutions: resolutions,//resolution: 2.116670900008467,projection: projection,//extent: fullExtentzoom: 17})});map.on('click', function(evt) {var coor=evt.coordinate;alert(coor);});</script></body>
</html>

注意这里直接使用了new ol.source.XYZ，在tileUrlFunction中将XYZ重新拼接为真正瓦片所在地址。

注意这里使用了tileGrid重新定义了openlayers瓦片坐标，resolution与origin要与arcgis中自定义发布的地图一致。

五、总结

离线标准与自定义切片的制作与使用；

离线标准切片加载；

离线自定义切片加载；

开源GIS（十一）——openlayers中加载离线标准与自定义切片（深度好文）相关推荐

开源GIS（十）——openlayers中加载在线标准与自定义切片
目录一.引言二.在线标准切片三.在线自定义切片四.总结一.引言加载切片底图是openlayer最经常不过的功能,这篇文章先讲述了在线arcgis切片地图的加载,让读者有个基本的认识,下一节 ...
开源GIS（十二）——openlayers中加载切片原理
目录一.切片加载方法 1.代码 2.代码分析 3.参数解释二.切片加载原理一.切片加载方法 1.代码 var projection = ol.proj.get('EPSG:3857');// 瓦 ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADA ...
Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 上面加载显示 ...
Arcgis for js，Openlayers中加载GeoJSON
概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Openlayers中加载GeoJson文件显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
web高德地图怎么加载离线地图_基于 QGIS 在内网中离线加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载. 另外,也 ...
四个步骤实现在ESRI ArcMap中加载17.6G离线卫星地图的方法
四个步骤实现在ESRI ArcMap中加载17.6G离线卫星地图的方法 ArcMap是GIS行业的从业人员再熟悉不过的一款功能非常强大的软件,尤其是对从事地质方面工作的外业人员来讲,更是一款不可或缺的 ...

开源GIS（十一）——openlayers中加载离线标准与自定义切片（深度好文）