nakarte

Source code of https://map.sikmir.ru (fork)
git clone git://git.sikmir.ru/nakarte
Log | Files | Refs | LICENSE

selector.js (3325B)

      1 import L from 'leaflet';
      2 
      3 const RectangleSelect = L.Rectangle.extend({
      4         includes: L.Mixin.Events,
      5 
      6         options: {
      7             opacity: 1,
      8             weight: 0.5,
      9             fillOpacity: 0.2,
     10             color: '#3388ff',
     11             fillColor: '#3388ff',
     12 
     13         },
     14 
     15         onAdd: function(map) {
     16             L.Rectangle.prototype.onAdd.call(this, map);
     17             this.markers = [];
     18             for (let position of ['top', 'right', 'bottom', 'left']) {
     19                 let marker = L.marker([0, 0], {
     20                         icon: L.divIcon({className: `leaflet-rectangle-select-edge edge-${position}`}),
     21                         draggable: true
     22                     }
     23                 )
     24                     .addTo(map);
     25                 marker.on({
     26                         drag: this.onMarkerDrag,
     27                         dragend: this.onMarkerDragEnd
     28                     }, this
     29                 );
     30                 this.markers[position] = marker;
     31             }
     32             this.placeMarkers();
     33             map.on('zoomend', this.placeMarkers, this);
     34         },
     35 
     36         placeMarkers: function() {
     37             const bounds = this.getBounds();
     38             const topLeftPixel = this._map.project(bounds.getNorthWest());
     39             const bottomRightPixel = this._map.project(bounds.getSouthEast());
     40             const size = bottomRightPixel.subtract(topLeftPixel);
     41             let center = topLeftPixel.add(size.divideBy(2));
     42             center = this._map.unproject(center);
     43             this.markers['top'].setLatLng([bounds.getNorth(), center.lng]);
     44             this.markers['top']._icon.style.width = `${size.x}px`;
     45             this.markers['top']._icon.style.marginLeft = `-${size.x / 2}px`;
     46             this.markers['right'].setLatLng([center.lat, bounds.getEast()]);
     47             this.markers['right']._icon.style.height = `${size.y}px`;
     48             this.markers['right']._icon.style.marginTop = `-${size.y / 2}px`;
     49             this.markers['bottom'].setLatLng([bounds.getSouth(), center.lng]);
     50             this.markers['bottom']._icon.style.width = `${size.x}px`;
     51             this.markers['bottom']._icon.style.marginLeft = `-${size.x / 2}px`;
     52             this.markers['left'].setLatLng([center.lat, bounds.getWest()]);
     53             this.markers['left']._icon.style.height = `${size.y}px`;
     54             this.markers['left']._icon.style.marginTop = `-${size.y / 2}px`;
     55         },
     56 
     57         onRemove: function(map) {
     58             for (let marker of Object.values(this.markers)) {
     59                 this._map.removeLayer(marker);
     60             }
     61             this.markers = null;
     62             map.off('zoomend', this.placeMarkers, this);
     63             L.Rectangle.prototype.onRemove.call(this, map);
     64         },
     65 
     66         setBoundsFromMarkers: function() {
     67             this.setBounds(
     68                 [
     69                     [this.markers['top'].getLatLng().lat, this.markers['left'].getLatLng().lng],
     70                     [this.markers['bottom'].getLatLng().lat, this.markers['right'].getLatLng().lng]
     71                 ]
     72             );
     73         },
     74         onMarkerDrag: function() {
     75             this.setBoundsFromMarkers();
     76         },
     77 
     78         onMarkerDragEnd: function() {
     79             this.setBoundsFromMarkers();
     80             this.placeMarkers();
     81             this.fire('change');
     82         }
     83     }
     84 );
     85 
     86 export {RectangleSelect};