Leaflet.draw mapping: How to initiate the draw function without toolbar?

前端 未结 3 484
无人共我
无人共我 2020-12-04 14:13

For anyone experienced with leaflet or leaflet.draw plugin:

I want to initiate drawing a polygon without using the toolbar from leaflet.draw. I\'ve mana

3条回答
  •  萌比男神i
    2020-12-04 15:12

    So I've figured this out for circles, but it should be the same for polygons. It's actually really simple. Hopefully the following code answers your question, but if not let me know and I can post more to a gist or something.

    // Creates the circle on the map for the given latLng and Radius
    // If the createdWithAddress flag is true, the circle will not update 
    // it's address according to its position. 
    createCircle: function(latLng, radius, createdWithAddress) {
    if (!this.circle) {
      var self = this,
          centerIcon,
          centerMarker;
    
      centerIcon = new L.Icon({
        iconUrl: '/assets/location_pin_24px.png',
        iconSize: [24, 24],
        iconAnchor: [12, 24],
        shadowUrl: '/assets/marker-shadow.png',
        shadowSize: [20, 20],
        shadowAnchor:[6, 20]
      })
    
      // Setup the options for the circle -> Override icons, immediately editable
      options = {
        stroke: true,
        color: '#333333',
        opacity: 1.0,
        weight: 4,
        fillColor: '#FFFFFF',
        moveIcon: centerIcon,
        resizeIcon: new L.Icon({
          iconUrl: '/assets/radius_handle_18px.png',
          iconSize: [12, 12],
          iconAnchor: [0,0]
        })
      }
    
      if (someConfigVarYouDontNeedToKnow) {
        options.editable = false
        centerMarker = new L.Marker(latLng, { icon:centerIcon })
      } else {
        options.editable = true
      }
    
      // Create our location circle 
      // NOTE: I believe I had to modify Leaflet or Leaflet.draw to allow for passing in
      // options, but you can make it editable with circle.editing.enable()
      this.circle = L.circle([latLng.lat, latLng.lng], radius, options)
    
      // Add event handlers to update the location
      this.circle.on('add', function() {
        if (!createdWithAddress) {
          self.reverseGeocode(this.getLatLng())
        }
        self.updateCircleLocation(this.getLatLng(), this.getRadius())
        self.updateMapView()
      })            
      this.circle.on('edit', function() {
        if (self.convertLatLngToString(this.getLatLng()) !== self.getLocationLatLng()) {
          self.reverseGeocode(this.getLatLng())
        }
        self.updateCircleLocation(this.getLatLng(), this.getRadius())
        self.updateMapView()
      })
    
      this.map.addLayer(this.circle)
      if (centerMarker) {
        centerMarker.addTo(this.map)
        this.circle.redraw()
        centerMarker.update()
      }
    }
    },
    

    Sorry a lot of that is just noise, but it should give you an idea of how to go about this. You can control editing like you said with editing.enable()/.disable().

    Make sure to comment with any questions. Good luck man.

提交回复
热议问题