Leaflet.js是一个部署简单，交互式，轻量级web地图开源交互库-BFW插件库

Leaflet.js是一个部署简单，交互式，轻量级web地图开源交互库

Leaflet.js是一个开源库，使用它我们可以部署简单，交互式，轻量级的Web地图。

Leaflet JavaScript库允许您使用图层，WMS，标记，弹出窗口，矢量图层（折线，多边形，圆形等），图像叠加层和GeoJSON等图层。

您可以通过拖动地图，缩放（通过双击或滚轮滚动），使用键盘，使用事件处理以及拖动标记来与Leaflet地图进行交互。

Leaflet支持浏览器，如桌面上的Chrome，Firefox，Safari 5 +，Opera 12 +，IE 7-11，以及Safari，Android，Chrome，Firefox等手机浏览器。

Leaflet还支持显示国内的地图服务商，如百度、腾讯、高德、智图等。

使用方式：

第一步引入插件及css

第二步准备dom

’ <div id="map" style="width: 900px; height: 580px"></div>

第三步配置参数

 var mapOptions = {
            center: [17.385044, 78.486671],//初始中心点
            zoom: 10//缩放级别
         }
         // 创建一个地图对象
         var map = new L.map('map', mapOptions);
         //创建一个图层
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         // 将图层添加到地图上
         map.addLayer(layer);

完整代码：

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leaflet.1.6.0.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/leaflet.1.6.0.css">
</head>

<body>
    <div id="map" style="width: 900px; height: 580px"></div>
    <script>
 var mapOptions = {
            center: [17.385044, 78.486671],//初始中心点
            zoom: 10//缩放级别
         }
         // 创建一个地图对象
         var map = new L.map('map', mapOptions);
         //创建一个图层
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         // 将图层添加到地图上
         map.addLayer(layer);
    </script>
</body>

</html>

github地址：https://github.com/Leaflet/Leaflet