WebWorldWind Cập nhật vị trí có thể hiển thị

Question

Tôi đang cố gắng "di chuyển" biểu tượng kết xuất quanh thế giới web trên thế giới trong một khoảng thời gian. Để minh họa cho vấn đề tôi đang gặp phải, tôi đã làm một ví dụ nhỏ.

này hoạt động (nhưng không hiệu quả):

var myVar = setInterval(myTimer, 5000); 

    function myTimer() { 


     shapesLayer.removeRenderable(shape); 
     shape = new WorldWind.SurfaceCircle(new WorldWind.Location(shape.center.latitude+1, shape.center.longitude), 200e3, attributes); 
     shapesLayer.addRenderable(shape); 

     console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude); 

     wwd.redraw(); 
    } 

Đây là những gì tôi muốn làm, nhưng hình dạng không di chuyển:

var myVar = setInterval(myTimer, 5000); 

    function myTimer() { 

     shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude); 

     console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude); 

     wwd.redraw(); 
    } 

Có một lá cờ tôi cần để thiết lập trên renderable để làm cho nó làm mới?

Dưới đây là file đầy đủ SurfaceShapes.js Tôi đã chơi với (dựa trên http://worldwindserver.net/webworldwind/examples/SurfaceShapes.html này):

/* 
* Copyright (C) 2014 United States Government as represented by the Administrator of the 
* National Aeronautics and Space Administration. All Rights Reserved. 
*/ 
/** 
* Illustrates how to display SurfaceShapes. 
* 
* @version $Id: SurfaceShapes.js 3320 2015-07-15 20:53:05Z dcollins $ 
*/ 

requirejs(['../src/WorldWind', 
     './LayerManager'], 
    function (ww, 
       LayerManager) { 
     "use strict"; 

     // Tell World Wind to log only warnings. 
     WorldWind.Logger.setLoggingLevel(WorldWind.Logger.LEVEL_WARNING); 

     // Create the World Window. 
     var wwd = new WorldWind.WorldWindow("canvasOne"); 

     /** 
     * Added imagery layers. 
     */ 
     var layers = [ 
      {layer: new WorldWind.BMNGLayer(), enabled: true}, 
      {layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true}, 
      {layer: new WorldWind.CompassLayer(), enabled: true}, 
      {layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true}, 
      {layer: new WorldWind.ViewControlsLayer(wwd), enabled: true} 
     ]; 

     for (var l = 0; l < layers.length; l++) { 
      layers[l].layer.enabled = layers[l].enabled; 
      wwd.addLayer(layers[l].layer); 
     } 

     // Create a layer to hold the surface shapes. 
     var shapesLayer = new WorldWind.RenderableLayer("Surface Shapes"); 
     wwd.addLayer(shapesLayer); 

     // Create and set attributes for it. The shapes below except the surface polyline use this same attributes 
     // object. Real apps typically create new attributes objects for each shape unless they know the attributes 
     // can be shared among shapes. 
     var attributes = new WorldWind.ShapeAttributes(null); 
     attributes.outlineColor = WorldWind.Color.BLUE; 
     attributes.drawInterior = false; 
     attributes.outlineWidth = 4; 
     attributes.outlineStippleFactor = 1; 
     attributes.outlineStipplePattern = 0xF0F0;  

     var highlightAttributes = new WorldWind.ShapeAttributes(attributes); 
     highlightAttributes.interiorColor = new WorldWind.Color(1, 1, 1, 1); 


     // Create a surface circle with a radius of 200 km. 
     var shape = new WorldWind.SurfaceCircle(new WorldWind.Location(35, -120), 200e3, attributes); 
     shape.highlightAttributes = highlightAttributes; 
     shapesLayer.addRenderable(shape); 

     // Create a layer manager for controlling layer visibility. 
     var layerManger = new LayerManager(wwd); 

     // Now set up to handle highlighting. 
     var highlightController = new WorldWind.HighlightController(wwd); 

     var myVar = setInterval(myTimer, 5000); 

     function myTimer() { 

      //Shape doesn't move 

      shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude); 

      //Shape "moves" but is inefficient 

      //shapesLayer.removeRenderable(shape); 
      //shape = new WorldWind.SurfaceCircle(new WorldWind.Location(shape.center.latitude+1, shape.center.longitude), 200e3, attributes); 
      //shapesLayer.addRenderable(shape); 

      console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude); 

      wwd.redraw(); 
     } 
    } 
); 

Answer 1

Nếu bất cứ ai khác đang xem xét này, tôi tìm thấy một giải pháp tốt hơn để buộc nó tính toán lại vị trí trung tâm bằng cách thiết lập isPrepared thành false và _boundaries thành undefined.

var myVar = setInterval(myTimer, 5000); 

    function myTimer() { 

     shape.isPrepared = false; 
     shape._boundaries = undefined; 

     shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude); 

     console.log(" new pos "+shape.center.latitude + " "+shape.center.longitude); 

     wwd.redraw(); 
    } 

Answer 2

Document nói renderables biến là chỉ đọc nhưng tôi nghĩ rằng nó có thể thực hiện được.
thay đổi mã

shape.center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude); 

Để

index = ShapesLayer.renderables.indexOf(shape); 
ShapesLayer.renderables[index].center = new WorldWind.Location(shape.center.latitude+1, shape.center.longitude); 

Tôi nghĩ ShapesLayer.addRenderable tạo bao phấn hình thành.

Nếu bạn nghĩ rằng nó không phải là cách tốt để làm bạn có thể sử dụng cách này

RenderableLayer.prototype.changeRenderable= function (prevRenderable, nextRenderable) { 

     index = ShapesLayer.renderables.indexOf(prevRenderable); 
     ShapesLayer.renderables[index].center = nextRenderable; 
    }; 

mã chính

ShapesLayer.changeRenderable(shape, new WorldWind.Location(shape.center.latitude+1, shape.center.longitude)); 

Document: https://nasaworldwind.github.io/WebWorldWind/layer_RenderableLayer.js.html