本地3857切片，如何用EPSG:4326显示

[icebound1]

maptalks's version and what browser you use?

Issue description

Please provide a reproduction URL (on any jsfiddle like site)

[fuzhenn]

3857切片只能用EPSG:3857投影来显示，无法用EPSG:4326投影显示的

[icebound1]

ol4中 ol.source.XYZ 可以将3857的切片显示成4326投影的，建议在以后的版本中考虑一下

[fuzhenn]

我可能理解错你的意思了，能不能给个ol的相关示例？

[icebound1]

var urlTemplate = '../tile/{z}/{x}/{y}.png';

var tileLayer= new ol.layer.Tile({
		source: new ol.source.XYZ({
		attributions: 'Copyright:© 2013 ESRI, i-cubed, GeoEye',
		projection: "EPSG:3857",
		tileSize:256,
		tileUrlFunction: function(tileCoord) {
			return urlTemplate.replace('{z}', tileCoord[0].toString()).replace('{x}', tileCoord[1].toString()).replace('{y}', (-tileCoord[2] - 1).toString());
		},
		wrapX: true
	})
});

var  layersCollection=new ol.Collection([
		tileLayer,
]);
map = new ol.Map({
	controls: [],
	loadTilesWhileAnimating:true,
	loadTilesWhileInteracting:true,
	interactions:ol.interaction.defaults({
		doubleClickZoom:false,
		altShiftDragRotate: false,
			rotate: false
		}),
		layers:layersCollection,
		target: 'olMap',
		view: new ol.View({
			projection: "EPSG:4326",
			center:[123.20,41.10],
			zoom: 8,
			maxZoom:16,
			minZoom:2
		}),
});

OL4 本地3857切片显示EPSG:4326投影，

[jingsam]

Openlayer是动态投影，强行拉伸，渲染效率很低。

[fuzhenn]

@icebound1 感谢回复。
我理解你的意思了，这个功能maptalks也能支持， 大概的代码如下：

var urlTemplate = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var map = new maptalks.Map('map', {
        center : [123.20,41.10],
        zoom: 8,
        spatialReference : { projection : 'EPSG:4326' },
        baseLayer : new maptalks.TileLayer('base', {
           urlTemplate: function (x, y, z, domain) {
               //把4326的瓦片编号转换为3857的瓦片编号
               return urlTemplate.replace('{z}', z.toString()).replace('{x}', x.toString()).replace('{y}', (-y - 1).toString());
           }
        })
      });

你这个需求比较特殊，我试着用你的代码在jsfiddle上重现了一下，请确认一下是不是你说的功能？
https://jsfiddle.net/mdo0mjjp/

[icebound1]

多谢，是这个功能，我表述的有些问题，我用你的代码，但还是不能正确显示切片

[fuzhenn]

我贴的那个代码确实不能跑，只是个大概的示意。
我来研究一下具体怎么写。

[fuzhenn]

@icebound1 我研究了一下，这个功能不是现有接口能简单实现的(需要重载maptalks.TileLayer和maptalks.TileConfig的若干方法)，我打算在下个版本实现。

我的实现思路：

• 让TileLayer能独立设置自己的空间参考
• 在载入瓦片时，如楼上@jingsam 所说， 动态计算瓦片的xyz和拉伸瓦片

代码示例：

      var map = new maptalks.Map('map', {
        center : [123.20, 41.10],
        zoom: 8,
        spatialReference : { projection : 'EPSG:4326' },
        baseLayer : new maptalks.TileLayer('base', {
           //设置瓦片图层的空间参考
           spatialReference : {
               projection : 'EPSG:3857'
               //与map一样，支持更详细的设置resolutions，fullExtent等
           },
           urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
           subdomains : ['a', 'b', 'c']
        })
     });

你有什么建议啵？

[icebound1]

你这个代码已经很好了，在layer里设置独立的投影，在地图中进行投影变换，希望在下个版本里可以实现这样的功能

[fuzhenn]

@icebound1
这个功能已经基本开发好，允许给TileLayer单独设置spatial reference，map会动态调整瓦片的载入以和地图的空间参考保持一致，支持三维的同时，性能也不受影响。

现在不光是4326的空间参考能载入3857底图，还能载入百度等任意经纬度系统的底图数据。

不过实现不是那么完美，受限于投影坐标转换算法，在低级别（例如0-3级）上，世界边缘的瓦片位置不正常，这里需要实现投影坐标转换算法来解决，属于另外的范畴了，我会专门找时间来解决。

很感谢你提出了这个功能，这个功能对未来的矢量瓦片会非常有用。

我这边增加一些测试用例后，会提交发布到v0.37.0中（本周内会发布）

再次感谢！

[fuzhenn]

@icebound1 v0.37.0已经发布，增加了一个载入不同投影瓦片图层的示例
http://maptalks.org/examples/cn/tilelayer-projection/different-projection/