javascript - Openlayers - LayerRedraw()/特征旋转/线串坐标

Question

TLDR:我有一个 Openlayers map ，其中有一个名为“track”的层，我想删除轨道并重新添加轨道。或者弄清楚如何根据一组坐标绘制三 Angular 形 &一个标题(见下文)。

---

我在图层上有一个图像 'imageFeature'，它会根据负载旋转到设置的方向。我希望它更新在名为 'tracking' 的图层上的 'styleMap' 中设置的旋转。

1. 我设置了 var 'stylemap' 以应用外部图像和旋转。
2. 'imageFeature' 被添加到指定坐标处的图层。
3. 'imageFeature' 已删除。
4. 'imageFeature' 再次添加到新位置。不适用旋转..

由于 'styleMap' 应用于图层，我认为我必须删除图层并再次添加它，而不仅仅是 'imageFeature'

图层:

var tracking = new OpenLayers.Layer.GML("Tracking", "coordinates.json", {
  format: OpenLayers.Format.GeoJSON,
  styleMap: styleMap
});

styleMap:

var styleMap = new OpenLayers.StyleMap({
  fillOpacity: 1,
  pointRadius: 10,
  rotation: heading,
});

现在包裹在一个定时函数中 imageFeature:

map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
  new OpenLayers.Geometry.Point(longitude, latitude), {
    rotation: heading,
    type: parseInt(Math.random() * 3)
  }
));

类型是指对 3 张图像中的 1 张进行查找。:

styleMap.addUniqueValueRules("default", "type", lookup);

var lookup = {
  0: {
    externalGraphic: "Image1.png",
    rotation: heading
  },
  1: {
    externalGraphic: "Image2.png",
    rotation: heading
  },
  2: {
    externalGraphic: "Image3.png",
    rotation: heading
  }
}

我试过“redraw()”函数:但它返回“tracking is undefined”或“map.layers[2]”未定义。

tracking.redraw(true);
map.layers[2].redraw(true);

标题是一个变量:来自 JSON 提要。

var heading = 13.542;

但到目前为止还没有任何效果，它只会在加载时旋转图像。图像将按其应有的坐标移动。

那么我在重绘功能上做错了什么或者我怎样才能让这个图像实时旋转？

提前致谢

-尾崎

添加:我设法得到了

 map.layers[2].redraw(true);

成功重绘第2层。但它仍然没有更新旋转。我在想是因为样式图正在更新。但它每 n 秒运行一次样式映射，但没有更新旋转，如果我在 Firebug 中监视它，航向变量会正确更新。

---

如果我要用一组点和线串绘制一个三 Angular 形。 我将如何面对三 Angular 形朝向标题。 我有一个点的经/纬度和航向。

var points = new Array(
  new OpenLayers.Geometry.Point(lon1, lat1),
  new OpenLayers.Geometry.Point(lon2, lat2),
  new OpenLayers.Geometry.Point(lon3, lat3)
);

var line = new OpenLayers.Geometry.LineString(points);

寻找任何方法来解决这个问题图像或线路任何人都知道如何做或者添加一个 100rep 赏金我真的坚持这个。

---

//From getJSON request//
var heading = data.RawHeading;

添加和删除图像特征

Answer 1

解决问题如下:

            var styleMap = new OpenLayers.StyleMap({
                fillOpacity: 1,
                pointRadius: 10,
                rotation: "${angle}",
            });

           var lookup = {
                0: { externalGraphic: "Image1.png", rotation: "${angle}" },
                1: { externalGraphic: "Image2.png", rotation: "${angle}" },
                2: { externalGraphic: "Image3.png", rotation: "${angle}" }
            }
 styleMap.addUniqueValueRules("default", "type", lookup);

 map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lon, lat), {"angle": dir, type: parseInt(Math.random() * 3)}
        ), {"angle": dir});

然后请求:

var dir = (function () {
                $.ajax({
                    'async': false,
                    'global': true,
                    'url': urldefault,
                    'dataType': "json",
                    'success': function (data) {
                        dir = data.Heading
                    }
                });
                return dir;
            })();

问题解决了。完美运行。