将时间滑块与传单结合起来
Incorporating time slider with leaflet
我对使用传单和 javascript 还很陌生。我正在尝试使用传单实现时间滑块。我看过
1) https://github.com/dwilhelm89/LeafletSlider,
2) https://gis.stackexchange.com/questions/120331/jsonp-working-with-leaflet-time-slider 和
3)
我仍然遇到问题。我的 HTML 文件如下所示:
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="C:\Users\Lukasz Obara\OneDrive\Programing\JavaScript\Leaflet\Plugins\SliderControl.js"></script>
</head>
<body>
<meta charset="utf-8">
<title>Slider</title>
<style> html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</body>
<div id="map"></div>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\slider.geojson'></script>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\leaflet_demo_slider.js'></script>
我的slider.geojson文件:
var slider = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.1966, 31.7825]
},
"properties": {
"GPSId": "2",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake2",
"GPSUserColor": "#FF5500",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.2, 31.780117]
},
"properties": {
"GPSId": "6",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake1",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201715, 31.779548]
},
"properties": {
"GPSId": "15",
"DateStart": "2015-02-21",
"DateClosed": "2016-02-28",
"GPSUserName": "fake10",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.779606]
},
"properties": {
"GPSId": "16",
"DateStart": "2015-01-01",
"DateClosed": "2016-01-01",
"GPSUserName": "fake11",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.780522]
},
"properties": {
"GPSId": "17",
"DateStart": "2015-02-04",
"DateClosed": "2016-09-21",
"GPSUserName": "fake12",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201435, 31.780981]
}
}],
};
和我的 javascript leaflet_demo_slider.js
文件
var map = L.map('map', {
center: [31.780117, 35.2],
zoom: 17,
minZoom: 2,
maxZoom: 20
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
var sliderControl = null;
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(slider, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
range: true,
timeAttribute: "DateStart"
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();
如果我删除 javascript 文件中的所有滑块选项,只需要
L.geoJson(slider, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
}
})addTo(map);
然后我就能看到标记,但我只能生成地图。
问题似乎是您的最后一个 GeoJSON 功能,它没有 DateStart
属性(对于滑块)或 GPSUserName
属性(对于弹出)。如果您删除该功能,它将起作用:
http://jsfiddle.net/ngeLm8c0/6/
如果您查看记录错误的控制台输出,通常更容易诊断这类问题。在大多数浏览器中,您可以通过按 F12 访问控制台(和其他开发人员工具)。当然,仅从错误消息中并不总是清楚哪里出了问题,但即使您不理解所遇到的错误,将错误消息与您的问题一起包含在此处也是有帮助的,这样其他人就可以了解更多轻松诊断您的问题。
我对使用传单和 javascript 还很陌生。我正在尝试使用传单实现时间滑块。我看过
1) https://github.com/dwilhelm89/LeafletSlider,
2) https://gis.stackexchange.com/questions/120331/jsonp-working-with-leaflet-time-slider 和
3)
我仍然遇到问题。我的 HTML 文件如下所示:
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="C:\Users\Lukasz Obara\OneDrive\Programing\JavaScript\Leaflet\Plugins\SliderControl.js"></script>
</head>
<body>
<meta charset="utf-8">
<title>Slider</title>
<style> html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</body>
<div id="map"></div>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\slider.geojson'></script>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\leaflet_demo_slider.js'></script>
我的slider.geojson文件:
var slider = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.1966, 31.7825]
},
"properties": {
"GPSId": "2",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake2",
"GPSUserColor": "#FF5500",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.2, 31.780117]
},
"properties": {
"GPSId": "6",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake1",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201715, 31.779548]
},
"properties": {
"GPSId": "15",
"DateStart": "2015-02-21",
"DateClosed": "2016-02-28",
"GPSUserName": "fake10",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.779606]
},
"properties": {
"GPSId": "16",
"DateStart": "2015-01-01",
"DateClosed": "2016-01-01",
"GPSUserName": "fake11",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.780522]
},
"properties": {
"GPSId": "17",
"DateStart": "2015-02-04",
"DateClosed": "2016-09-21",
"GPSUserName": "fake12",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201435, 31.780981]
}
}],
};
和我的 javascript leaflet_demo_slider.js
文件
var map = L.map('map', {
center: [31.780117, 35.2],
zoom: 17,
minZoom: 2,
maxZoom: 20
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
var sliderControl = null;
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(slider, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
range: true,
timeAttribute: "DateStart"
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
//And initialize the slider
sliderControl.startSlider();
如果我删除 javascript 文件中的所有滑块选项,只需要
L.geoJson(slider, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1><p>Other info</p>");
}
})addTo(map);
然后我就能看到标记,但我只能生成地图。
问题似乎是您的最后一个 GeoJSON 功能,它没有 DateStart
属性(对于滑块)或 GPSUserName
属性(对于弹出)。如果您删除该功能,它将起作用:
http://jsfiddle.net/ngeLm8c0/6/
如果您查看记录错误的控制台输出,通常更容易诊断这类问题。在大多数浏览器中,您可以通过按 F12 访问控制台(和其他开发人员工具)。当然,仅从错误消息中并不总是清楚哪里出了问题,但即使您不理解所遇到的错误,将错误消息与您的问题一起包含在此处也是有帮助的,这样其他人就可以了解更多轻松诊断您的问题。