leaflet限制地图拖动范围

最新推荐文章于 2023-12-11 15:02:57 发布

原创最新推荐文章于 2023-12-11 15:02:57 发布 · 8.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ArcGIS #leaflet

Leaflet 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Leaflet版本1.0.3中限制ArcGIS 10.2地图服务的拖动范围，以防止地图超出其实际覆盖区域，提升用户体验。

工作中，有的地图服务，整体范围不是很大，导致访问服务，漫游拖动时，有把地图拖到地图范围外的现象。

为了方便用户交互体验，对地图服务的拖拽范围进行限制。

地图api： leaflet version1.0.3

地图服务：arcgis10.2

主要代码如下：

引入leaflet js、css

<link rel="stylesheet" href="leaflet.css">
<script src="leaflet-src.js"></script>
<div id="map"></div>
<div id="coords"></div>

<script>
  var corner1 =  L.latLng(latitude, longitude), //设置左上角经纬度
  var corner2 = L.latLng(latitude, longitude),	//设置右下点经纬度
  var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围
  var map = L.map('map',{
	crs: L.CRS.EPSG3857, //wgs1984坐标系
	maxBounds: bounds
  });
  map.setView([39.9, 116.39], 17); //设置地图中心点，zoom缩放级别

  L.esri.tiledMapLayer({
	url: "https://"+服务器ip+":6080/ArcGIS/rest/services/myMap/MapServer" //地图切片服务的访问地址	
	minZonm: 15,
	maxZomm: 21,
	...	//其他设置项
  }).addTo(map);

  map.on('mousemove',function(e){
	var $coords = document.getElementById("coords");
	$coords.innerHTML("经纬："+e.latlng.lng.toFix(4)+",纬度"+e.latlng.lat.toFix(4));
  });
</script>