首页 > 解决方案 > wpt的传单更改标记

问题描述

我有一个使用 Leaflet 的 html 页面,我通过 a.gpx 文件导入数据。我想知道是否可以修改作为标签的城市<wpt>标记以具有图标。这是我目前拥有的:

在此处输入图像描述

编辑:@ghybs

您如何读取 .gpx 文件并从中创建传单图层?

        var map = L.map('map');
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
        }).addTo(map);

        var gpx = 'http://127.0.0.1:5500/resultat.gpx'; 

         new L.GPX(gpxFile, {
            async: true,
            marker_options: {
            wptIconUrls: {
              '': '/Leaflet/marker-icon.png',
             },
            startIconUrl: '/Leaflet/start.png',
            endIconUrl: '/Leaflet/start.png',
            shadowUrl: '/Leaflet/pin-shadow.png'
          }
        }).on('loaded', function (e) {
          let gpx = e.target;
          map.fitBounds(gpx.getBounds());
        }).addTo(map);

我编辑了代码和图片,图标可见,但开始/结束图标位于航点图标下方。我没有找到如何只拥有start.png.

标签: javascriptleafletgpx

解决方案


只需使用wptIconUrls: false,航点图标将不会显示和重叠。


推荐阅读