Question

TLDR ：我有一个Openlayers地图，其中有一个名为'track'的图层我想删除曲目并添加曲目。或者弄清楚如何根据一组coords＆amp绘制一个三角形;标题（见下文）。

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

我设置var 'stylemap'以应用外部图片＆amp;转动。
'imageFeature'会添加到指定坐标的图层中。
'imageFeature'已删除。
'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,
});

现在用timed函数包装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 Feed的变量。

var heading = 13.542;

但到目前为止还没有任何工作，它只会旋转图像onload。不过，图像会以坐标移动。

那么我在重绘功能上做错了什么，或者如何让这张图片实时旋转呢？

提前致谢

-Ozaki

添加：我设法

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

成功重绘第2层。但它仍然不会更新轮换。我在想因为样式图正在更新。但它每隔n秒就会在样式图中运行，但如果我在firebug中放置一个手表，则无法正确更新旋转和标题变量。

如果我画一个带有一系列点的三角形＆amp;线串。我将如何面向标题的三角形。我有一个点的Lon / lat和标题。

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

寻找解决此问题的任何方法Image或Line任何人都知道如何添加 100rep 赏金我真的坚持这个。

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

添加和删除imageFeature

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

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

问题解决了。效果很好。

Answer 2

首先猜测：

我假设您的图层有一个单点对象，可以跟随带GPS的汽车一样移动和旋转？

如果您只是简单地销毁图层上的所有要素（假设它只是一个要素）并使用新的标题集重绘要素，那可能会更好。

第二个猜测：也许您需要使用函数而不是变量来维护与旋转的实时连接。

请查看此处的文档：http://trac.openlayers.org/wiki/Styles样式。

希望这有点帮助。

Answer 3

您还可以尝试将标题作为属性放在对象上：

{"mapFeatures": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "id": "1579001",
                "x": 51.0,
                "y": 1.2,
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        51.0,
                        1.2
                    ],
                    "crs": {
                        "type": "OGC",
                        "properties": {
                            "urn": "urn:ogc:def:crs:OGC:1.3:CRS84"
                        }
                    }
                },
                "properties": {
                    "heading": 45,
                    "label": "some_label_goes_here"
                }
            }
        ]
    }
}

然后你必须像这样重写你的查找函数：

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

你可以尝试一下，看看它是否有效吗？如果您不知道属性是否设置正确，您可以随时使用firebug进行调试，这就是我经常做的事情。有一件棘手的事情;解析geojson时; “属性”在最终的javascript对象上被翻译为“attributes”。

Openlayers - LayerRedraw（）/ Feature rotation / Linestring coords

3 个答案: