简介

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>
posted on 2020-05-10 12:16 HDU李少帅阅读(191) 评论(0) 编辑收藏举报