5

TLDR：我有一个 Openlayers 地图，其中有一个名为“track”的图层，我想删除轨道并重新添加轨道。或者弄清楚如何根据一组坐标和一个标题绘制一个三角形（见下文）。

我在加载时旋转到设置方向的图层上有一个图像“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
});

风格地图：

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（）'函数：但它返回“跟踪未定义”或“map.layers [2]”未定义。

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

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

var heading = 13.542;

但到目前为止，什么都做不了，它只会在加载时旋转图像。图像将按照应有的方式在坐标中移动。

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

提前致谢

-尾崎

补充：我设法得到

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

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

如果我要绘制一个带有点数组和线串的三角形。我将如何将三角形朝向标题。我有一点的 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

4

3 回答 3

3

解决问题如下： 

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

问题解决了。完美运行。

于 2010-05-26T02:16:50.927 回答
2

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

{"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 对象的“属性”。

于 2010-05-21T12:06:29.387 回答
1

第一个猜测：

我假设您的图层有一个单点对象，它像使用 GPS 跟随汽车一样移动和旋转？

如果您简单地破坏图层上的所有特征（假设它只有一个特征）并使用新的标题集重新绘制该特征，可能会更好。

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

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

希望这个对你有帮助。

于 2010-05-18T14:49:15.393 回答