学习leaflet笔记（一）加载 ArcGIS Server 地图

学习leaflet笔记（一）加载 ArcGIS Server 地图

leaflet版本1.5.1，esri-leaflet-v2.3.0版本2.3.0，ArcGIS Server 版本10.2

导入必要CSS、JS

样式主要使用leaflet.css ，js需要导入leaflet.js/esri-leaflet-debug.js

<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js" type="text/jacascript" charset="utf-8"></script>
<script src="esri-leaflet-v2.3.0/dist/esri-leaflet-debug.js" type="text/jacascript" charset="utf-8"></script>

加载地图

定义地图容器

<div id="mapDiv" style="width:100%;height:100%"></div>

加载动态地图

初始化

//设置显示地图中心点时，注意是先纬度后经度，默认缩放等级初始不要太高
var map = L.map("mapDiv").setView([30.65, 104.05], 10);//成都市

加载动态图使用，L.esri.dynamicMapLayer方法

L.esri.dynamicMapLayer({
		url:"http://192.168.31.201:6080/arcgis/rest/services/test/map01/MapServer",//地图服务地址
		minZoom:4,//最小缩放等级
		minZoom:21,//最大缩放等级
}).addTo(map);//加载

加载切片地图

初始化

//设置显示地图中心点时，注意是先纬度后经度，默认缩放等级初始不要太高
var map = L.map("mapDiv").setView([30.65, 104.05], 10);//成都市

加载切片地图使用，L.esri.tiledMapLayer方法

L.esri.tiledMapLayer({
		url:"http://192.168.31.201:6080/arcgis/rest/services/test/map02/MapServer",//地图服务地址
		minZoom:4,//最小缩放等级
		minZoom:21,//最大缩放等级
}).addTo(map);//加载