0
Как использовать листовую тепловую карту с плагином времени?
<!DOCTYPE html>
<html>
<head>
<title>TimeDimension</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src='javascripts/heatmap.js'></script>
<script src='javascripts/leaflet-heatmap.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.2/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.css" />
<link rel="stylesheet" href="stylesheets/leaflet.timedimension.control.css" />
<link rel="stylesheet" href="stylesheets/style.css" />
<style>
a.leaflet-control-timecontrol.timecontrol-date {
width: 120px;
padding-left: 50px !important;
font-weight: bold;
}
#map {height: 700px; weight: 100px;}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.2/leaflet.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/ptv-logistics/Leaflet.NonTiledLayer/master/NonTiledLayer.js"></script>
<script type="text/javascript" src="https://rawgit.com/ptv-logistics/Leaflet.NonTiledLayer/master/NonTiledLayer.WMS.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/pa7/heatmap.js/develop/plugins/leaflet-heatmap.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script type="text/javascript" src="https://rawgit.com/felixge/node-dateformat/master/lib/dateformat.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.util.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.layer.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.layer.wms.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.layer.geojson.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.player.js"></script>
<script type="text/javascript" src="javascripts/timeDim/leaflet.timedimension.control.js"></script>
<div id="map"></div>
<script>
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};
// Attibution: SODA API requests based on this example: https://github.com/chriswhong/soda-leaflet
L.TimeDimension.Layer.SODAHeatMap = L.TimeDimension.Layer.extend({
initialize: function(options) {
var heatmapCfg = {
radius: 20,
maxOpacity: 1,
scaleRadius: false,
useLocalExtrema: false,
latField: 'lat',
lngField: 'lng',
valueField: 'count/15'
};
heatmapCfg = $.extend({}, heatmapCfg, options.heatmatOptions || {});
var layer = new HeatmapOverlay(heatmapCfg);
L.TimeDimension.Layer.prototype.initialize.call(this, layer, options);
this._currentLoadedTime = 0;
this._currentTimeData = {
max: this.options.heatmapMax || 10,
data: []
};
this._baseURL = this.options.baseURL || null;
this._period = this.options.period || "P1M";
},
onAdd: function(map) {
L.TimeDimension.Layer.prototype.onAdd.call(this, map);
map.addLayer(this._baseLayer);
if (this._timeDimension) {
this._getDataForTime(this._timeDimension.getCurrentTime());
}
},
_onNewTimeLoading: function(ev) {
this._getDataForTime(ev.time);
return;
},
isReady: function(time) {
return (this._currentLoadedTime == time);
},
_update: function() {
this._baseLayer.setData(this._currentTimeData);
return true;
},
_getDataForTime: function(time) {
if (!this._baseURL || !this._map) {
return;
}
var url = this._constructQuery(time);
$.getJSON(url, (function(data) {
delete this._currentTimeData.data;
this._currentTimeData.data = [];
for (var i = 0; i < data.length; i++) {
var marker = data[i];
if (marker.location) {
this._currentTimeData.data.push({
lat: marker.location.latitude,
lng: marker.location.longitude,
count: 1
});
}
}
this._currentLoadedTime = time;
if (this._timeDimension && time == this._timeDimension.getCurrentTime() && !this._timeDimension.isLoading()) {
this._update();
}
this.fire('timeload', {
time: time
});
}).bind(this));
},
_constructQuery: function(time) {
var bbox = this._map.getBounds();
var sodaQueryBox = [bbox._northEast.lat, bbox._southWest.lng, bbox._southWest.lat, bbox._northEast.lng];
var startDate = new Date(time);
var endDate = new Date(startDate.getTime());
L.TimeDimension.Util.addTimeDuration(endDate, this._period, false);
var where = "&$where=created_date > '" +
startDate.format('yyyy-mm-dd') +
"' AND created_date < '" +
endDate.format('yyyy-mm-dd') +
"' AND within_box(location," +
sodaQueryBox +
")&$order=created_date desc";
var url = this._baseURL + where;
return url;
}
});
L.timeDimension.layer.sodaHeatMap = function(options) {
return new L.TimeDimension.Layer.SODAHeatMap(options);
};
var currentTime = new Date();
currentTime.setUTCDate(1, 0, 0, 0, 0);
var map = L.map('map', {
zoom: 12,
fullscreenControl: true,
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2010-01-01/" + currentTime.toISOString(),
period: "P1M",
currentTime: currentTime
},
center: [40.74, -73.9],
});
var layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
map.addLayer(layer);
//baselayer---------------------------------------------------------------------------------------------------------
var testSODALayer = L.timeDimension.layer.sodaHeatMap({
baseURL: 'https://data.cityofnewyork.us/resource/erm2-nwe9.json?$select=location,closed_date,complaint_type,street_name,created_date,status,unique_key,agency_name,due_date,descriptor,location_type,agency,incident_address&complaint_type=Noise - Commercial',
});
testSODALayer.addTo(map);
map.attributionControl.addAttribution('<a href="https://nycopendata.socrata.com/Social-Services/311-Service-Requests-from-2010-to-Present/erm2-nwe9">NYC OpenData</a>');
L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
_getDisplayDateFormat: function(date){
return date.format("mmmm yyyy");
}
});
//heatmapLayer------------------------------------------------------------------------------------------------------
var timeDimensionControl = new L.Control.TimeDimensionCustom({
playerOptions: {
buffer: 1,
minBufferReady: -1
}
});
map.addControl(this.timeDimensionControl);
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<div>
<a href="http://localhost:2999" class="btn btn-primary btn-lg btn-block" role="button">Back</a>
</div>
</body>
</html>http://apps.socib.es/Leaflet.TimeDimension/examples/example12.html
Я нашел этот пример и успешно работать в моем локальном хосте,
, но как я могу изменить данные в мой собственный файл JSON?
мой код сейчас почти такой же, как вышеприведенный пример.
Я пробовал $ getJson и несколько методов для чтения моих данных json, но все они не работают.
не знаю, какая часть кода я должен изменить
Пожалуйста, ваш полный код. – Marcel1997
Я просто хочу сделать одну страницу, поэтому я полностью помещаю код в файл ejs, не хочу, чтобы проект был слишком сложным. – zero0o0o