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

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

Leaflet修改地图中心点定位
前景:在操纵地图时除了鼠标.触摸交互移动地图,通过map.panBy和map.panTo也可以移动地图. map.panTo(平移至中心点):将地图平移到给定的中心.如果新的中心点在屏幕内与现有的中心 ...
SuperMap iClient for Leaflet实现拖动半径进行距离查询
作者:lly 我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标拖动进行距离查询.先来看一看是什么效果: 说明本文使用的数据为iserver自带的范例数据长春市区图:查询的圆点是 ...
LeafletJS 简单使用1 - 地图标点 L.marker()、清除标点 layerGroup.clearLayers() 【SuperMap iClient for Leaflet】超图的使用
目录一.业务需求二.参考文档三.实现思路四.参考代码 4.1 安装依赖 4.2 生成一张地图 4.3 标点_自定义标点图标 4.4 清除标点五.用到的 API 六.整体代码 + 页面展示七 ...
微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...
angular点击按钮弹出页面_Axure RP8：如何做出点击按钮切换页面效果？
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...

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

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

最新文章

热门文章