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

最新推荐文章于 2025-05-16 14:35:30 发布

原创最新推荐文章于 2025-05-16 14:35:30 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#leafet #ArcGIS Server #动态地图 #切片地图

WebGIS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Leaflet中加载ArcGIS Server地图服务，包括动态地图和切片地图的加载方法。通过实例演示了如何设置地图中心点、缩放等级及地图服务地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习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);//加载