当前位置: 首页 > 工具软件 > Leaf > 使用案例 >

leaflet基本使用

宓季同
2023-12-01

目录

创建地图(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);

 类似资料: