Thêm nhiều chức năng hơn để planetaryJS cầu

Question

Tôi muốn thêm hai chức năng trong planetaryJS cầu

1. tôi muốn tăng tốc độ Zoom cho thế giới được tạo ra bởi hành tinh JS
2. Làm thế nào tôi có thể tạo ra nhiều ping giống như những người được tạo ra here. Tôi biết nó cần một tập hợp kinh độ và vĩ độ nhưng tôi không thể làm điều đó ngay cả đối với một lần ping.

Hơn nữa toàn cầu cho có quá mịn để xoay so với cái được cung cấp bởi planetaryJS

Nói tóm lại tôi muốn thực hiện toàn cầu chính xác tương tự như this

đầu vào Bất kỳ?

Nền toàn cầu của Kaspersky quá tốt. Khi chúng ta xoay hình cầu, nền đang chuyển động, tôi nên thực hiện nó như thế nào? Tôi đã thử here

(function() { 
    var canvas = document.getElementById('quakeCanvas'); 

    // Create our Planetary.js planet and set some initial values; 
    // we use several custom plugins, defined at the bottom of the file 
    var planet = planetaryjs.planet(); 
    planet.loadPlugin(autocenter({extraHeight: -120})); 
    planet.loadPlugin(autoscale({extraHeight: -120})); 
    planet.loadPlugin(planetaryjs.plugins.earth({ 
    topojson: { file: 'https://rawgit.com/prashantgpt91/9b0558613b94eb2498325931acf5ea21/raw/0440b7a29db12374257ffdec3d41fda8f7481f3e/world-110m.json' }, 
    oceans: { fill: '#001320' }, 
    land:  { fill: '#06304e' }, 
    borders: { stroke: '#001320' } 
    })); 
    planet.loadPlugin(planetaryjs.plugins.pings()); 
    planet.loadPlugin(planetaryjs.plugins.zoom({ 
    scaleExtent: [10, 10000] 
    })); 
    planet.loadPlugin(planetaryjs.plugins.drag({ 
    onDragStart: function() { 
     this.plugins.autorotate.pause(); 
    }, 
    onDragEnd: function() { 
     this.plugins.autorotate.resume(); 
    } 
    })); 
    planet.loadPlugin(autorotate(5)); 
    planet.projection.rotate([100, -10, 0]); 
    planet.draw(canvas); 


    // Create a color scale for the various earthquake magnitudes; the 
    // minimum magnitude in our data set is 2.5. 
    var colors = d3.scale.pow() 
    .exponent(3) 
    .domain([2, 4, 6, 8, 10]) 
     .range(['white', 'yellow', 'orange', 'red', 'purple']); 
    // Also create a scale for mapping magnitudes to ping angle sizes 
    var angles = d3.scale.pow() 
    .exponent(3) 
    .domain([2.5, 10]) 
    .range([0.5, 15]); 
    // And finally, a scale for mapping magnitudes to ping TTLs 
    var ttls = d3.scale.pow() 
    .exponent(3) 
    .domain([2.5, 10]) 
    .range([2000, 5000]); 

    // Create a key to show the magnitudes and their colors 
    d3.select('#magnitudes').selectAll('li') 
    .data(colors.ticks(9)) 
    .enter() 
    .append('li') 
    .style('color', colors) 
    .text(function(d) { 
     return " "; 
    }); 


    // Load our earthquake data and set up the controls. 
    // The data consists of an array of objects in the following format: 
    // { 
    // mag: magnitude_of_quake 
    // lng: longitude_coordinates 
    // lat: latitude_coordinates 
    // time: timestamp_of_quake 
    // } 
    // The data is ordered, with the earliest data being the first in the file. 
    d3.json('https://rawgit.com/BinaryMuse/planetary.js/master/site/public/examples/quake/year_quakes_small.json', function(err, data) { 
    if (err) { 
     alert("Problem loading the quake data."); 
     return; 
    } 

    var start = parseInt(data[0].time, 10); 
    var end = parseInt(data[data.length - 1].time, 10); 
    var currentTime = start; 
    var lastTick = new Date().getTime(); 

    var updateDate = function() { 
     d3.select('#date').text(moment(currentTime).utc().format("MMM DD YYYY HH:mm UTC")); 
    }; 

    // A scale that maps a percentage of playback to a time 
    // from the data; for example, `50` would map to the halfway 
    // mark between the first and last items in our data array. 
    var percentToDate = d3.scale.linear() 
     .domain([0, 100]) 
     .range([start, end]); 

    // A scale that maps real time passage to data playback time. 
    // 12 minutes of real time maps to the entirety of the 
    // timespan covered by the data. 
    var realToData = d3.scale.linear() 
     .domain([0, 1000 * 60 * 12]) 
     .range([0, end - start]); 

    var paused = false; 

    // Pause playback and update the time display 
    // while scrubbing using the range input. 
    d3.select('#slider') 
     .on('change', function(d) { 
     currentTime = percentToDate(d3.event.target.value); 
     updateDate(); 
     }) 
     .call(d3.behavior.drag() 
     .on('dragstart', function() { 
      paused = true; 
     }) 
     .on('dragend', function() { 
      paused = false; 
     }) 
    ); 


    // The main playback loop; for each tick, we'll see how much 
    // time passed in our accelerated playback reel and find all 
    // the earthquakes that happened in that timespan, adding 
    // them to the globe with a color and angle relative to their magnitudes. 
    d3.timer(function() { 
     var now = new Date().getTime(); 

     if (paused) { 
     lastTick = now; 
     return; 
     } 

     var realDelta = now - lastTick; 
     // Avoid switching back to the window only to see thousands of pings; 
     // if it's been more than 500 milliseconds since we've updated playback, 
     // we'll just set the value to 500 milliseconds. 
     if (realDelta > 500) realDelta = 500; 
     var dataDelta = realToData(realDelta); 

     var toPing = data.filter(function(d) { 
     return d.time > currentTime && d.time <= currentTime + dataDelta; 
     }); 

     for (var i = 0; i < toPing.length; i++) { 
     var ping = toPing[i]; 
     planet.plugins.pings.add(ping.lng, ping.lat, { 
      // Here we use the `angles` and `colors` scales we built earlier 
      // to convert magnitudes to appropriate angles and colors. 
      angle: angles(ping.mag), 
      color: colors(ping.mag), 
      ttl: ttls(ping.mag) 
     }); 
     } 

     currentTime += dataDelta; 
     if (currentTime > end) currentTime = start; 
     updateDate(); 
     d3.select('#slider').property('value', percentToDate.invert(currentTime)); 
     lastTick = now; 
    }); 
    }); 



    // Plugin to resize the canvas to fill the window and to 
    // automatically center the planet when the window size changes 
    function autocenter(options) { 
    options = options || {}; 
    var needsCentering = false; 
    var globe = null; 

    var resize = function() { 
     var width = window.innerWidth + (options.extraWidth || 0); 
     var height = window.innerHeight + (options.extraHeight || 0); 
     globe.canvas.width = width; 
     globe.canvas.height = height; 
     globe.projection.translate([width/2, height/2]); 
    }; 

    return function(planet) { 
     globe = planet; 
     planet.onInit(function() { 
     needsCentering = true; 
     d3.select(window).on('resize', function() { 
      needsCentering = true; 
     }); 
     }); 

     planet.onDraw(function() { 
     if (needsCentering) { resize(); needsCentering = false; } 
     }); 
    }; 
    }; 

    // Plugin to automatically scale the planet's projection based 
    // on the window size when the planet is initialized 
    function autoscale(options) { 
    options = options || {}; 
    return function(planet) { 
     planet.onInit(function() { 
     var width = window.innerWidth + (options.extraWidth || 0); 
     var height = window.innerHeight + (options.extraHeight || 0); 
     planet.projection.scale(Math.min(width, height)/2); 
     }); 
    }; 
    }; 

    // Plugin to automatically rotate the globe around its vertical 
    // axis a configured number of degrees every second. 
    function autorotate(degPerSec) { 
    return function(planet) { 
     var lastTick = null; 
     var paused = false; 
     planet.plugins.autorotate = { 
     pause: function() { paused = true; }, 
     resume: function() { paused = false; } 
     }; 
     planet.onDraw(function() { 
     if (paused || !lastTick) { 
      lastTick = new Date(); 
     } else { 
      var now = new Date(); 
      var delta = now - lastTick; 
      var rotation = planet.projection.rotate(); 
      rotation[0] += degPerSec * delta/1000; 
      if (rotation[0] >= 180) rotation[0] -= 360; 
      planet.projection.rotate(rotation); 
      lastTick = now; 
     } 
     }); 
    }; 
    }; 
})(); 

Answer 1

Để tăng tốc độ zoom, thay đổi dòng 17 của fiddle của bạn để

planet.loadPlugin(planetaryjs.plugins.zoom({scaleExtent: [500, 10000]})); 

bằng cách thay đổi 500 đây, bạn có thể tăng tốc độ phóng to bằng cách sử dụng scrollwheel/máy tính xách tay nhúm để phóng to

Có một ví dụ về cách thêm ping ngẫu nhiên vào bản đồ của bạn ở đây trên dòng 40: http://planetaryjs.com/examples/rotating.html

Như thế này:

setInterval(function() { 
var lat = Math.random() * 170 - 85; 
var lng = Math.random() * 360 - 180; 
globe.plugins.pings.add(lng, lat, 'white'); 
}, 150); 

Điều quan trọng là phải nhớ rằng cybermap bởi Kaspersky đang sử dụng WebGL, và không được sử dụng thư viện planetaryJS (xây dựng trên D3.js, đó là 2D dựa). Sử dụng WebGL làm cho thế giới Kaspersky nhanh hơn nhiều, với chi phí cho một thời gian phát triển dài hơn.