Leaflet:Map类属性及方法
1、初始化
L.map(<String> id , options ?) //用地图div的id创建 L.map(<HTMLElement>el , options?) //用地图div的name创建
2、参数:
//控件Control attributionControl //地图右下角的信息说明控件,默认true开启 zoomControl //左上角的缩放控件,默认true开启 //交互性 closePopupOnClick //如果点击(click)地图时不想Popup被关闭,把该参数设置为false zoomSnap //强制地图的缩放后地图等级始终为这个参数的倍数,对fitBounds()方法作用很大 zoomDelta //每次缩放的倍数,默认1 trackResize //地图是否跟随浏览器的变化而变化,默认true boxZoom //是否允许地图缩放到一个区域,这个区域是你按住SHIFT同时在地图上画的一个矩形区域,默认true doubleClickZoom //是否允许双击鼠标进行放大,按住SHIFT双击鼠标缩小,默认true;如果将该参数值设置为'center',则缩放时会固定以view的中心为中心进行缩放,不随鼠标的位置变化而变化 dragging //是否允许地图被鼠标拖动,默认true //地图状态 center //最初的地理坐标,类型是LatLng zoom //初始缩放等级 minZoom //最小缩放等级 maxZoom //最大缩放等级,这两个如果不确定就不用写,会根据地图来源自动确定 maxBounds //类型LatLngBounds,地图会被锁定在该Bounds处 //如果要修改,可以通过方法setMaxBounds设置 layers //一开始就被加入到地图中的图层,类型是List[],其中的元素类型为Layer //动画 zoomAnimation //进行缩放时是否有动画,默认true fadeAnimation //是否开启tile fade animation,这里我也不知道该怎么翻译 markerZoomAnimation //marker在缩放时是否有动画,如果没有,它将在缩放期间消失并在缩放结束后显示,默认false
//键盘 keyboard //是否启用键盘+/-号进行缩放、上下左右箭头进行平移,默认true keyboardPanDelta //键盘每次箭头平移的像素数,默认80 //鼠标滚轮 scrollWheelZoom //是否启用滚轮缩放,默认true wheelDebounceTime //鼠标滚轮的最大转速,默认40,单位ms,即滚轮最大转速为1圈/40ms wheelPxPerZoomLevel //标定滚轮转过的角度与放大倍数的关系
如果要做移动端开发,还有参数Touch interaction,这里不再详述了,可以去官网上Leaflet Map Options查看。
3、事件
//覆盖图层——overlay 平移——pan //图层 baselayerchange //通过layers control改变底图时触发(以下均省略触发二字) overlayadd //当通过layers control选择了一个覆盖图层 overlayremove //当通过layers control取消选择一个覆盖图层 layeradd //当一个新图层被添加到地图中 layerremove //当一些图层从地图中移除 //地图状态改变 zommlevelschange //由于添加或移除图层所引起的地图缩放等级的改变 resize //地图大小改变 unload //地图被移除(remove方法) viewreset //内容改变(常发生在zoom或load时),在定制覆盖图层时很有用 load //地图被初始化(即它的center和zoom是第一次设置时) zoomstart //地图将要缩放前(缩放动画前) movestart //地图将要被移动前 zoom //在地图大小改变时重复触发(包括zoom和fly) move //在地图移动时重复触发 (包括pan和fly) zoomend //地图大小改变后(所有动画结束后) moveend //地图中心停止改变后 //popup popupopen //当一个popup打开时 popupclose //当一个popup关闭时 autopanstart //当由于打开一个popup而导致地图移动时 //定位 locationerror //定位失败时 locationfound //定位成功时 //交互式 最重要也最有用 click //在地图上点击时 dblclick //双击时 mousedown //按下鼠标 mouseup //松开鼠标 mouseover //鼠标进入地图中 mouseout //鼠标离开地图 mousemove //鼠标在地图上移动 contextmenu //按住鼠标右键以显示浏览器的contextmenu时 keypress //按了一个字符键(非系统键) keydown //按住一个键(任何键) keyup //松开一个键 preclick //点击地图前,当你想要在点击事件触发前发生一些操作时起作用
4、方法
用法:实例化对象.方法(参数);
//Layers和Controls addControl(<Control>control) //将Control加入到地图中 removeControl(<Control>control) //从地图中移除Control addLayer(<Layer>layer) //将Layer加入到地图中 removeLayer(<Layer>layer) //从地图中移除Layer hasLayer(<Layer>layer) //如果Layer在地图中,就返回true eachLayer(<function>fn)//对地图中的每个Layer进行函数function处理(迭代) openPopup(<Popup>popup) //打开指定的Popup,关闭之前打开所有的Popup closePopup(<Popup>popup) //关闭指定的Popup,如果不写参数,就会关闭之前openPopup的那个 //地图状态 参数后边加问号?表示该参数是可选参数 setView(<LatLng>center , <Number>zoom, <zoom/pan options> options?) //设置地图视图(center和zoom),option?表示可选参数,可选参数是Zoom/pan options setZoom(<Number>zoom , <zoom/pan options>options) //设置地图的zoom级别 zoomIn() //放大 zoomOut() //缩小 setZoomAround(<LatLng>latlng,<Number>zoom)//保持latlng标定的经纬相对于地图不变,缩放至zoom级 setZoomAround(<Point>offset,<Number>zoom)//以地图左上角为(0,0),保证相对于该点的Point offset相对于位置地图不变,缩放至zoom级 fitBounds(<LatLngBounds>bounds) //设置地图视角为包含限制范围bounds的最大Zoom等级
//fitBounds配合Polyline等Vector Layer的getBounds()方法,可以起到聚焦到该对象的作用
//map.fitBounds(polyline.getBounds())
fitWorld() //设置地图视角为包含整个世界的最大Zoom等级 panTo(<LatLng>latlng) //平移地图至指定坐标 panBy(<Point>offset) //斜着平移,横向平移像素为offset的x,纵向平移的像素为offset的y,整个平移过程会以动画的形式显示(如果值太小可能看不出动画的效果) flyTo(<LatLng>latlng,<Number>zoom?) //用缓慢平移的方式(像在fly)转移地图视角到给定经纬度latlng flyToBounds(<LatLngBounds>bounds) //用fly的方式转移地图视角到限制区域bounds setMaxBounds(<LatLngBounds> bounds) //控制(锁定)地图视角到限制区域bounds setMinZoom(zoom) //最低zoom倍数 setMaxZoom(zoom) //最高zoom倍数 panInsideBounds(<LatLngBounds>bounds)//平移到给定边界内的最近视图 panInside(<LatLng>latlng) invalidateSize(<Zoom/pan options>options)//在地图容器的size改变时自动更新地图的大小 invalidateSize(<Boolean>animate)//同上 //后4个方法我还没搞懂具体用法,只是做了粗略翻译
//地理空间定位 locate(<Locate options>options) //尝试从Geolocation API获取用户定位;当获取成功时会触发locationfound事件,失败时则会触发locationerror事件。成功时将会设置地图视角到用户位置;失败时则是整个世界的视角。如果页面不使用HTTPS,该方法就会失效(比如Chrome50或者更新版本)。 stopLocate() //停止监视之前定位的位置(如果之前map.locate参数{watch:true},就会一直监视该区域),如果参数{setView:true},就不会重置地图视角
补充:如果要正常显示,必须设置好zoom和center
//1、初始化时设置 var map=L.map(map , {center:latlng , zoom:10 }); //2、通过setView设置 map.setView(latlng,10);
5、属性Properties
Handler是一个类似(函数或者行为)开关的东西,Handler中有两个方法enable()、disable()负责管理这种行为是否允许。Handler的官方说明:Leaflet Handler
//Control zoomControl //类型Control.zoom,控制默认zoom control //Handler boxZoom //矩形框缩放(也就是按住SHIFT再按住鼠标左键在地图上画一个框的方式进行缩放) doubleClickZoom //双击放大 dragging //拖动 keyboard //键盘相关的缩放、平移等 scrollWheelZoom //滚轮缩放
2参数与5属性的区别是,2参数是初始化时候的可选参数,设置时要写成{ Key : Value }的形式;5是Map类的属性,可以通过map.xxx访问。
6、Map Panes
Panes是一个用来控制Layers顺序的DOM元素;可以翻译为窗口。每个Map都有以下这些默认的Panes,它们的区别仅仅在于zIndex的不同——zIndex高的在显示时就会覆盖在zIndex低的上边。
mapPane //Z:'auto'; 包含其他所有Panes的Pane tilePane // 200 ;GridLayer和TileLayer overlayPane //400; Overlay shadow shadowPane //500; Vector(polylines,polygons...)、ImageOverlay、VideoOverlay markerPane //600; Icon Marker tooltipPane //650; Tooltip popupPane //700; Popup
通过Pane可以看出,默认情况下当几个元素重叠时,显示顺序是Popup-tooltip....
分类:
Leaflet
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性