Leaflet，OpenLayers3加载ArcGIS切片（png格式，Exploded松散型）

桃扇骨 2022-07-16 05:49 562阅读 0赞

## 需求 ##

做了一个简单的WebGIS应用，不想因为加载切片就安装一台GIS服务器。于是想直接访问图片的方式来加载地图。

## 需解决的问题 ##

leafletjs目前是不能够直接加载ArcGIS服务切片的，但可以借助[esri-leaflet][]插件来加载。如果没有安装arcgis server将切片进行发布时，这些切片还是无法进行访问，这个插件是面向arcgis服务应用开发的。

leafletjs自身可以通过类似于下面这种方式直接加载地图切片：  
　　`L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')`  
　　但ArcGIS切出了的切片不符合这样的格式，他们是这样的：  
　　![这里写图片描述][20161008100057524]  
　　那么更改切片文件夹名称、切片名称显然不太合适。

## 解决方法 ##

ArcGIS切片文件夹和文件名都是以16进制的形式命名的，因此我们通过重写x,y的方式，就是将原来的x,y更改为以16进制表示的形式就可以了。

其中：  
　　切片文件夹都是以R开头的，表示row，也就是y；  
　　切片名称都是以C开头的，表示col，也就是x.

通过leafletjs的L.TileLayer类的getTileUrl方法：

L.TileLayer = L.TileLayer.extend({
    
            getTileUrl: function (tilePoint) {
    
                var oo = "00000000"
                var xx = tilePoint.x.toString(16);
                xx = "C" + oo.substring(0, 8 - xx.length) + xx;
                var yy = (tilePoint.y - Math.pow(2, tilePoint.z - 2)).toString(16);//这里减去偏移值
                yy = "R" + oo.substring(0, 8 - yy.length) + yy;
    
                return L.Util.template(this._url, L.extend({
                    s: this._getSubdomain(tilePoint),
                    z: "L" + tilePoint.z,
                    x: xx,
                    y: yy
                }, this.options));
            }
        });

接下来和普通加载切片的形式一样：

var river_layer = L.tileLayer('http://192.168.9.41/ywwry/data/_alllayers/{z}/{y}/{x}.png');
    var riverLayer = L.layerGroup([river_layer])
    map.addLayer(riverLayer)
    riverLayer.setZIndex(1)

加载完成！

## 注意事项 ##

### 参考系 ###

这里我加载的是坐标系为EPSG4490的地图切片，所以我们在定义map时需要设置为EPSG4326.两者的切片原点都是一样的。如果是其他参考系，根据情况进行修改。

### 切片级别修改 ###

有时候切片文件夹命名不正确，比如  
　　![这里写图片描述][20161008104852982]  
　　  
　　里面的文件夹L00在这里实际上表示的是我的第7级。  
　　如果是这样，可以对文件夹名称进行修改，工作量不大。也可以在重写`getTileUrl`方法时修改代码。

### 切片加载时出现的行列号偏移 ###

这个问题不容易被发现，而这里就是这种情况。　我将行列号表示为十六进制，并以arcgis切片的格式进行格式化，但总是无法加载图片。我发现当第九级时切片的y轴方向偏移了128，第八级时是64，第七级时是32.很有规律，那么我使titlePoint.y减去这个偏移值`Math.pow(2, tilePoint.z - 2)`就可以了。  
　　我不知道其他人加载时会不会出现这个问题，如果出现了就应该灵活处理下。

--------------------

## OpenLayers3 加载切片 ##

补充时间2016年10月19日08:42:07

现将Leaflet替换为OpenLayers3，加载同样的切片。

OpenLayers3 加载这种切片与Leaflet思路是相同的，需要注意的是y轴方向上的变化。比如`var yy = (-tileCoord[2] - 1).toString(16);` 如果不减去1的话，就发现加载的切片恰好偏移1个切片的大小。

纠正前：  
![river切片偏移了一个切片的距离][river]

纠正后：  
![这里写图片描述][20161019085218987]

一定要注意观察，灵活变通。

[esri-leaflet]: http://esri.github.io/esri-leaflet/
[20161008100057524]: /images/20220716/6bb0265c945d4c398efa31bda5db1c6f.png
[20161008104852982]: /images/20220716/8a89b2a54e5d441ab66d5bf35580a9ae.png
[river]: /images/20220716/54259ef2293949109e8e1a65f6f5876f.png
[20161019085218987]: /images/20220716/55f00d9d3a554d41b9dfb252555537df.png