我有一个带有范围的传单滑块，我希望有两个元素保存每个句柄的开始和结束日期，如org.eclipse.tycho:org.eclipse.jdt.core，任何想法如何做到这一点。
这就是我试图修改滑块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);
};
答案 0 :(得分：1)
深入了解该示例页面的代码，可以了解它们如何实现您正在寻找的效果，因此大部分答案都是他们在那里所做的粗略复制。
您需要做的主要是在sliderContainer中创建一些可以放置标签的div。如果您在创建滑块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分别是滑块开头和结尾处标签的div，而slider-current是范围标签的div（start-time }和end-time）在移动滑块时会发生变化。
填充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）首先。在滑块函数中，_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来处理，两个主要的事情是滑块和min和max divs（如果你想要所有排列整齐的那些）应该被设置为display: inline-block，这样他们就不会＃ 39; t被撞到单独的行，slider-current div（如果你想要白色控制框边界外的动态标签）应该被设置为position: absolute和left: 420px（或任何位移）适用于您的目的）。
所有这一切的工作实例都拼凑在这个小提琴中：