Leaflet-学习

2023-11-17

一、官网

英文官网：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: "


				
						 
                
                    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
                     
                
		 

								
				
					
						
												
                            
                                
                                    javascript                                
							
                        
												
                            
                                
                                    leaflet









	
		
				Leaflet-学习  的相关文章
		
	
	
				
			
				
					如何将udp发送到udp node.js服务器？				
			
			                       
                    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js                
                		
				
			
				
					如果对象包含在另一个数组中，则从数组中删除该对象				
			
			                       
                    我试图从数组中删除一个对象 如果该对象的属性 唯一 包含在另一个数组中 我知道我可以像这样执行嵌套 for 循环 for i 0 i lt array length i for j 0 j lt array2 length j if arr                
                		
				
			
				
					Angular 2 链式 Promise 并传递拒绝				
			
			                       
                    应该是一个简单的问题 但是我找不到有关如何做到这一点的文档 像这样链接一个承诺 Making a promise no problem let promise new Promise resolve reject gt let data d                
                		
				
			
				
					网站 YouTube 嵌入视频不断播放				
			
			                       
                    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po                
                		
				
			
				
					用隐藏单元格补充 colspanned 表格有什么不好吗？				
			
			                       
                    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none                
                		
				
			
				
					VBA / HTML / jQuery 选择自动完成 - 在列表中选择				
			
			                       
                    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph                
                		
				
			
				
					Node js 使用中间件重定向进行过多重定向				
			
			                       
                    在我的 Node js 应用程序 我使用的是express 4 x 中 我想检查用户是否已登录 如果用户未登录 我想重定向到我的登录页面 然后我在中间件中这样做 服务器 js app use function req res next if                
                		
				
			
				
					如何按照编写的顺序迭代 javascript 对象属性				
			
			                       
                    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for                
                		
				
			
				
					仅一页 JavaScript 应用程序				
			
			                       
                    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点                
                		
				
			
				
					如何使用 JavaScript 获取没有 HTML 元素的纯文本？				
			
			                       
                    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here                
                		
				
			
				
					javascript中按tab键时如何调用函数？				
			
			                       
                    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f                
                		
				
			
				
					Typeahead.js substringMatcher 函数说明				
			
			                       
                    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r                
                		
				
			
				
					淡出和循环一组 div 的最佳方式				
			
			                       
                    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5                 
                		
				
			
				
					Twitter 嵌入时间轴小部件				
			
			                       
                    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t                
                		
				
			
				
					类型“typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")”上不存在属性“auth”。 TS(2339)				
			
			                       
                    我是 FireBase 的初学者 我正在尝试使用 Angular 通过 FireBase 实现 Google 登录 我在 auth 时收到上述错误 我特此附上login component ts和package json package l                
                		
				
			
				
					如果数字小于 10，则显示前导零 [重复]				
			
			                       
                    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t                
                		
				
			
				
					如何在 javascript 正则表达式中匹配平衡分隔符？				
			
			                       
                    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an                
                		
				
			
				
					无需重新绘制传单地图即可进行闪亮的 UI 调整				
			
			                       
                    问题 我正在创建一个闪亮的仪表板来帮助客户探索一些空间数据 我想要实现的 UI 设计允许用户轻松地在两种布局之间切换 Map Only 地图 数据表 我在实现这种设计时遇到了麻烦 因为每次用户在布局之间切换时都会出现两个问题 地图已重新绘制                
                		
				
			
				
					如何在 gulp.src 中使用基本正则表达式？				
			
			                       
                    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式                
                		
				
			
				
					KeyboardAvoidingView - 隐藏键盘时重置高度				
			
			                       
                    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值                
                		
			




 

 



    
        
            随机推荐
        
    
    
                
            
                
                    吐血推荐！5款好用又骚气的神站！真的有毒！（附网址）                
            
                                   
                    1 交互式元素周期表 https ptable com 喜欢化学的同学千万不要错过了 这里可以在线学习交互式元素周期表 想知道什么元素 让你学习到丰富的化学元素知识 2 无聊巨作VII第二部 http www spielzeugz de h                
                        
                
            
                
                    使用StarUML创建类图                
            
                                   
                    1 综述 What StarUML是一种生成类图和其他类型的UML图表的工具 本文是一个使用StarUML创建类图 Java语言描述 的简明手册 StarUML 简称SU 是一种创建UML类图 并能够自动生成Java的 stub code                 
                        
                
            
                
                    概说概要设计怎么做                
            
                                   
                    概说概要设计怎么做 51CMM COM原创 作者 厦门巨龙软件工程有限公司 卢琳生 2003 12 22 摘要 本文是在概要设计实践和学习中的一些心得与学习笔记 希望与大家分享 如有不妥之处欢迎指正 关键字 概要设计 结构化 OOD 正文                 
                        
                
            
                
                    大数据学习-3.Linux下Web服务器的搭建与配置                
            
                                   
                    文章目录 简介 一 关闭防火墙和selinux 1 关闭防火墙 1 关闭selinux 二 Web服务器与配置 1 Apache 2 Nginx 简介 本文主要介绍在CentOS下 Apache与Nginx 服务的搭建与配置 一 关闭防火墙                
                        
                
            
                
                    springboot redis Unsatisfied dependency expressed through method ‘redisTemplate‘ parameter 0                
            
                                   
                    pom xml中导入包更换写                
                        
                
            
                
                    SpringBoot RabbitMq 六大模式                
            
                                   
                    目录 依赖 配置 简单队列 模型 代码示例 工作队列 模型 代码示例 订阅模式 模型 代码示例 路由模式 模型 代码示例 主题模式 模型 代码示例 RPC 依赖 配置 依赖                
                        
                
            
                
                    【华为机试在线训练】Day 10                
            
                                   
                    自动售货系统 题目描述 1 总体说明 考生需要模拟实现一个简单的自动售货系统 实现投币 购买商品 退币 查询库存商品及存钱盒信息的功能 系统初始化时自动售货机中商品为6种商品 商品的单价参见1 1规格说明 存钱盒内放置1元 2元 5元 10                
                        
                
            
                
                    POJ - 3259 Wormholes                
            
                                   
                    While exploring his many farms Farmer John has discovered a number of amazing wormholes A wormhole is very peculiar beca                
                        
                
            
                
                    linux网络全景指南                
            
                                   
                    自我介绍 腾讯云网络高级工程师 腾讯云网络核心开发人员 欢迎微信搜索 职场重生 关注公众号 职场重生 后续更多精彩内容发布 万字长文 建议收藏 引言 本期分享一个比较常见的 络问题 丢包 例如我们去ping 个 站 如果能ping通 且 站                
                        
                
            
                
                    python画散点图-python学习之matplotlib绘制散点图实例                
            
                                   
                    要绘制单个点 可使用函数scatter 并向其传递一对x和y坐标 它将在指定位置绘制一个点 使用scatter 绘制散点图 import matplotlib pyplot as plt plt scatter 2 4 plt show 下                
                        
                
            
                
                    visual studio 的各个版本下载地址，很全，从 6.0 一直 到 vs2013，要的拿去吧                
            
                                   
                    Microsoft Visual Studio 6 0 下载 英文版360云盘下载 http l11 yunpan cn lk sVeBLC3bhumrI 英文版115网盘下载 http 115 com file bew2qrau 英文版迅                
                        
                
            
                
                    org.springframework.transaction.UnexpectedRollbackException 解决                
            
                                   
                    1 异常 org springframework transaction UnexpectedRollbackException Transaction rolled back because it has been marked as r                
                        
                
            
                
                    TXT文本文件存储                
            
                                   
                    个人简介 作者简介 大家好 我是W chuanqi 一个编程爱好者 个人主页 W chaunqi 支持我 点赞 收藏 留言 愿你我共勉 若身在泥潭 心也在泥潭 则满眼望去均是泥潭 若身在泥潭 而心系鲲鹏 则能见九万里天地 文章目录 TXT                 
                        
                
            
                
                    【C++】细说C++中的数组之“静态”数组                
            
                                   
                    转自博主 https blog csdn net u013921430 article details 79514972 感谢分享 以备学习                
                        
                
            
                
                    【设计模式】原型模式                
            
                                   
                    原型模式 Prototype Pattern 是用于创建重复的对象 同时又能保证性能 这种类型的设计模式属于创建型模式 它提供了一种创建对象的最佳方式之一 这种模式是实现了一个原型接口 该接口用于创建当前对象的克隆 当直接创建对象的代价比较                
                        
                
            
                
                    C/C++排序                
            
                                   
                    目录 C排序 头文件 使用 C 排序 头文件 使用 1 自定义类型 2 自定义类型 C排序 C语言中排序函数为qsort 原理为快速排序 头文件 在使用前 要添加头文件如下 include                
                        
                
            
                
                    【plotly】用绘图函数，定位坐标相关的问题                
            
                                   
                    公司的业务场景有涉及到快递配送的场景 某次有运营同学反馈某个订单划分异常 没有划分给距离最近的快递员 让调查这个问题 因为存在数据库中的数据不直观 就想到用绘图工具 把订单的配送位置和快递员当时的定位位置绘制出来 方便调查问题 要求就是能绘                
                        
                
            
                
                    1746. 经过一次操作后的最大子数组和                
            
                                   
                    1746 经过一次操作后的最大子数组和 你有一个整数数组 nums 你只能将一个元素 nums i 替换为 nums i nums i 返回替换后的最大子数组和 示例 1 输入 nums 2 1 4 3 输出 17 解释 你可以把 4替换为                
                        
                
            
                
                    解决Windows缺少找不到msvcp140.dll文件                
            
                                   
                    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或者损坏了 这时你只需下载这个msvcp140 dll文件进行安装 前提是找到                
                        
                
            
                
                    Leaflet-学习                
            
                                   
                    一 官网 英文官网 Leaflet 中文官网 Leaflet 二 介绍 Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库 它大小仅仅只有39 KB 并且拥有绝大部分开发者所需要的所有地图特性 Leaflet                 
                        
            






    
        
            热门标签
        
    

    
                                                        
            
                
                    dump文件分析工具                
            
        
                        
            
                
                    学习iot                
            
        
                        
            
                
                    靶场测试                
            
        
                        
            
                
                    深度学习（基础）                
            
        
                        
            
                
                    虚拟机网络设置                
            
        
                        
            
                
                    ppt拖动就复制                
            
        
                                        
            
                
                    idea 国内插件库                
            
        
                                                                
            
                
                    温控器笔记系列                
            
        
                                        
            
                
                    逗号分隔字符串转行                
            
        
                                
            
                
                    c复习                
            
        
                                
            
                
                    桑基图                
            
        
                        
            
                
                    离散傅里叶                
            
        
                        
            
                
                    报错型注入

Leaflet-学习

一、官网

二、介绍

三、下载Leaflet

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

五、瓦片地图介绍

六、 Leaflet加载各种地图

七、Leaflet地图小案例

Leaflet-学习 的相关文章

随机推荐

热门标签

Leaflet-学习的相关文章