openlayer3 系列5-同时加载不同的坐标系的数据

1.API示例

https://openlayers.org/en/v3.20.1/examples/reprojection.html

2.操作

2.1需要引入 proj4

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>

 2.2 定义坐标系 ，openlayer默认会加载4326和3857坐标系，所以这2种不需要定义，直接加载即可

 //自定义加载西安80坐标系

proj4.defs("EPSG:2382","+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs");
    var proj2382 = ol.proj.get('EPSG:2382');
    proj2382.setExtent([-3033922.0318,1670734.4277,2501172.3718,6126326.6722]); 

  //自定义加载27700坐标系

  proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
          '+x_0=400000 +y_0=-100000 +ellps=airy ' +
          '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
          '+units=m +no_defs');
      var proj27700 = ol.proj.get('EPSG:27700');
      proj27700.setExtent([0, 0, 700000, 1300000]);

2.3使用

/**
 * 添加西安80影像图层
 * @param url
 * @param visible
 * @returns
 */
function xyz2382ImageLayer(layinfo,callback,visible){

	if(layinfo && layinfo.serviceUri){
		if(layinfo.serviceUri.length>0){
		    var layer =new ol.layer.Tile({
		    	source : new ol.source.XYZ({  
		               url : layinfo.serviceUri+ '/tile/{z}/{y}/{x}',
		               visible : visible,
		               projection: ol.proj.get('EPSG:2382'),     
		               tileGrid : new ol.tilegrid.TileGrid({
		                   tileSize: 256, 
		                   origin :[-5123200.0,1.00021E7],
		                   extent:  [-3033922.0318,1670734.4277,2501172.3718,6126326.6722],  
		                   resolutions : [
		                	   7937.5158750317505,
		                	   4891.979404792143,
		                	   2445.9897023960716,
		                	   1222.9947189061045,
		                	   611.497227161121,
		                	   305.7486135805605,
		                	   152.874174498349,
		                	   76.43695495724326,
		                	   38.21834518669038,
		                	   19.109040301413938,
		                	   9.554387858775717,
		                	   4.777061637456608,
		                	   2.3883985267970536,
		                	   1.1940669714672763
		                	]
			            })
		            })
		     })
		   
		    if (layer) {
		         layer.setOpacity(0.7);
		         if (layer instanceof ol.layer.Tile) {
		             var source = layer.getSource();
		             if (source instanceof ol.source.TileImage) {
		               source.setRenderReprojectionEdges(false);
		             }
		           }
		         map.getLayers().setAt(1, layer);
		       }
	        callback(layer);
		}
	}
}

/**
 * 添加Wgs84影像图层
 * @param url
 * @param visible
 * @returns
 */
function xyzImageLayer(layinfo,callback,visible){

	if(layinfo && layinfo.serviceUri){
		if(layinfo.serviceUri.length>0){
		    var layer =new ol.layer.Tile({
		    	source : new ol.source.XYZ({  
		               url : layinfo.serviceUri+ '/tile/{z}/{y}/{x}',
		               visible : visible,
		               projection: ol.proj.get('EPSG:4326'),     
		               tileGrid : new ol.tilegrid.TileGrid({
		                   tileSize: 256, 
		                   origin :[-400.0,399.9999999999998],
		                   extent:  [105.03935412100009,31.039717361000044,111.73204131800009,40.43520212000004],  
		                   resolutions : [
		                	    0.01903568804664224,
		                	    0.00951784402332112,
		                	    0.00475892201166056,
		                	    0.00237946100583028,
		                	    0.00118973050291514,
		                	    5.9486525145757E-4,
		                	    2.97432625728785E-4,
		                	    1.5228550437313792E-4,
		                	    7.614275218656896E-5
		                	]
			            })
		            })
		     })
		    map.addLayer(layer);
	        callback(layer);
		}
	}
}

2.4 结果

2.5存在问题，直接加载不同地理坐标系的数据会存在偏移问题，如果对数据精度要求不高可以使用，如果精度要求高的话需要对原始数据进行转换坐标系和进行纠偏操作，十七加载时坐标系一致，切片缓存方案一致