简介
RT， vensor 里面有关于四元数的处理方案
参考链接
https://observablehq.com/@d3/versor-dragging
代码
<meta charset="utf-8">
<style>
</style>
<body>
<script src="./d3.js"></script>
<script src="./versor.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<canvas id="cc" width="500" height="500"></canvas>
<!-- <srcipt src="./land-50m.json"></srcipt> -->
<!-- <script src="./land-110m.json"></script> -->
<script>
// var topology = topojson.topology({foo: goejson})
var land110 = ''
var land50 = ''
d3.json('http://localhost:5500/land-110m.json').then((world) => land110 = topojson.feature(world, world.objects.land))
// console.log("land110", land110)
// land110 = land_110m.then(world => topojson.feature(world, world.objects.land))
d3.json('http://localhost:5500/land-50m.json').then(world => land50 = topojson.feature(world, world.objects.land))
sphere = ({type: "Sphere"})
projection = d3["geoOrthographic"]().precision(0.1)
height = getheight()
function getheight() {
width = 500
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
function drag(projection) {
let v0, q0, r0;
function dragstarted() {
v0 = versor.cartesian(projection.invert([d3.event.x, d3.event.y]));
q0 = versor(r0 = projection.rotate());
console.log("dargstart", v0, "q0", q0)
console.log('land110', land110)
}
function dragged() {
const v1 = versor.cartesian(projection.rotate(r0).invert([d3.event.x, d3.event.y])); // 笛卡尔坐标系
const q1 = versor.multiply(q0, versor.delta(v0, v1));
projection.rotate(versor.rotation(q1));
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged);
}
function init() {
var c=document.getElementById("cc");
var context=c.getContext("2d");
console.log(context)
// context = context.getContext("2d")
const path = d3.geoPath(projection, context)
function render (land) {
var c=document.getElementById("cc");
var context=c.getContext("2d");
context.clearRect(0, 0, width, height)
context.beginPath(), path(sphere), context.fillStyle = '#fff', context.fill()
context.beginPath(), path(land), context.fillStyle = '#000', context.fill()
context.beginPath(), path(sphere), context.stroke()
}
d3.select(context.canvas)
.call(drag(projection)
.on("drag.render", () => render(land110))
.on("end.render", () => render(land50)))
.call(() => render(land50))
.node();
}
init()
</script>
</body>