WebWorldWind渲染位置更新

Question

我试图在Web Worldwind地球仪上按间隔“移动”可渲染对象。为了说明我遇到的问题，我制作了一个小例子。

这个方法可以工作（但效率低下）：

    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();
    }

这是我想要做的，但图形不会移动：

    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();
    }

我需要设置标志在可渲染对象上以使其刷新吗？

这是我一直在尝试的完整的SurfaceShapes.js文件（基于这个http://worldwindserver.net/webworldwind/examples/SurfaceShapes.html）：

/*
 * 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();
        }
    }
);

- mainstringargs

---

你测试过 Renderable.setPosition(Position position) 吗？我认为它适用于你的情况。如果你的 shape 是一个 Renderable，你可以使用 shape.setPosition(...)。 - hadi.mansouri

Answer 1

文档指出renderables变量是只读的，但我认为它是可以改变的。
更改代码

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

To

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

我认为ShapesLayer.addRenderable可以创建另一个形状。

如果您认为这种方法不好，您可以使用以下方式

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

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

主要代码

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

文档：https://nasaworldwind.github.io/WebWorldWind/layer_RenderableLayer.js.html

这是一个关于IT技术的文档，它涉及到WebWorldWind的渲染层。请点击上方链接以查看完整文档。

- artgb

---

我在WebWorldWind的API（https://nasaworldwind.github.io/WebWorldWind/）中没有看到ShapesLayer。我认为你可能正在查看WorldWind Java，而不是像我所在的WebWorldWind。 - mainstringargs

Answer 2

如果其他人也在看这个问题，我发现一个更好的解决方案是将isPrepared设置为false并将_boundaries设置为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();
    }

- mainstringargs

---

很高兴你得到了一行答案，shape._boundaries = undefined，为什么需要它？ - artgb