leaflet的基础用法

leaflet的基础知识

1. divIcon自定义图标

var myIcon = L.divIcon({className: 'my-div-icon'});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

2.featureGroup 创建一个特征组，可选择给定一组初始层和一个options对象

L.featureGroup([marker1, marker2, polyline])
    .bindPopup('Hello world!')
    .on('click', function() { alert('Clicked on a member of the group!'); })
    .addTo(map);

3.geoJSON 表示一个 GeoJSON 对象或一组 GeoJSON 对象。允许您解析 GeoJSON 数据并将其显示在地图上

L.geoJSON(data, {
    style: function (feature) {
        return {color: feature.properties.color};
    }
}).bindPopup(function (layer) {
    return layer.feature.properties.description;
}).addTo(map);

4.map 在给定

元素的 DOM ID 和可选的对象字面量的情况下实例化地图对象Map options。

var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

5.marker 用于在地图上显示可点击/可拖动的图标

L.marker([50.5, 30.5]).addTo(map);

6.polyline 在给定地理点数组和可选的选项对象的情况下实例化折线对象。您可以通过传递地理点数组来创建Polyline具有多条单独线 ( ) 的对象。

var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());