javascript - 如何获取传单 slider 的开始和结束

Question

我有一个带有范围的传单 slider ，我想要有两个元素保存每个句柄的开始和结束日期，如here ，知道如何做到这一点。这就是我尝试修改 slider javascript 文件的方法

L.Control.SliderControl = L.Control.extend({
    options: {
        position: 'topright',
        layers: null,
        timeAttribute: 'time',
        isEpoch: false,     // whether the time attribute is seconds elapsed from epoch
        startTimeIdx: 0,    // where to start looking for a timestring
        timeStrLength: 19,  // the size of  yyyy-mm-dd hh:mm:ss - if millis are present this will be larger
        maxValue: -1,
        minValue: 0,
        showAllOnStart: false,
        markers: null,
        range: false,
        follow: false,
        alwaysShowDate : false,
        rezoom: null
    },

    initialize: function (options) {
        L.Util.setOptions(this, options);
        this._layer = this.options.layer;

    },

    extractTimestamp: function(time, options) {
        if (options.isEpoch) {
            time = (new Date(parseInt(time))).toString(); // this is local time
        }
        return time.substr(options.startTimeIdx, options.startTimeIdx + options.timeStrLength);
    },

    setPosition: function (position) {
        var map = this._map;

        if (map) {
            map.removeControl(this);
        }

        this.options.position = position;

        if (map) {
            map.addControl(this);
        }
        this.startSlider();
        return this;
    },

    onAdd: function (map) {
        this.options.map = map;

        // Create a control sliderContainer with a jquery ui slider
        var sliderContainer = L.DomUtil.create('div', 'slider', this._container);
        $(sliderContainer).append('<center><div id="leaflet-slider" style="width:280px; box-shadow: rgba(0,0,10,1) 1px 2px 50px;background-color:2E2E1F" ><div  class="ui-slider-handle"></div><div id="slider-timestamp" style="width:280px; margin-top:13px; background-color:#FFFFFF; text-align:center; border-radius:5px;"></div></div></center>');
		//Prevent map panning/zooming while using the slider
        $(sliderContainer).mousedown(function () {
            map.dragging.disable();
        });
        $(document).mouseup(function () {
            map.dragging.enable();
            //Hide the slider timestamp if not range and option alwaysShowDate is set on false
            if (options.range || !options.alwaysShowDate) {
                $('#slider-timestamp').html('');
            }
        });

        var options = this.options;
        this.options.markers = [];

        //If a layer has been provided: calculate the min and max values for the slider
        if (this._layer) {
            var index_temp = 0;
            this._layer.eachLayer(function (layer) {
                options.markers[index_temp] = layer;
                ++index_temp;
            });
            options.maxValue = index_temp - 1;
            this.options = options;
        } else {
            console.log("Error: You have to specify a layer via new SliderControl({layer: your_layer});");
        }
        return sliderContainer;
    },

    onRemove: function (map) {
        //Delete all markers which where added via the slider and remove the slider div
        for (i = this.options.minValue; i < this.options.maxValue; i++) {
            map.removeLayer(this.options.markers[i]);
        }
        $('#leaflet-slider').remove();
    },

    startSlider: function () {
        _options = this.options;
        _extractTimestamp = this.extractTimestamp
        var index_start = _options.minValue;
        if(_options.showAllOnStart){
            index_start = _options.maxValue;
            if(_options.range) _options.values = [_options.minValue,_options.maxValue];
            else _options.value = _options.maxValue;
        }
        $("#leaflet-slider").slider({
            range: _options.range,
            value: _options.value,
            values: _options.values,
            min: _options.minValue,
            max: _options.maxValue,
            step: 1,
            slide: function (e, ui) {
                var map = _options.map;
                var fg = L.featureGroup();
                if(!!_options.markers[ui.value]) {
                    // If there is no time property, this line has to be removed (or exchanged with a different property)
                    if(_options.markers[ui.value].feature !== undefined) {
                        if(_options.markers[ui.value].feature.properties[_options.f ]){
                            if(_options.markers[ui.value]) $('#slider-timestamp').html(
                                _extractTimestamp(_options.markers[ui.value].feature.properties[_options.timeAttribute], _options));
                        }else {
                            console.error("Time property "+ _options.timeAttribute +" not found in data");
                        }
                    }else {
                        // set by leaflet Vector Layers
                        if(_options.markers [ui.value].options[_options.timeAttribute]){
                            if(_options.markers[ui.value]){ $('#slider-timestamp').html(
                                _extractTimestamp(_options.markers[ui.value].options[_options.timeAttribute], _options));
								$('#start').html($("#slider-timestamp").html());
							$('#end').html(
                                _extractTimestamp(_options.markers[ui.value].options[_options.timeAttribute], _options));}
								
                        }else {
                            console.error("Time property "+ _options.timeAttribute +" not found in data");
                        }
                    }
                    
                    var i;
                    // clear markers
                    for (i = _options.minValue; i <= _options.maxValue; i++) {
                        if(_options.markers[i]) map.removeLayer(_options.markers[i]);
                    }
                    if(_options.range){
                        // jquery ui using range
                        for (i = ui.values[0]; i <= ui.values[1]; i++){
                           if(_options.markers[i]) {
                               map.addLayer(_options.markers[i]);
                               fg.addLayer(_options.markers[i]);
                           }
                        }
                    }else if(_options.follow){
                        for (i = ui.value - _options.follow + 1; i <= ui.value ; i++) {
                            if(_options.markers[i]) {
                                map.addLayer(_options.markers[i]);
                                fg.addLayer(_options.markers[i]);
                            }
                        }
                    }else{
                        for (i = _options.minValue; i <= ui.value ; i++) {
                            if(_options.markers[i]) {
                                map.addLayer(_options.markers[i]);
                                fg.addLayer(_options.markers[i]);
                            }
                        }
                    }
                };
                if(_options.rezoom) {
                    map.fitBounds(fg.getBounds(), {
                        maxZoom: _options.rezoom
                    });
                }
            }
        });
        if (!_options.range && _options.alwaysShowDate) {
            $('#slider-timestamp').html(_extractTimeStamp(_options.markers[index_start].feature.properties[_options.timeAttribute], _options));
        }
        for (i = _options.minValue; i <= index_start; i++) {
            _options.map.addLayer(_options.markers[i]);
        }
		
    }
});

L.control.sliderControl = function (options) {
	$('span').show();
    return new L.Control.SliderControl(options);
};

原始脚本是 Dwilhelm89's slider提前致谢

Answer 1

深入研究该示例页面的代码可以了解他们如何实现您正在寻找的效果，因此这个答案的大部分内容都是他们在那里所做的事情的粗略副本。

您需要做的主要事情是在 sliderContainer 中创建一些可以放置标签的 div。如果您在创建 slider div 的同时执行此操作，它将如下所示:

$(sliderContainer).append('<div id="slider-min"></div><div id="leaflet-slider" style="width:280px; inline-block; margin: 0 5px 0 5px;"></div><div id="slider-max"></div><div id="slider-current"><span class="start-time"></span>-<span class="end-time"></span></div>');

哪里slider-min和slider-max分别是 slider 开头和结尾的标签的 div，slider-current是随着您移动 slider 而变化的范围标签( start-time 和 end-time )的 div。

正在填充slider-min和slider-max可以在 onAdd 函数中完成，如下所示:

$('#slider-min', sliderContainer).html(this.options.markers[this.options.minValue].feature.properties[this.options.timeAttribute]);
$('#slider-max', sliderContainer).html(this.options.markers[this.options.maxValue].feature.properties[this.options.timeAttribute]);

正在初始化start-time和end-time值也可以在 onAdd 中完成，但因为它们需要更新，所以首先为它们分配一些名称并用函数填充它们会很有用:

this.$currentStartDiv = $('#slider-current .start-time', sliderContainer);
this.$currentEndDiv = $('#slider-current .end-time', sliderContainer);
this._updateCurrentDiv(0,0);

哪里_updateCurrentDiv定义在 LeafletSlider 函数的主层(即 onAdd 之外):

_updateCurrentDiv: function (startIdx, endIdx) {
this.$currentStartDiv.html(this.options.markers[startIdx].feature.properties[this.options.timeAttribute]);
        this.$currentEndDiv.html(this.options.markers[endIdx].feature.properties[this.options.timeAttribute]);
},

为了动态更改标签，可以在幻灯片函数中引用此函数，但出于我不完全理解的范围原因，this需要首先重新分配给不同的变量(即 self = this )。在 slider 功能内，_updateCurrentDiv会被这样调用:

if (_options.range) {
    // jquery ui using range
    for (i = ui.values[0]; i <= ui.values[1]; i++) {
        if (_options.markers[i]) {
            map.addLayer(_options.markers[i]);
            fg.addLayer(_options.markers[i]);
        }
    }
    self._updateCurrentDiv(ui.values[0], ui.values[1]);
}

这几乎涵盖了所有功能。美学可以用 css 来处理，两个主要的事情是 slider 以及最小和最大 div(如果你希望所有这些都整齐地排列)应该将样式设置为 display: inline-block ，这样它们就不会被撞到单独的行，并且 slider-current div(如果您希望动态标签位于白色控制框边界之外)应将样式设置为 position: absolute和left: 420px (或任何适合您目的的位移)。

所有这些的一个工作示例都在这个 fiddle 中拼凑在一起:

http://jsfiddle.net/nathansnider/mos9Lr5v/