作者:Carlo
前景:在操纵地图时除了鼠标、触摸交互移动地图,通过map.panBy和map.panTo也可以移动地图。
-
map.panTo(平移至中心点):将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。
-
map.panBy(通过像素点平移):通过给定的像素值对地图进行平移。
L.map中文API介绍:Leaflet地图框架使用手册——L.Map_w87574159的博客-CSDN博客_leaflet map
【Leafletjs】4.L.Map 中文API - fengl - 博客园
参考高德地图代码:地图的平移-地图属性-示例中心-JS API 2.0 示例 | 高德地图API
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiledMapLayer4326"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class="input-item">
<input id="piexBtn" type="button" class="btn" value="平移像素值:(50,100)"/>
</div>
<div class="input-item">
<input id="pantoBtn" type="button" class="btn" value="地图中心点平移至:(116.405467,39.907761)"/>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, url = host + "/iserver/services/map-world/rest/maps/World";
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [39.907761,116.405467],
maxZoom: 18,
zoom: 3
});
var point=L.circleMarker([39.907761,116.405467], {color: 'red'}).addTo(map);
//地图中心点平移
document.getElementById('pantoBtn').addEventListener('click', function() {
map.panTo([62.4043916666667,99.0155527777778]);
var point2=L.circleMarker([62.4043916666667,99.0155527777778], {color: 'blue'}).addTo(map);
});
//平移像素值
document.getElementById('piexBtn').addEventListener('click', function() {
map.panBy([50, 100]);
var point3=L.circleMarker([50, 100], {color: 'yellow'}).addTo(map);
});
L.supermap.tiledMapLayer(url).addTo(map);
</script>
</body>
</html>
地图初始化中心点在红点处:
利用map.panTo(平移至中心点),此时将地图中心点平移到蓝点处:
map.panBy(通过像素点平移),此时将地图平移到黄点处: