最近由於項目需求，於是開始了leaflet的學習，leaflet在加載地圖上具有自己獨特的優勢，能夠在各種瀏覽器（包括手機）下面很好的運行，並且具有很多的插件供我們選擇。在該教程中， 我們使用了除leaflet之外的額外插件有 esri-leaflet.js(https://esri.github.io/esri-leaflet/)、L.Control.MousePosition.js(https://github.com/ardhi/Leaflet.MousePosition)、【proj4.js與proj4leaflet.js】(https://github.com/kartena/Proj4Leaflet)。
1. 動態圖層加載
在加載還圖層的時候注意，此時的URL只能是動態圖層服務地址，不能具體到某個圖層。加載代碼如下：
let map = L.map('divclass').setView([28.751407,118.628740],12);
let dynamicLayer = L.esri.dynamicMapLayer({
url:'http://localhost:6080/arcgis/rest/services/js/jsdxt/MapServer/',
opacity: 0.8,
f:'json'
});
map.addLayer(dynamicLayer);
2. 要素圖層加載
let map = L.map('divclass').setView([28.751407,118.628740],12);
let featureLayer = L.esri.featureLayer({
url:'http://localhost:6080/arcgis/rest/services/js/tx/MapServer/1/'
});
map.addLayer(featureLayer);
3. 切片圖層的加載
our map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) and the default scale options used by Google Maps, Bing Maps and .Esri Leaflet will not support any other spatial reference for tile layers. 這個摘自官方的一段（https://esri.github.io/esri-leaflet/api-reference/layers/tiled-map-layer.html），大概的意思是當我們使用L.esri.tiledMapLayer的時候，支持WKID為102100/3857的投影地圖，既是我們平常使用的web墨卡托投影的地圖，其余的地圖投影不支持，此時我們就需要用到proj4.js與proj4leaflet.js這兩個庫來進行自定義投影，具體的投影轉換已經各種參數的定義，我們可以通過（https://epsg.io/）這個網站來獲取，比如我們搜索4490,如下圖，箭頭所指的就是我們使用Proj4來進行投影時的定義參數：
當我們獲取到了投影參數之后，我們就可以使用L.Proj.CRS來定義一個投影了，具體代碼如下：
let tileMapUrl ="http://localhost:6082/arcgis/rest/services/jhzhps/JHJT/MapServer"; 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不能同時配置 }); let map = L.map('divclass',{ crs:CRS_4490 }).setView([29.108339,119.647787],13); let tileMapLayer = L.esri.tiledMapLayer({ url:tileMapUrl }); //L.esri.basemapLayer('Gray').addTo(map); map.addLayer(tileMapLayer); L.control.mousePosition({ 'position': 'bottomright' }).addTo(map);
此時，我們已經完成了對切片，要素，動態地圖的加載，此代碼僅供初學者學習借鑒，整個文件的代碼如下圖所示：
<!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="../floodIndex/leaflet/leaflet.css">
<link rel="stylesheet" type="text/css" href="../floodIndex/css/L.Control.MousePosition.css">
<!--添加leaflet引用-->
<script type="text/javascript" src="../floodIndex/leaflet/leaflet-src.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/esri-leaflet.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/L.Control.MousePosition.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/proj4.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/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>
//1. 動態圖層加載 注意此時的URL只能是動態圖層服務地址 只能具體到某個圖層
let map = L.map('divclass').setView([28.751407,118.628740],12);
let dynamicLayer = L.esri.dynamicMapLayer({
url:'http://localhost:6080/arcgis/rest/services/js/jsdxt/MapServer/',
opacity: 0.8,
f:'json'
});
map.addLayer(dynamicLayer);
//2.加載要素圖層
let map = L.map('divclass').setView([28.751407,118.628740],12);
let featureLayer = L.esri.featureLayer({
url:'http://localhost:6080/arcgis/rest/services/js/tx/MapServer/1/'
});
map.addLayer(featureLayer);
//3.加載切片圖層
/**
* Your map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857)
* and the default scale options used by Google Maps, Bing Maps and .
* Esri Leaflet will not support any other spatial reference for tile layers.
*/
let tileMapUrl ="http://localhost:6082/arcgis/rest/services/jhzhps/JHJT/MapServer";
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不能同時配置
});
let map = L.map('divclass',{
crs:CRS_4490
}).setView([29.108339,119.647787],13);
let tileMapLayer = L.esri.tiledMapLayer({
url:tileMapUrl
});
//L.esri.basemapLayer('Gray').addTo(map);
map.addLayer(tileMapLayer);
L.control.mousePosition({
'position': 'bottomright'
}).addTo(map);
</script>
</body>
</html>