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

问题描述

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

我只想使用 Leaflet.Draw 因为我不知道我在地图上的坐标。我会添加 100 多条折线。

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

所以我需要 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>

标签： javascripthtmlleafletpolylineleaflet.draw

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

问题描述

解决方案

推荐阅读