基于esri-leaflet插件和Proj4.js加载arcgis独立坐标系的服务

需求的产生

目前，项目需要基于arcgis服务和leaflet进行开发，由于leaflet官方的网站不能较好的支持独立坐标系（也可以称为地方坐标系或者投影坐标系），所以需要利用proj4.js和proj4leaflet.js进行坐标转换。

资料收集和技术调研

首先，调研了proj4.js的使用方式，主要是弄明白坐标系中的各种参数的含义和在proj4中的定义，例如中央子午线，北方向和东方向的偏移值，投影类型等，详细的文档和说明我会放到后面的参考资料中。同时我也参考了三篇博客，吸纳了这三篇博客中的对我有用的内容。

arcgis service wkt 格式简单介绍

以下是拿我测试的服务的坐标系进行举例，可能与你们实际开发的有出入，但是大部分应该都包括坐标系的基本信息。另外，需要说明的是，由于该参数可能涉密，故本例中的参数均为修改后的参数。具体介绍如下图所示。

代码编写

介绍了这么多，大家可能最关心也就是这里了，毕竟代码作为开发来说是最重要的解决方案。

1.引入leaflet的地图框架和esri-leaflet框架，包括相关的css和js等文件，这里不在详述。

<link rel="stylesheet" href="leaflet/leaflet.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="leaflet/esri-leaflet.js"></script> 

2.引入proj4.js和proj4leaflet.js文件

<script type="text/javascript" src="leaflet/proj4.js"></script>
<script type="text/javascript" src="leaflet/proj4leaflet.js"></script>

3.根据wkt格式的服务定义出转换字符串

这里是最重要的步骤，我们可以根据上述图片的wkt服务定义出独立坐标系的转换字符串。（另外需要补充的是，我看网上有人介绍了自动转换的，但是我发现那个上传接口会报500的错误，所以没有直接获取到转换字符串，具体网址是：https://epsg.io/，有兴趣的小伙伴可以自己试试。）

var transformStr = "+proj=tmerc +lat_0=0 +lon_0=131.46 +k=1 +x_0=42100 +y_0=5000.0 +ellps=GRS80 +units=m +no_defs"

需要说明的是这些参数均在proj4官网可以找到，还有也可以从这篇博客【ArcGIS的.prj文件生成proj4格式的字符串】上可以找到相对应的参数，由于本人也是短时间看。没能对所有的参数名和参数值有较深的了解，喜欢的研究的小伙伴可以看看官方文档。

4.最后一句就是创建Map并加载地图就可以了

var crs = new L.Proj.CRS("EPSG:test2000",//这里随意定义一个新的坐标系名称，这里是以加载切片服务为例子
	transformStr , {
    
    
		origin: [-10000, 9998], // 这里可以从arcgis服务里面拿到
		resolutions: [ // 服务里 复制出所有的层级
			80,
			40,
			20,
			10,
			5,
			2.5,
			1.25,
			0.625,
			0.3125,
		]
	});
	
	//初始化地图
	var initLevel = 0; //初始地图显示等级
	var map = L.map('map', {
    
    
		maxZoom: 10,
		minZoom: 0,
		crs: crs,
		// zoomControl: false,
		// bounceAtZoomLimits: false,
		// preferCanvas: true
	}).setView([32, 131.6], initLevel);
	
	//加载切片服务（作为底图）
	L.esri.tiledMapLayer({
    
    
		url: mapurl.ele_test,
		continuousWorld: true
	}).addTo(map);
	
	//加载要素服务（作为专题图）
	L.esri.tiledMapLayer({
    
    
	  url: mapurl.feature_test_url,
	  continuousWorld: true
    }).addTo(map);

实现的效果

如下图所示，大功告成了！！！

存在的问题

需要说明的一点，经过我测试的点击识别的效果，属性查询显示的坐标不是独立坐标系的坐标，而是经纬度，我个人理解是，这个proj4.js和proj4leaflet.js是将所有独立坐标系转换到地理坐标系了。但是，坐标值虽然和正常思路不同，但不影响地图正常的功能。以上就是，博客的全部内容，如果有内容上的错误，欢迎各位大佬提出，指正。

参考资料

1.leafet官网：https://leafletjs.com/
2.proj4的参考文档：https://proj.org/about.html
3.参考的另外两篇博客：
[1] 彻底理解Leaflet之 L.CRS + 搞定Leaflet多坐标系拓展
[2] leaflet.js/proj4.js自定义坐标系及使用