Openlayers - LayerRedraw() / 特征旋轉 / 線串坐標

Question

TLDR ：我有一個 Openlayers 地圖，其中有一個名為“軌道”的圖層，我想刪除軌道並重新添加軌道。或者弄清楚如何根據一組坐標和標題繪制三角形（見下文）。

---

我在一個圖層上有一個圖像“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 秒運行一次樣式映射，但是如果我在螢火蟲中放置手表，則不會更新旋轉，並且標題的變量正在正確更新。

---

如果我要繪制一個帶有點和線串數組的三角形。 我將如何面對三角形朝向標題。 我有一點的經緯度和航向。

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

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

您還可以嘗試將標題作為屬性放在對象上：

{"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 對象上，“屬性”被翻譯成“屬性”。

Answer 3

第一個猜測：

我假設您的圖層有一個單點對象，可以像跟隨帶有 GPS 的汽車一樣移動和旋轉？

如果您簡單地銷毀圖層上的所有要素（假設它只有一個要素）並使用新的標題集重繪該要素，則可能會更好。

第二個猜測：也許您需要使用函數而不是變量來維護與旋轉的實時連接。

請在此處查看文檔： http : //trac.openlayers.org/wiki/Styles關於樣式。

希望這個對你有幫助。