|
|
|
@ -16,32 +16,51 @@ d3.select('svg').selectAll('path')
|
|
|
|
.attr('fill', '#099')
|
|
|
|
.attr('fill', '#099')
|
|
|
|
.attr('d', dAttributeFunction);
|
|
|
|
.attr('d', dAttributeFunction);
|
|
|
|
|
|
|
|
|
|
|
|
let points = [];
|
|
|
|
const dragBehavior = d3.drag()
|
|
|
|
d3.select('svg').on('click', (event)=>{
|
|
|
|
.on('start', (event) => {
|
|
|
|
points.push([event.x, event.y])
|
|
|
|
d3.select('table tr:nth-child(2) td:first-child')
|
|
|
|
const path = d3.path();
|
|
|
|
.html(worldProjection.invert([event.x, event.y])[0])
|
|
|
|
path.moveTo(points[0][0], points[0][1])
|
|
|
|
d3.select('table tr:nth-child(2) td:last-child')
|
|
|
|
for(let i = 1; i < points.length; i++){
|
|
|
|
.html(worldProjection.invert([event.x, event.y])[1])
|
|
|
|
path.lineTo(points[i][0], points[i][1])
|
|
|
|
|
|
|
|
}
|
|
|
|
d3.selectAll('rect').remove();
|
|
|
|
path.closePath()
|
|
|
|
d3.select('svg').append('rect')
|
|
|
|
d3.select('#polygon').remove()
|
|
|
|
.attr('x', event.x)
|
|
|
|
d3.select('svg')
|
|
|
|
.attr('y', event.y);
|
|
|
|
.append('path')
|
|
|
|
|
|
|
|
.attr('id', 'polygon')
|
|
|
|
|
|
|
|
.attr('fill', 'black')
|
|
|
|
|
|
|
|
.attr('d', path)
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
d3.select('body').on('keydown', (event)=>{
|
|
|
|
.on('drag', (event) => {
|
|
|
|
d3.select('tbody').html('');
|
|
|
|
d3.select('table tr:nth-child(3) td:first-child')
|
|
|
|
const coords = points.map(point => worldProjection.invert(point))
|
|
|
|
.html(worldProjection.invert([event.x, event.y])[0])
|
|
|
|
for(coord of coords){
|
|
|
|
d3.select('table tr:nth-child(3) td:last-child')
|
|
|
|
const row = d3.select('tbody')
|
|
|
|
.html(worldProjection.invert([event.x, event.y])[1])
|
|
|
|
.append('tr')
|
|
|
|
|
|
|
|
row.append('td')
|
|
|
|
d3.select('rect').attr('width', event.x-d3.select('rect').attr('x'))
|
|
|
|
.html(coord[0])
|
|
|
|
d3.select('rect').attr('height', event.y-d3.select('rect').attr('y'))
|
|
|
|
row.append('td')
|
|
|
|
|
|
|
|
.html(coord[1])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
points = [];
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.select('svg').call(dragBehavior);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.select('form').on('submit', (event) => {
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.selectAll('rect').remove();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const lat1 = d3.select('input:first-child').property('value');
|
|
|
|
|
|
|
|
const lng1 = d3.select('input:nth-child(2)').property('value');
|
|
|
|
|
|
|
|
const location1 = worldProjection([lat1, lng1]);
|
|
|
|
|
|
|
|
const x1 = location1[0];
|
|
|
|
|
|
|
|
const y1 = location1[1];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const lat2 = d3.select('input:nth-child(4)').property('value');
|
|
|
|
|
|
|
|
const lng2 = d3.select('input:nth-child(5)').property('value');
|
|
|
|
|
|
|
|
const location2 = worldProjection([lat2, lng2]);
|
|
|
|
|
|
|
|
const x2 = location2[0];
|
|
|
|
|
|
|
|
const y2 = location2[1];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.select('svg').append('rect')
|
|
|
|
|
|
|
|
.attr('fill', '#000')
|
|
|
|
|
|
|
|
.attr('x', x1)
|
|
|
|
|
|
|
|
.attr('y', y1)
|
|
|
|
|
|
|
|
.attr('width', x2-x1)
|
|
|
|
|
|
|
|
.attr('height', y2-y1)
|
|
|
|
|
|
|
|
});
|
|
|
|
|
