Я хочу выяснить, как правильно рассчитать зону видимости и нарисовать ее, используя проекции d3.geo.Зона видимости в моем случае сейчас оптическая камера frustum
, у меня есть два графика, оба представляют азимут и угол места с точки зрения, один в гномонической (согласно wiki ) проекции:
// this magic number is experimentally found
//pixels in one degree in gnomonic projection chart with scale 1500
var px = 26.8;
Ширина и высота ниже - это углы обзора оптической камеры в градусах по азимуту и углу места
var w = px * viewport.width;
var h = px * viewport.height;
d3.geoGnomonic()
.translate([w / 2, h / 2])
.scale(1500)
вклГномический график Я поместил точки по его границе, затем перепроектировал эти точки с помощью метода d3.projection.invert и использовал результирующие углы на проекционном графике d3.geoEquirectangular для рисования областей (, как здесь ), со следующими результатами:
viewport здесь размер усеченного конуса в углах
текущий метод неверен, но дает приблизительный результат
Я хочу выяснить, что не так в моем сценарии ..
ps: я извлек минимальный пример, он отличается от исходного кода, но имеет ту же ошибку: здесь вы можете видеть, что размер по горизонтальной оси отличаетсяот входного размера (должно быть 10, 20, 30, 40 градees)
Предложения и комментарии приветствуются.Спасибо за чтение!
var d3 = window.d3;
var colorGenerator = d3.scaleOrdinal(d3.schemeCategory10);
var bounds = [650, 500];
var projection = d3.geoEquirectangular().translate([bounds[0]/2, bounds[1]/2]);
var geoPath = d3.geoPath().projection(projection);
var zoom = d3.zoom()
.scaleExtent([1, 1000])
.translateExtent([[0, 0], bounds])
.on("zoom", zoomed);
var svg = d3.select('body')
.append('svg')
.attr("width", bounds[0])
.attr("height", bounds[1])
.attr("viewbox", "0 0 " + bounds[0] + " " + bounds[1])
.call(zoom)
.append('g');
svg.append("g")
.append("path")
.datum(d3.geoGraticule())
.attr("stroke", "gray")
.attr("d", geoPath);
d3.range(0, 4).forEach(function (i) {
var size = (i + 1) * 10;
addVisibilityZone([-130 + size * 5, 50],
colorGenerator(i), [size, size]);
});
function zoomed() {
var t = d3.event.transform;
svg.attr("transform", t);
d3.selectAll("path").attr('stroke-width', 1/t.k);
}
function addVisibilityZone(angles, color, size) {
var xy = projection(angles);
var points = generateRect(100, 0, 0, size[0], size[1]);
var gnomonicProjection = d3.geoGnomonic().clipAngle(180)
.translate([size[0]/2, size[1]/2])
.scale(57); // this magic number is experimentally found
var g = svg.append("g");
var drag = d3.drag()
.on("start", dragged)
.on("drag", dragged);
var path = g.append("path")
.datum({
type: "Polygon",
coordinates: [[]],
})
.classed("zone", "true")
.attr("fill", color)
.attr("stroke", color)
.attr("fill-opacity", 0.3)
.call(drag);
update();
function dragged() {
g.raise();
xy = [d3.event.x, d3.event.y];
update()
}
function update() {
angles = projection.invert(xy);
gnomonicProjection.rotate([-angles[0], -angles[1]]);
path.datum().coordinates[0] = points.map(gnomonicProjection.invert);
path.attr('d', geoPath);
}
}
function generateRect(num, x, y, width, height) {
var count = Math.floor(num / 4) + 1;
var range = d3.range(count);
return range.map(function (i) { // top
return pt(i * width / count, 0);
}).concat(range.map(function (i) { // right
return pt(width, i * height / count);
})).concat(range.map(function (i) { // bottom
return pt(width - i * width / count, height);
})).concat(range.map(function (i) { // left
return pt(0, height - i * height / count);
}));
function pt(dx, dy) {
return [x + dx, y + dy];
}
}
* {
margin: 0;
overflow: hidden;
}
<script src="//d3js.org/d3.v5.min.js"></script>