leaflet 调用arcgis瓦片服务参考文章 https://blog.csdn.net/u012320231/ar

参考文章 blog.csdn.net/u012320231/…

其实真的实现后需要的东西不多，但是网站文献极少。找了很久才找到调用方法并且调用成功。在此记录
完整代码在最下方这里记录下最简单的调起瓦片服务需要修改的地方

// 自定义CRS resolutions需要改为自己服务的resolutions todo 
    let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
        resolutions: [
            1.40625,
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125E-4,
            3.4332275390625E-4,
            1.71661376953125E-4,
            8.58306884765625E-5,
            4.291534423828125E-5,
            2.1457672119140625E-5,
            1.0728836059570312E-5,
            5.364418029785156E-6,
            2.682209064925356E-6,
            1.3411045324626732E-6
        ],
        origin: [-179.9999, 90.00016],
        // bounds: L.bounds([117.75370429660006, 26.99449191557761, ], [123.63262097540007, 32.2668788575695])
        //这里可以有origin、transformation、scales、resulutions、bounds几个参数提供
        //选择，其中scales与resolutions不能同时配置
    });

这里的resolutions和origin需要根据自己的arcgis瓦片服务修改，如下图

上图为我这边的arcgis瓦片服务

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>leaflet实例</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--添加leaflet样式文件-->
    <link rel="stylesheet" type="text/css" href="./leaflet.css">
    <!--添加leaflet引用 需要自行cdn 我这边用的为本地路径-->
    <script type="text/javascript" src="./leaflet-src.js"></script>
    <script type="text/javascript" src="./esri-leaflet.js"></script>
    <script type="text/javascript" src="./proj4.js"></script>
    <script type="text/javascript" src="./proj4leaflet.js"></script>
    <style>
        html,body{
            margin:0;
            padding: 0;
        }
        #divclass{
            height:calc(100% - 50px) ;
            width: 100%;
            background: white;
            position: absolute;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 50px">
 
    </div>
  <div id="divclass">
 
  </div>
 
<script>
 
 
   
    // arcgis地图服务的url
    let tileMapUrl ="";
    // 自定义CRS resolutions需要改为自己服务的resolutions todo 
    let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
        resolutions: [
            1.40625,
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125E-4,
            3.4332275390625E-4,
            1.71661376953125E-4,
            8.58306884765625E-5,
            4.291534423828125E-5,
            2.1457672119140625E-5,
            1.0728836059570312E-5,
            5.364418029785156E-6,
            2.682209064925356E-6,
            1.3411045324626732E-6
        ],
        origin: [-179.9999, 90.00016],
        // bounds: L.bounds([117.75370429660006, 26.99449191557761, ], [123.63262097540007, 32.2668788575695])
        //这里可以有origin、transformation、scales、resulutions、bounds几个参数提供
        //选择，其中scales与resolutions不能同时配置
    });
    // crs 设置投影，因为arcgis地图服务需要的投影和leaflet默认的不同，需要引入crs来自定义投影 这里使用自定义的CRS_4490投影
    let map = L.map('divclass',{
        crs:CRS_4490
    }).setView([23.125888,113.389599],11);
    // 配置瓦片地址
    let tileMapLayer = L.esri.tiledMapLayer({
        url:tileMapUrl
    });
    //L.esri.basemapLayer('Gray').addTo(map);
    map.addLayer(tileMapLayer);

</script>
</body>
</html>