You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.2 KiB
122 lines
3.2 KiB
'use strict';
|
|
|
|
var BuoyAnalysisMap = {
|
|
/**
|
|
*
|
|
*/
|
|
reticle: {
|
|
stations: [],
|
|
x: 200,
|
|
y: 300,
|
|
scale: d3.scale.linear()
|
|
.domain([0, 100])
|
|
.range([20, 350])
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
projection: d3.geo.mercator()
|
|
.center([-122, 37.5])
|
|
.scale(2600)
|
|
.translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]),
|
|
|
|
/**
|
|
*
|
|
*/
|
|
drawMap: function() {
|
|
var path = d3.geo.path().projection(BuoyAnalysisMap.projection);
|
|
|
|
d3.select('#map svg').append("path")
|
|
.datum(topojson.feature(BuoyAnalysisData.mapJson, BuoyAnalysisData.mapJson.objects._map))
|
|
.attr('d', path)
|
|
.classed('feature', true)
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
drawStations: function() {
|
|
var tmp;
|
|
var station;
|
|
var stations = [];
|
|
|
|
var colors = [
|
|
'#f00',
|
|
'#d00',
|
|
'#b00',
|
|
'#900',
|
|
'#700',
|
|
'#0f0',
|
|
'#0d0',
|
|
'#0b0',
|
|
'#090',
|
|
'#070',
|
|
'#00f',
|
|
'#00d',
|
|
'#00b',
|
|
'#009',
|
|
'#007',
|
|
];
|
|
|
|
for (var prop in BuoyAnalysisData.stationJson) {
|
|
station = BuoyAnalysisData.stationJson[prop];
|
|
|
|
tmp = BuoyAnalysisMap.projection([station.lon, station.lat]);
|
|
station.x = tmp[0];
|
|
station.y = tmp[1];
|
|
|
|
stations.push(station);
|
|
}
|
|
|
|
d3.select("#map svg").selectAll('circle')
|
|
.data(stations)
|
|
.enter().append('circle')
|
|
.attr('cx', function(d) { return d.x; })
|
|
.attr('cy', function(d) { return d.y; })
|
|
.attr('r', 3)
|
|
.attr('id', function(d) { return 's' + d.id; })
|
|
.attr('stroke', function(d, i) { return colors[i]; })
|
|
// .attr('stroke', '#f00')
|
|
.attr('stroke-width', 5)
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
drawReticle: function() {
|
|
var r = BuoyAnalysisMap.reticle.scale(d3.select('.reticle-sizer').property('value'));
|
|
|
|
d3.select("#map svg").append('circle')
|
|
.attr('r', r)
|
|
.attr('fill', 'rgba(200, 200, 200, 0.5)')
|
|
.attr("transform", "translate(" + BuoyAnalysisMap.reticle.x + "," + BuoyAnalysisMap.reticle.y + ")")
|
|
.data([ {"x": BuoyAnalysisMap.reticle.x, "y": BuoyAnalysisMap.reticle.y } ])
|
|
.classed('reticle', true);
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
findStationsUnderReticle: function() {
|
|
var reticle = d3.select('.reticle');
|
|
var dX, dY, squares, distance, station;
|
|
var stations = [];
|
|
|
|
for (var s in BuoyAnalysisData.stationJson) {
|
|
station = BuoyAnalysisData.stationJson[s];
|
|
|
|
dX = reticle.data()[0].x - station.x;
|
|
dY = reticle.data()[0].y - station.y;
|
|
|
|
squares = Math.pow(dX, 2) + Math.pow(dY, 2)
|
|
distance = Math.pow(squares, 0.5);
|
|
|
|
if (distance < reticle.attr('r')) {
|
|
stations.push(s);
|
|
}
|
|
};
|
|
|
|
BuoyAnalysisMap.reticle.stations = stations;
|
|
}
|
|
};
|
|
|