首页 / 浏览问题 / WebGIS / 问题详情
iclient for leaflet地图点击添加事件
9EXP 2023年09月12日
我想实现在地图上点击,添加一个img图片(坐标点样式)。请问在iclient for leaflet调用的地图上如何能够实现这个功能。求示例代码,谢谢!

1个回答

您好

地图上点击添加img图片的功能可以通过原生leaflet库实现,具体步骤如下

  1. 使用Leaflet的L.map方法创建地图对象,并设置初始视图。
  2. 使用L.tileLayer方法加载天地图的矢量图层和矢量注记图层,并将它们分别添加到地图中作为底图和叠加图层。
  3. 创建一个图层L.layerGroup,用于存储添加的标记。
  4. 监听地图的点击事件,在点击位置创建一个标记,并将其添加到标记图层中。

您可以参考一下下述代码

<!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://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #map {

            width: 100vw;

            height: 100vh;

        }

    </style>

</head>

<body>

    <div id="map"></div>


    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>

    <script>

        const map = L.map('map').setView([30.6, 114.4], 10);


        // 使用天地图矢量图层作为底图

        const TianDiMap_vec = L.tileLayer('http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=8a5c2b00e94b49659861e064c37f778d', {

            maxZoom: 18,

            attribution: '天地图矢量图层'

        }).addTo(map);


        // 使用天地图矢量注记图层作为叠加图层

        const TianDiMap_cva = L.tileLayer('http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=8a5c2b00e94b49659861e064c37f778d', {

            maxZoom: 18,

            attribution: '天地图矢量注记图层'

        }).addTo(map);


        // 创建一个图层,用于存储标记

        const markerLayer = L.layerGroup().addTo(map);


        // 监听地图的点击事件,在点击位置添加一个标记,并将其添加到标记图层中

        map.on('click', function(e) {

            const marker = L.marker(e.latlng).addTo(markerLayer);

            marker.bindPopup("<b>武汉市</b>").openPopup();

        });

    </script>

</body>

</html>

希望可以帮到您!

220EXP 2023年09月12日
...