iClient for Leaflet通过点击实现切换地图中心点定位

最新推荐文章于 2024-05-17 00:00:00 发布

supermapsupport

最新推荐文章于 2024-05-17 00:00:00 发布

阅读量2.1k

点赞数

分类专栏： WebGIS 文章标签： SuperMap 前端 javascript

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/121475169

版权

WebGIS 专栏收录该内容

136 篇文章 29 订阅

订阅专栏

本文介绍了Leaflet地图框架中两种平移地图的方法：map.panTo用于将地图平移到指定中心点，map.panBy则通过像素值平移地图。通过示例代码展示了如何在JavaScript中实现这两个功能，并提供了实际效果的描述。

摘要由CSDN通过智能技术生成

作者：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（通过像素点平移）,此时将地图平移到黄点处：

supermapsupport

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iClient for Leaflet通过点击实现切换地图中心点定位

作者：Carlo前景：在操纵地图时除了鼠标、触摸交互移动地图，通过map.panBy和map.panTo也可以移动地图。 map.panTo（平移至中心点）：将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。 map.panBy（通过像素点平移）：通过给定的像素值对地图进行平移。 L.map中文API介绍：Leaflet地图框架使用手册——L.Map_w87574159的博客-CSDN博客_leaflet map【Leafletjs】4.L.Ma...
复制链接

扫一扫

专栏目录