leaflet 入门基本使用及双击事件

流氓也是种气质 _Cookie

已于 2024-03-07 14:43:18 修改

阅读量1.2k

点赞数

分类专栏： leaflet 文章标签： webview vue.js 蓝桥杯

于 2021-07-14 21:26:58 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/118737215

版权

leaflet 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

1，首先去下载leaflet 的js 和css 文件

2，首先去mapbox官网创建accessToken，我们才能正常使用底图，和参考mapboxAPI使用

底图加载

var mymap = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('{https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1Ijoiemhhbmdjb29raWUiLCJhIjoiY2tyMngybmVvMGl3cTJvcGRrNzNna2FxcyJ9.Abt7my-eFxMOmgxGXwVknA'
}).addTo(mymap);

底图标记

var marker = L.marker([51.5, -0.09]).addTo(mymap)

画圆

var circle = L.circle([51.508, -0.11], {
    color: 'pink',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);

多边形

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

给标记圆多边形加弹窗

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

效果图：

自动加载的弹窗

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

给弹窗加入点击事件

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);

优化点击事件弹窗

var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
mymap.on('click', onMapClick);

动画飞入

mymap.flyTo([data.x, data.y], data.zoom),
            {
              duration: delay / 1000
            };
        }

双击事件

leaflet 是没直接提供的双击事件的api 只提供了单击的api

var clickTimer = null
var isDoubleClick = false;

						map.on('click', function(event) {
							if (this.clickTimer) {
								// 如果存在定时器，则表示已经有一个点击事件
								isDoubleClick = true;
								clearTimeout(clickTimer);
							}

							// 设置300毫秒的延迟来判断是否为双击事件
							clickTimer = setTimeout(function() {
								if (isDoubleClick) {
									// 处理单击事件
									console.log('单击事件触发坐标============>：');
								}
								isDoubleClick = false;
							}, 300);
						});

						map.on('dblclick', function(event) {
							// 清除单击事件的定时器
							clearTimeout(clickTimer);
							isDoubleClick = false
							// 处理双击事件
								console.log('isUserMark============>');
						});

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <style>
    #map { height: 300px; }
  </style>
  <div id="map"></div>
</head>
<body>
  <script>
    var mymap = L.map('map').setView([51.505, -0.09], 13);

// 底图加载	

		L.tileLayer('{https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1Ijoiemhhbmdjb29raWUiLCJhIjoiY2tyMngybmVvMGl3cTJvcGRrNzNna2FxcyJ9.Abt7my-eFxMOmgxGXwVknA'
}).addTo(mymap);
// 		// 标记
		var marker = L.marker([51.5, -0.09]).addTo(mymap)
// 		// 画圆
		var circle = L.circle([51.508, -0.11], {
    color: 'pink',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);
// // 多边形
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);
// // 给标记 圆 多边形加弹窗 
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

// // 自动加载的弹窗
var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

// // 给弹窗加入点击事件
function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);

// // 优化点击事件弹窗
var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
mymap.on('click', onMapClick);

// 关闭所有弹窗
mymap.closePopup()


  </script>

</body>
</html>

底图图层切换

<!DOCTYPE html>
<html lang="en">

<head>
  <base target="_top">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Layers Control Tutorial - Leaflet</title>

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    .leaflet-container {
      height: 400px;
      width: 600px;
      max-width: 100%;
      max-height: 100%;
    }
  </style>


</head>

<body>

  <div id='map'></div>

  <script>
    const cities = L.layerGroup();

    const mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
    const mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
    const mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
    const mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

    const mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
    const mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

    const streets = L.tileLayer(mbUrl, { id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr });

    const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    const map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 10,
      layers: [osm, cities]
    });

    const baseLayers = {
      'OpenStreetMap': osm,
      'Streets': streets
    };

    const overlays = {
      'Cities': cities
    };

    const layerControl = L.control.layers(baseLayers, overlays, { collapsed: false }).addTo(map); //{ collapsed: false }默认展开
    const crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');
    const rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');

    const parks = L.layerGroup([crownHill, rubyHill]);

    const satellite = L.tileLayer(mbUrl, { id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr });
    layerControl.addBaseLayer(satellite, 'Satellite');
    layerControl.addOverlay(parks, 'Parks');

  </script>



</body>

</html>