不正经

这个屌丝很懒，什么也没留下！

热门标签

Leaflet-学习_leaflet中文官网

作者：不正经 | 2024-03-14 13:57:33

踩

leaflet中文官网

一、官网

英文官网：Leaflet

中文官网：Leaflet

二、介绍

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。

Leaflet 简单、高效并且易用。它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的API 和完善的案例, 以及可读性较好的源码。

三、下载Leaflet

【1】CDN


// html头部引入
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 
// 为避免潜在的安全问题，建议在使用CDN中的Leaflet时启用subresource integrity
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

【2】下载到本地

版本	说明
Leaflet 1.7.1	稳定版，于2020年9月3日发布。
Leaflet 1.8-dev	开发版，在master分支上开发。
Leaflet 0.7.7	旧版，于2013年11月18日发布，最新更新于2015年10月26日。

在从上述链接下载文件到本地，将下载的文件解压到项目目录中，并将其添加到HTML代码的开头


<link rel="stylesheet" href="/leftlet/leaflet.css" />
<script src="/leftlet/leaflet.js"></script>

【3】npm

npm install leaflet

四、简单入门教程（开始使用leafLet）

【1】案例

在 id 为map的 div 中创建一个地图, 选择瓦片数据源, 添加一个标记点并且在弹出层上显示文本


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map">
  </div>
 
  <script>
    // 创建一个地图
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8
    });
 
    // 选择瓦片数据源
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
    // 添加一个标记点并且在弹出层上显示文本
    L.marker([23.127013, 113.366266]).addTo(map).bindPopup('我在这里').openPopup();
  </script>
 
</body>
</html>

【2】效果

五、瓦片地图介绍

其实瓦片地图并不是什么特殊的文件，就是最普通的png图片。之所以为地图，就是带有了地理坐标。打开network，查看其请求的的url就能明白其请求的原理了。我们上面看到的地图是由一张张带有地理坐标的图片拼接起来的

首先我们要明白瓦片地图的请求原理。上面其中一个图片的URL为：https://a.tile.openstreetmap.org/8/209/112.png

主要在于最后三位，含义依次是8级的209行、112列（或者209列、112行）。8就是下图中的level（地图放大缩小层级），而行列号对应每一级level里面的唯一一个瓦片（图片），那么地图框架为我们完成的就是，在对应地图层级，请求对应范围内的瓦片，而这个协议规则一般是通用的谷歌标准（也有其他标准，看框架是否支持），比如第9级中的第一个不会叫9-0-0，而可能是9-1-1（真实可能不是）

六、 Leaflet加载各种地图

Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders 这个插件，此插件源代码如下，你可以直接复制下面代码创建为js文件（可命名为leaflet.ChineseTmsProviders.js），然后引入你的HTML页面便可使用


// this L.CRS.Baidu from https://github.com/muyao1987/leaflet-tileLayer-baidugaode/blob/master/src/tileLayer.baidu.js
 
if (L.Proj) {
    L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
        resolutions: function () {
            var level = 19
            var res = [];
            res[0] = Math.pow(2, 18);
            for (var i = 1; i < level; i++) {
                res[i] = Math.pow(2, (18 - i))
            }
            return res;
        }(),
        origin: [0, 0],
        bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
    });
}
 
L.TileLayer.ChinaProvider = L.TileLayer.extend({
 
    initialize: function(type, options) { // (type, Object)
        var providers = L.TileLayer.ChinaProvider.providers;
 
        options = options || {}
 
        var parts = type.split('.');
 
        var providerName = parts[0];
        var mapName = parts[1];
        var mapType = parts[2];
 
        var url = providers[providerName][mapName][mapType];
        options.subdomains = providers[providerName].Subdomains;
        options.key = options.key || providers[providerName].key;
 
        if ('tms' in providers[providerName]) {
            options.tms = providers[providerName]['tms']
        }
 
        L.TileLayer.prototype.initialize.call(this, url, options);
    }
});
 
L.TileLayer.ChinaProvider.providers = {
    TianDiTu: {
        Normal: {
            Map: "http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Satellite: {
            Map: "http://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Terrain: {
            Map: "http://t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        key: "174705aebfe31b79b3587279e211cb9a"
    },
 
    GaoDe: {
        Normal: {
            Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        },
        Satellite: {
            Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
        },
        Subdomains: ["1", "2", "3", "4"]
    },
 
    Google: {
        Normal: {
            Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Satellite: {
            Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
            Annotion: "http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Subdomains: []
    },
 
    Geoq: {
        Normal: {
            Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
            PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
            Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
        },
        Theme: {
            Hydro: "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
        },
        Subdomains: []
    },
 
    OSM: {
        Normal: {
            Map: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        },
        Subdomains: ['a', 'b', 'c']
    },
 
    Baidu: {
        Normal: {
            Map: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1'
        },
        Satellite: {
            Map: 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
            Annotion: 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020'
        },
        Subdomains: '0123456789',
        tms: true
    }
 
};
 
L.tileLayer.chinaProvider = function(type, options) {
    return new L.TileLayer.ChinaProvider(type, options);
};

在HTML页面中引入leaflet.ChineseTmsProviders.js，加载多种瓦片地图


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 天地图内容
    var TianDinormalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var TianDinormala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
      maxZoom: 18,
      minZoom: 5
    });
    var TianDiimgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var TianDiimga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var TianDi = L.layerGroup([TianDinormalm, TianDinormala]);
    var TianDiImage = L.layerGroup([TianDiimgm, TianDiimga]);
 
 
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var Gaodeimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var Gaodeimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
      maxZoom: 18,
      minZoom: 5
    });
    var GaodeImage = L.layerGroup([Gaodeimgem, Gaodeimga]);
 
 
    // 谷歌地图
    var Google = L.tileLayer.chinaProvider('Google.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    })
    var Googleimgem = L.tileLayer.chinaProvider('Google.Satellite.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var Googleimga = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
      maxZoom: 18,
      minZoom: 5
    });
    var GoogleImage = L.layerGroup([Googleimgem, Googleimga]);
 
 
    // OSM地图
    var OSM = L.tileLayer.chinaProvider('OSM.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
 
    // 百度地图
    var Baidu = L.tileLayer.chinaProvider('Baidu.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var Baiduimgem = L.tileLayer.chinaProvider('Baidu.Satellite.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var Baiduimga = L.tileLayer.chinaProvider('Baidu.Satellite.Annotion', {
      maxZoom: 18,
      minZoom: 5
    });
    var BaiduImage = L.layerGroup([Baiduimgem, Baiduimga]);
 
 
    // 智图地图
    var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
    var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
      maxZoom: 18,
      minZoom: 5
    });
    var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
      maxZoom: 18,
      minZoom: 5
    });
    var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
      maxZoom: 18,
      minZoom: 5
    });
    var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
      maxZoom: 18,
      minZoom: 5
    });
    var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
      maxZoom: 18,
      minZoom: 5
    });
 
 
    var baseLayers = {
      "天地图": TianDi,
      "天地图影像": TianDiImage,
 
      "高德地图": Gaode,
      "高德影像": GaodeImage,
 
      "谷歌地图": Google,
      "谷歌影像": GoogleImage,
 
      "OSM地图": OSM,
 
      "百度地图": Baidu,
      "百度影像": BaiduImage,
 
 
      "智图地图": normalm1,
      "智图多彩": normalm2,
      "智图午夜蓝": normalm3,
      "智图灰色": normalm4,
      "智图暖色": normalm5,
      "智图冷色": normalm6,
 
    }
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode], // 选择baseLayers的地图
      zoomControl: false,
      key: 'Your key', // 如果你使用天地图，请添加密钥key
    });
 
    L.control.layers(baseLayers, null).addTo(map);
    L.control.zoom({
      zoomInTitle: '放大',
      zoomOutTitle: '缩小'
    }).addTo(map);
  </script>
 
</body>
 
</html>

七、Leaflet地图小案例

【1】地图事件


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: false,
    });
 
    //地图加载完成
    map.once("loadEnd", function () {
      console.log("地图加载完成");
    });
 
    //地图点击
    map.on("click", function (e) {
      console.log("你在地图" + e.latlng + "点击了");
    });
 
    //地图双击
    map.on("dblclick", function (e) {
      console.log("你在地图上双击了！");
    });
 
    //地图移动
    map.on("move", function (e) {
      console.log("地图移动了");
    });
 
    //地图层级改变
    map.on("zoom", function (e) {
      console.log("地图层级改变了");
    });
  </script>
 
</body>
 
</html>

【2】中心点和层级显示


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
 
    .info {
      padding: 10px;
      background-color: #fff;
      border-radius: 4px;
 
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 设置地图中心点与缩放级别
    map.setView([23.165103, 113.405802], 15);
 
    // 自定义info控件
    var info = L.control();
    info.onAdd = function (map) {
      this.infoDiv = L.DomUtil.create("div", "info"); // 创建一个class为info的div
      this.update(map.getZoom(), map.getCenter()); // map.getZoom()获取地图当前层级  map.getCenter()获取地图当前中心点
      return this.infoDiv;
    };
 
    //根据当前地图状态更新显示信息
    info.update = function (zoom, center) {
      this.infoDiv.innerHTML =
        "<b>当前地图状态</b><br/>" +
        "<b>zoom: </b>" + zoom + "<br/>" +
        "<b>center: </b>" + center + "";
    };
    info.addTo(map);
 
    //监听地图状态变化
    map.on("move", moveMap);
    function moveMap(e) {
      info.update(map.getZoom(), map.getCenter());
    }
  </script>
 
</body>
 
</html>

【3】获取和设置地图可视范围


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
 
    .info {
      padding: 10px;
      background-color: #fff;
      border-radius: 4px;
 
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 设置地图当前显示范围有两种方法：一是用fitBounds(bounds),二是flyToBounds(bounds),
    // 区别在于后者有飞行动画效果，前者没有；
    // 其中bounds参数可以上一个LatLngBounds对象，也可以是一个包含矩形对角点的数组。
 
 
    // LatLngBounds对象
    var corner1 = L.latLng(30, 106);
    var corner2 = L.latLng(28.9, 105.51);
    var bounds = L.latLngBounds(corner1, corner2);
 
    // 第一种 fitBounds(bounds) 没有飞行效果
    //map.fitBounds(bounds)
 
    // 第二种 flyToBounds(bounds)有飞行效果
    map.flyToBounds(bounds);
 
    // 包含矩形对角点的数组
    // map.fitBounds([
    //   [30, 106],
    //   [28.9, 105.51]
    // ]);
 
 
    // 自定义info控件
    var info = L.control();
    info.onAdd = function (map) {
      this.infoDiv = L.DomUtil.create("div", "info"); // 创建一个class为info的div
      this.update(map.getBounds()); // map.getBounds()获取地图可视范围
      return this.infoDiv;
    };
 
    //根据当前地图状态更新显示信息
    info.update = function (bounds) {
      this.infoDiv.innerHTML =
        "<b>当前地图显示范围</b><br/>" +
        "<b>右上角: </b>" + bounds.getNorthEast() + "<br/>" +
        "<b>左下角: </b>" + bounds.getSouthWest() + "";
    };
    info.addTo(map);
 
    //监听地图状态变化
    map.on("move", moveMap);
    function moveMap(e) {
      info.update(map.getBounds());
    }
  </script>
 
</body>
 
</html>

【4】 mark的使用


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 添加marker
    marker = L.marker([23.127013, 113.366266], {
      draggable: true,
      autoPan: false
    });
 
    // marker添加到地图上
    marker.addTo(map);
 
    // marker绑定气泡
    marker.bindPopup("我是一个图标");
 
    // marker绑定事件，当拖动完成时触发
    marker.on('dragend', function () {
      console.log('图标移动完成');
    });
  </script>
 
</body>
 
</html>

【5】 mark自定义icon图片


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 自定义图标
    var customIcon = L.icon({
      iconUrl: './images/like.svg',
      iconSize: [55, 55]
    });
 
    // 添加marker,并设置图标
    marker = L.marker([23.167561, 113.400282], {
      draggable: true,
      autoPan: false,
      icon: customIcon
    }).addTo(map);
 
    // marker绑定气泡
    marker.bindPopup("我是一个图标");
 
    // marker绑定事件，当拖动完成时触发
    marker.on('dragend', function () {
      console.log('图标移动完成');
    });
  </script>
 
</body>
 
</html>

【6】tooltip的使用


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 添加marker
    marker = L.marker([23.127013, 113.366266], {
      draggable: true,
      autoPan: false,
    }).addTo(map);
 
    // tooltip与marker绑定
    var t = marker.bindTooltip("my tooltip text").openTooltip();
 
    // 实现动态修改内容
    t.setTooltipContent('<p>动态修改与mark绑定的ToolTip~ </p>')
 
    // 实现单独叠加
    L.tooltip().setLatLng([23.129013, 114.366266]).setContent('<p>单独叠加的ToolTip</p>').addTo(map);
  </script>
 
</body>
 
</html>

【7】popup的使用


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 添加marker
    marker = L.marker([23.127013, 113.366266], {
      draggable: true,
      autoPan: false,
    }).addTo(map);
 
    // popup与marker绑定
    var t = marker.bindPopup("my popup text")
 
    // 实现动态修改内容
    t.setPopupContent('<p>动态修改与mark绑定的popup~ </p>')
 
    // 实现单独叠加
    L.popup().setLatLng([23.129013, 114.366266]).setContent('<p>单独叠加的popup</p>').openOn(map);
  </script>
 
</body>
 
</html>

【8】线的显示


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: true,
    });
 
    // 从一组坐标点创建红色的线
    var latlngs = [
      [45.51, -122.68],
      [37.77, -122.43],
      [34.04, -118.2]
    ];
    var polyline = L.polyline(latlngs, {
      color: 'red',
      weight: 8,
      dashArray: "5,10,20"
    }).addTo(map);
 
    // click操作
    polyline.on('click', function () {
      console.log('点了线一下')
    });
 
    // 地图显示区域为红线所在位置
    map.flyToBounds(polyline.getBounds());
  </script>
 
</body>
 
</html>

【9】缩放组件和自定义缩放组件


<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
 
  <!--leaflet样式文件-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!--leaflet核心JS文件-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入 ChineseTmsProviders.js文件-->
  <script src="./leaflet/leaflet.ChineseTmsProviders.js"></script>
 
  <style>
    /*必须指定宽高度*/
    #map {
      width: 800px;
      height: 500px;
    }
  </style>
</head>
 
<body>
  <div id="map"></div>
  <script>
    // 高德地图
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 5
    });
 
    var map = L.map("map", {
      center: [23.127013, 113.366266],
      zoom: 8,
      layers: [Gaode],
      zoomControl: false,
    });
 
    //创建内置缩放组件，将其置于地图的右上角
    L.control.zoom({
      zoomInText: "声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/234981
推荐阅读
article《Leaflet 基础知识点》- 绘制点（两种方式）_l.circle...
前言Leaflet 官方 API，有一个 L.point，但这并不是我们想要的。与L.circle、L.rectangl...
                                    赞
踩
articleleaflet—marker总结_leaflet marker...
今天公司的app需要完成一个需求：在地图上通过自己手动添加一个marker点，然后将坐标等数据(经纬度)传给另个方法中，...
                                    赞
踩
articleLeaflet 自定义Marker点Icon_leaflet 自定义图片点...
Leaflet 自定义Marker点IconLeaflet 支持自定义Icon，我们可以给Marker点添加自定义的Ic...
                                    赞
踩
articleLeaflet 自定义修改Marker点标记样式_l.marker...
点标记基本用法使用示例：L.marker([50.5, 30.5]).addTo(map);默认样式如图实际项目中需要修...
                                    赞
踩
articleLeaflet聚合图层 Leaflet.markercluster 附源码以及中文文档、npm安装教...
iconUrl: require('./logo.png'), //这里图片地址要换成自己本地的。在你的页面的leafl...
                                    赞
踩
article【leaflet】 leaflet移除地图上所有marker(layers)_leaflet清除所有...
leaflet批量移除地图上的marker可采用分组的方式，然后用分组批量清除，如下所示:批量生成markervar l...
                                    赞
踩
articleLeafletJS-Markers_前端 leaflet marker选中后高亮...
为了在地图上标记单个位置，传单提供了标记。这些标记使用标准符号，并且可以自定义这些符号。在本章中，我们将看到如何添加标记...
                                    赞
踩
articleLeaflet 改变 Marker（标记） 颜色_leaflet加载 kml格式数据marker颜色...
方案一：这是谷歌在设计Leaflet Icon时的最佳热门之一，但它没有一个没有第三方的解决方案，我在React中遇到了...
                                    赞
踩
articleleaflet 批量加载、清除marker_leaflet清除当前所有mark...
leaflet 批量加载、清除marker_leaflet清除当前所有markleaflet清除当前所有mark    ...
                                    赞
踩
articleleaflet 点聚合（点击后散开）...
1、创建地图map = L.map('canvas_id', {	maxZoom: 18,	minZoom: 1,	zo...
                                    赞
踩
articleleaflet聚类——leaflet.markercluster...
animateAddingMarkers：如果设置为 true（并且animate选项也为 true），那么在将标记添加...
                                    赞
踩
articleleaflet.markercluster实现聚合_markerclustergroup...
leaflet聚合效果（markercluster）1.下载插件2.引入插件3.实例化 markerCluster4.添...
                                    赞
踩
articleLeaflet聚合图层---Leaflet.markercluster_markercluster ...
作者：刘大Leaflet.markercluster是Leaflet中运用比较多的一个可视化插件，本文我们就细说下该插件...
                                    赞
踩
articleleaflet 多个图层做聚合_leaflet聚合...
moun:[],car:[],face:[],video:[],phone:[],wifi:[],high:[]}})l...
                                    赞
踩
articleleaflet: 数据聚合，显示当前bounds区域中的点的名称列表（078）_leaflet.ma...
第078个本示例的目的是介绍演示如何在vue+leaflet中实现数据聚合的功能 ，左边列出右边可视区域内的marker...
                                    赞
踩
articlevue+leaflet实现聚合图（根据半径划分）_vue3 leaflet 点位聚合...
vue + leaflet实现聚合图（根据半径划分）_vue3 leaflet 点位聚合vue3 leaflet 点位聚...
                                    赞
踩
articleleaflet：入门基础（二）之加载图层_leaflet 图层...
前言 上一篇 leaflet 入门基础 讲了如何使用leaflet，包括加载地图、绘制图层等。 这一篇将讲解如何加载多种...
                                    赞
踩
articleLeaflet.markercluster 中文文档 V1.5.4_leaflet中文文档...
最近正好在用leaflet的这个插件 搜了一下，用的人不少，但是好像没人翻译过文档，就顺手处理下。以下内容中，原文的Cl...
                                    赞
踩
articleleafLet API 中文文档翻译_leaflet containerpoint api...
转载：http://blog.sina.com.cn/s/blog_5ff72f610101ku5d.html_leaf...
                                    赞
踩
articleleaflet 地图上添加marker点击事件，自定义弹出框_var latlng = l.latl...
var LeafIcon = L.Icon.extend({				  options: {//	 			   shad...
                                    赞
踩
相关标签
leaflet
vue
javascript
前端
开发语言
地图
批量移除
marker
分组
js
gis
color
插件
html
vue.js
街景地图
聚类
数据挖掘
机器学习