如何使用 Leaflet.Draw 添加和保存折线并在代码中重用？

编程问答 2022-04-27

问题描述

我如何使用 leaflet.draw 来添加折线并将它们保存在 js 代码中。

我只想使用 leaflet.draw 因为我不知道我在地图上的坐标。我会添加超过 100 条折线。

我想在 GTA 5 地图上添加 RacingTracks，用户可以查看地图，但不能编辑对象。

所以我需要使用 leaflet.draw 来绘制，然后保存并移除工具栏。

..这是我第一次使用 html/javascript，我感到迷茫 xD

<!DOCTYPE html>
<head>
    <Meta charset="utf-8" />
    <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />
    <link 
        rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
    />
  <style>
    html,body {
      margin: 0;
      padding: 0;
    }
    #map {
      position:absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  
  <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js">
  </script>
  <script
      src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js">
  </script>

  <script>
        
     

        // Setup map    
        var map = L.map('map',{
        crs: L.CRS.Simple,minZoom: -1,maxZoom: 5
        });


        var bounds = [[0,0],[1600,1600]];
        var image = L.imageOverlay('https://static.wixstatic.com/media/9b4488_d04bfdefc77e4c2c803d07e9b4b34e6f~mv2.png',bounds).addTo(map);
 
        map.fitBounds(bounds);

        

        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: 
                    'http://leafletjs.com/docs/images/leaf-shadow.png',iconSize:     [38,95],shadowSize:   [50,64],iconAnchor:   [22,94],shadowAnchor: [4,62],popupAnchor:  [-3,-76]
            }
        });

        var greenIcon = new LeafIcon({
            iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
            });

        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            position: 'topright',draw: {
                polygon: {
                    shapeOptions: {
                        color: 'purple'
                    },allowIntersection: false,drawError: {
                        color: 'orange',timeout: 1000
                    },showArea: true,metric: false,repeatMode: true
                },polyline: {
                    shapeOptions: {
                        color: 'red'
                    },},rect: {
                    shapeOptions: {
                        color: 'green'
                    },circle: {
                    shapeOptions: {
                        color: 'steelblue'
                    },marker: {
                    icon: greenIcon
                },edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);

        map.on('draw:created',function (e) {
            var type = e.layerType,layer = e.layer;

            if (type === 'marker') {
                layer.bindPopup('A popup!');
            }

            drawnItems.addLayer(layer);
        });

       

  </script>
</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptleafletleaflet.drawpolylinepolyline