leaflet基本使用
目录
创建地图(map)
添加图层(tileLayer)
创建标记(marker)
图标(icon/divIcon)
弹框(bindPopup)
options选项
方法
工具提示(bindTooltip)
options选项
窗格(pane)
常用方法
创建地图(map)
let map= L.map('map', {minZoom: 4,maxZoom: 17,zoom: 14,center: [37.632111, 114.91680237],attributionControl: false,
});
- options选项
- maxZoom:地图最大的缩放等级
- minZoom:地图最小的缩放等级
- zoom:地图默认的缩放等级
- center:地图默认的中心点位置[纬度,经度]
- attributionControl:是否将 attribution 版权控件添加到地图中
- zoomControl:是否将zoom缩放控件添加到地图中
- crs:地图使用的坐标系,默认使用的是EPSG3857坐标系
- layers:添加到地图的图层
- closePopupOnClick:用户点击图层时打开的弹框是否自动关闭
- dragging:地图是否可以进行拖动,滑动
添加图层(tileLayer)
let tileLayer = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/.../',{maxZoom: 17,minZoom: 4,
}).addTo(map);
创建标记(marker)
let marker = L.marker([纬度,经度], { icon: 图标 })
- icon:将创建的标记改为一个图标
- title:鼠标移动到标记上时显示的标记
- opacity:标记的不透明度
注意: icon不定义就会使用leaflet自带的图标
图标(icon/divIcon)
icon图标:提供一个图片或图像代替标记
var myIcon = L.icon({iconUrl: 'my-icon.png',iconSize: [38, 95],iconAnchor: [22, 94],popupAnchor: [-3, -76],shadowUrl: 'my-icon-shadow.png',shadowSize: [68, 95],shadowAnchor: [22, 94]
});
option选项
- iconUrl:图标图像的地址(URL)
- iconSize:图标图像的尺寸,单位为像素(number)
- className:设置一个class自定义图标的CSS属性
- popupAnchor:弹出的窗口的坐标,相对于图标的描点而言,将在这里打开弹框 ([0,0])
- iconAnchor:图标相对其左上角的坐标,默认情况下,图标的左上角是标记的位置([0,0])
divIcon图标:提供一个div元素作为图标代替标记
let divIcon = L.divIcon({html: `<div style="width:30px;height:30px;background:red;border- radius:30px;text-align:center;line-height:30px;color:#ffffff">北京</div>`,className: 'icon', // 图标父节点的class属性popupAnchor: [8, 2], // 弹出框(popup)的坐标,相对于图标描点而言,将从该点打开
});
- html:自定义HTML代码,放入div元素内
divIcon继承icon的option选项
弹框(bindPopup)
marker.bindPopup("我是popup",options).openPopup();
options选项
- maxWidth(最大宽度):弹出框的最大宽度。
- minWidth(最小宽度):弹出框的最小宽度。
- maxHeight(最大高度):设置后,如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器。
- autoPan(自动平移):如果你不想地图自动平移来适应打开的弹出框,就设置其为false。
- closeButton(关闭按钮):设置弹出窗口中是否出现关闭按钮。
- offset(补偿值):弹出窗口位置的补偿值。在同一图层中打开弹出窗口时对于控制锚点比较有用。
- autoPanPadding(自动平移填补):在地图视图自动平移产生后弹出窗口和地图视图之间的边缘。
- zoomAnimation:决定是否在所在级别上弹出窗口。如果你在弹出窗口中有flash内容的最好将其设置为不可用。
- closeOnClick:默认为true,如果不想用户点击地图时弹框自动关闭,就请设置为false
- className:设置一个class自定义弹出窗口的CSS属性
方法
- addTo:将弹出窗口添加到地图上。
- openOn:将弹出窗口添加到地图上并将之前的一个关闭。与map.oenPopup(popup)方法相同。
- setLatLng:设置弹出窗口打开的地理上的点位。
- setContent:设置弹出窗口的HTML内容。
工具提示(bindTooltip)
使用示例
marker.bindTooltip("my tooltip text",options).openTooltip();
options选项
- direction:打开tooltip的方向,可以为left,right,bottom,top,center,auto
- permanent:是永久打开tooltip还是只在鼠标移动时打开
- sticky:如果为true,tooltip将跟随鼠标移动,而不是固定在特征中心
- opacity:tooltip的透明度
窗格(pane)
map.createPane('pane'); // 创建窗格
map.getPane('pane').style.zIndex = 999; // 设置窗格的层级
var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{x}/{y}/{z}.png'),{attribution: '©OpenStreetMap, ©CartoDB',pane: 'labels' // 绑定窗格
}).addTo(map);
常用方法和事件
将给定的图层添加到地图中
map.addLayer(this.tileLayer);
遍历所有图层然后删除
map.eachLayer(function (layer) {layer.remove();
})
// eachLayer()方法:遍历地图上所有图层
删除地图上单个图层
map.removeLayer(layer)
设置地图的中心点和层级
map.setView([lat: 30.890944, lng: 120.606944],10);
获取地图当前缩放级别
map.getZoom();
获取当前地图中心点
map.getCenter();
设置地图的最小或最大缩放级别
map.setMinZoom(10);
map.setMaxZoom(16);
判断地图上是否已存在某个图层
map.hasLayer(this.tileLayer);
leaflet基本使用相关推荐
- gatsby_如何使用Gatsby和Leaflet创建夏季公路旅行地图绘制应用程序
gatsby Get ready for the summer by building your own road trip mapping app with this step-by-step gu ...
- leaflet地图框架
leaflet 中文API LeafLet js 官网: http://leafletjs.com/index.html LeafLet js 官网demo: http://leafletjs.com ...
- react中试用leaflet简单起步
写在最前边,前不久的一个项目中要做一个地图的数据可视化需求.项目中用到了 Leaflet.项目到现在功能已经基本实现,现在写下来做一下记录.Demo是用 create-react-app 搭建的.源码 ...
- Angular 个人深究(五)【外部包引用 Leaflet 简单实用】
2019独角兽企业重金招聘Python工程师标准>>> Leaflet 使用 最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet, ...
- vue+vuex+leaflet Jest单测踩坑指南
环境 Vue CLI 3 TypeScript 3.1.4 Leaflet 1.3.4 相关文档 vue-test-utils.vuejs.org/zh/guides/#- 踩坑 1.iview按需引 ...
- 百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录
webpack+百度地图 创建 script标签进行加载 export function MP(ak){ return new Promise(function (resolve, reject){ ...
- Leaflet绘制热力图【转】
http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...
- 入门Leaflet之小Demo
入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 Leaflet GIS 基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Dat ...
- leaflet的入门开发(一)
2016年9月27日-1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...
- SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...
最新文章
- 牛客 Tree(最小深度总和)(两种方法求重心)难度⭐⭐⭐
- 交换esc和左ctrl ;caps lock与右ctrl
- Android 5.1上MultiDex异常: DexPathList NoSuchMethodException makeDexElements
- 英文金曲大赛_JAVA
- DataGrid 完全攻略之二(把数据导出到Excel)
- [转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
- shell中循环执行某个进程获取返回值,并循环执行直到函数出错
- bootstrap搜索框:click下拉展开改hover展开(两种代码)
- vue请求数据传给子组件_vue.js基础,父组件如何向子组件传递数据「607」
- cmake 生成mysql_采用cmake方式编译安装MySQL
- 二路单调自增子序列模型【acdream 1216】
- springmvc整合dubbo
- string的compare operator
- 小米距告别破发还差2分钱
- C++中使用MediaInfo库获取视频信息
- 苹果被拒的血泪史。。。(update 2015.11)
- 数据结构-----队列笔记
- 安卓网络测试工具_专业网速测试工具高级版,支持5G网络测试网速
- PMP考试的成绩怎么算?
- 两个excel表格取交集_(怎么用excel把两个表格数据做交集)如何把不同excel表格数据取交集...