Leaflet,OpenLayers3加载ArcGIS切片(png格式,Exploded松散型)
来源:互联网 发布:知乎回答是不是乔任梁 编辑:程序博客网 时间:2024/05/22 06:17
需求
做了一个简单的WebGIS应用,不想因为加载切片就安装一台GIS服务器。于是想直接访问图片的方式来加载地图。
需解决的问题
leafletjs目前是不能够直接加载ArcGIS服务切片的,但可以借助esri-leaflet插件来加载。如果没有安装arcgis server将切片进行发布时,这些切片还是无法进行访问,这个插件是面向arcgis服务应用开发的。
leafletjs自身可以通过类似于下面这种方式直接加载地图切片:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
但ArcGIS切出了的切片不符合这样的格式,他们是这样的:
那么更改切片文件夹名称、切片名称显然不太合适。
解决方法
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.两者的切片原点都是一样的。如果是其他参考系,根据情况进行修改。
切片级别修改
有时候切片文件夹命名不正确,比如
里面的文件夹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,加载同样的切片。
var riverLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ projection: 'EPSG:4326', maxZoom: 17, minZoom: 7, tileUrlFunction: function(tileCoord){ var oo = "00000000"; var zz = tileCoord[0]; var z = "L" + zz; var xx = tileCoord[1].toString(16); var x = "C" + oo.substring(0, 8 - xx.length) + xx; var yy = (-tileCoord[2] - 1).toString(16); //注意此处,计算方式变了 var y = "R" + oo.substring(0, 8 - yy.length) + yy; return 'data/_alllayers/' + z + '/' + y + '/' + x + '.png'; } }) }) map.addLayer(riverLayer);
OpenLayers3 加载这种切片与Leaflet思路是相同的,需要注意的是y轴方向上的变化。比如var yy = (-tileCoord[2] - 1).toString(16);
如果不减去1的话,就发现加载的切片恰好偏移1个切片的大小。
纠正前:
纠正后:
一定要注意观察,灵活变通。
- Leaflet,OpenLayers3加载ArcGIS切片(png格式,Exploded松散型)
- leaflet本地加载arcgis切片
- openLayers3加载GeoWebCache发布ArcGIS切片
- 自定义图层加载Arcgis Server松散切片
- openlayers3使用已有的ArcGIS切片
- arcgis server 地图切片格式
- ArcGIS for windows mobile在线加载切片(问题)
- ArcGIS Mobile 10开发(四)加载切片数据
- flex for arcgis 调用访问 自定义瓦片格式--标准切片、 google切片、arcgis切片
- photoshop5.5切图格式为gif-转为png(单个切片保存)
- 【切片技巧】PS 切片时 保存成透明背景png格式图片
- ArcGIS Api For Android学习之(二)加载地图续-加载sd卡中的切片数据
- 扩展TiledMapServiceLayer,加载ArcGIS Server发布的切片地图
- 扩展TiledMapServiceLayer,加载ArcGIS Server发布的切片地图
- 在ArcGIS Engine的MapControl直接加载arcserver切片数据
- ArcGIS 制作 “地图切片(tile)”
- ArcGIS切片包(tpk)的创建
- [leaflet] esri-leaflet(一):初识leaflet
- python随笔,随时补充.
- Toolbar的使用
- 基础通信知识详解
- android四大组件--Service简介
- EditText获取输入焦点的方法
- Leaflet,OpenLayers3加载ArcGIS切片(png格式,Exploded松散型)
- 网页三剑客笔记总结
- 使用C编译器编写shellcode
- java从文本文件中一次读入一行数据进行处理
- 第七周 项目1- 建立顺序环形队列算法库
- Spring MVC 中的 forward 和 redirect
- 如何学习SQL?---来自CSDN上面的问答区
- iOS10 消息推送
- Android Studio里面配置Tesseract