Question

我正在尝试设置一个国家/地区链接列表，当用户点击链接时，planetjs地图会在3D地图中旋转以使所选国家/地区居中。

我试图创建一个没有太多运气的planetjs插件，并研究了D3变换方法，但我不知道如何使用planetjs使用onDraw方法来进行视图更新。

我在这里设置了一个测试代码： https://codepen.io/jjgravity/project/editor/ZrdqnA/

这显示了世界地图和两个链接（巴黎，北京）。偏航/俯仰/滚转目标在js文件中被捕获＆＃39; js / planetaryapp.js＆＃39;。

这是我在js文件中使用的主要代码：

planet.loadPlugin(planetaryjs.plugins.earth({
    topojson: { file: 'js/world-110m.json' },
    oceans:   { fill:   '#a5a5a7' },
    land:     { fill:   '#dbdadc' },
    borders:  { stroke: '#a5a5a7' }
}));

planet.loadPlugin(planetaryjs.plugins.drag({
    onDrag: function() {
        console.log("The planet was dragged!", this, d3.event);
    }
}));

// Make the planet fit well in its canvas
planet.projection.scale(150).translate([150, 150]);
var canvas = document.getElementById('globe');
planet.draw(canvas);

$("#paris a").on("click",function(){
    //co-ordinates ew want to rotate to [0,-30]
    // console.log(planet.projection.rotate());
    var targ = [0,-30,0];
    var speed = [0,-1,0];
    planet.onDraw(function() {
        var rotation = planet.projection.rotate();
        if(rotation[1] > -30){
            rotation -= 1;
        }
    planet.projection.rotate(rotation);
    });

    //planet.plugins.rotatetoloc.dest([0,-30,0]);
});

$("#bejing a").on("click",function(){
    //co-ordinates ew want to rotate to [-80,-20]
    planet.onDraw(function() {
        var rotation = planet.projection.rotate();
        if(rotation[0] > -80){
            rotation[0] -= 1;
        }
        if(rotation[1] < -20){
            rotation[1] += 1;
        }
        planet.projection.rotate(rotation);
    });
});

我是D3和planetjs的新手，所以请原谅我，如果这是显而易见的事情。

在点击事件上旋转Planetaryjs地图

0 个答案: