时间戳

首页 > 解决方案 > 如何在填充的折线下读取 Latlng？

leaflet - 如何在填充的折线下读取 Latlng？

问题描述

我需要知道（用鼠标单击）折线下的坐标。

折线无法隐藏（NO mymap.removeLayer(LayA / B)），折线必须保持填充状态（如有必要，可能会暂时隐藏其弹出窗口）。

感谢可以帮助我的人。

这里有一个例子：

<!DOCTYPE html>
<html>
    <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>
  </head>

  <body style="margin:0; border: 0; padding:0; content: 0;">
    <div id="mapid" style="width: 100%; height: 666px;"></div>

    <script>
    "use strict";

    var mymap = L.map('mapid', { zoomControl:false, doubleClickZoom:false, minZoom: 2, maxZoom: 18, keyboard: false}).setView([43, 11], 7);
    var LayMap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {zIndex:1, minZoom: 2, maxZoom: 18, zoom: 8, doubleClickZoom: false, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: '...'}).addTo(mymap);

    mymap.createPane('PanA').style.zIndex = 501;
    var LayA = new L.layerGroup();
    var Poly1 = L.polygon([[43,11],[43.5,11],[43.5,11.5]], {pane: 'PanA' , weight: 9, color: 'Indigo', opacity: 1, fill: true, fillOpacity: 0.1, dashArray: '2,5'}).bindPopup('HI from Poly1');
    LayA.addLayer(Poly1);
    var Poly2 = L.polygon([[44,11],[44.5,11],[44.5,11.5]], {pane: 'PanA' , weight: 9, color: 'Red', opacity: 1, fill: true, fillOpacity: 0.1, dashArray: '2,5'}).bindPopup('HI from Poly1');
    LayA.addLayer(Poly2);
    mymap.addLayer(LayA);

    mymap.on('click', function(e) {
      console.log(e.latlng);
    });

    </script>
  </body>
</html>

标签： leaflet

解决方案

推荐阅读