Блог

Я использую angular «10.0.4», «leaflet»: «^ 1.6.0», «leaflet-draw»: «^ 1.0.4», и я пытаюсь рисовать фигуры. (Прямоугольник и круг работают отлично), но когда я пытаюсь использовать фигуры, которым нужно назначить несколько точек, мне приходится много раз щелкать мышью, чтобы назначить точку. Я думал, что это было из браузера, но потом я попробовал это в safari, и ничего не изменилось. (и, кстати, на панели инструментов рисования не отображаются никакие значки, если это могло бы помочь). мой код:

 ngAfterViewInit() {
  try {
      setTimeout(() => {
        this.map = L.map('areamap', {
          center: [37.780813, -122.404750],
          // drawControl: true,
          zoom: 17,
          // attributionControl: false
        });
        var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19,
          attribution: 'amp;copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });
        tiles.addTo(this.map);

        //feature group is to add the drawing features
        var drawnItems = new L.FeatureGroup();
        this.map.addLayer(drawnItems);
        // rawing controls sed to control what to use
        this.drawControl = new L.Control.Draw({
          position: 'topright',
          draw: {
            polyline: {
              shapeOptions: {
                color: '#f357a1',
                weight: 10
              }
            },
            polygon: {
              allowIntersection: true, // Restricts shapes to simple polygons
              drawError: {
                color: '#e1e100', // Color the shape will turn when intersects
                message: '<strong>Polygon draw does not allow intersections!<strong> (allowIntersection: false)' // Message that will show when intersect
              },
              shapeOptions: {
                color: '#bada55',
              }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
              shapeOptions: {
                clickable: true
              },
              marker: {
                icon: iconDefault
              }
            },
            circlemarker: false

          },
          edit: {
            featureGroup: drawnItems, //REQUIRED!!
            remove: true
          }

        });
        this.map.addControl(this.drawControl);
        this.map.on('draw:created', function (e) {
          //do whatever you want; most likely save back to db
          console.log(e.layer._latlngs)
          //draw the polygon on creating (working for the rectangle and circle)
          var polygon = L.polygon(e.layer._latlngs, { color: '#43425D' }).addTo(this.map);

        }.bind(this));
      }, 0);
  
  } catch{ }
}
  

Как я могу правильно нарисовать ломаную линию и многоугольник?

Я использовал библиотеку https://github.com/geoman-io/leaflet-geoman как пользователь Falke Design предложил в комментариях, и это сработало как шарм.