代码之家  ›  专栏  ›  技术社区  ›  Sphvn Frebin Francis

openlayers-layerRedraw()/功能旋转/linestring坐标

  •  4
  • Sphvn Frebin Francis  · 技术社区  · 14 年前

    TLDR :我有一个Openlayers映射,它有一个名为“track”的层,我想删除跟踪并重新添加跟踪。或者了解如何根据一组坐标和一个标题绘制三角形(见下文)。


    我有一个形象 “图像特征” 在加载时旋转到设置方向的图层上。我希望它更新在 “样式表” 在一个称为 “追踪” .

    1. 我设置var “样式表” 应用外部图像和旋转。
    2. 这个 “图像特征” 添加到指定坐标处的图层。
    3. “图像特征” 被移除。
    4. “图像特征” 重新添加到新位置。未应用旋转。

    作为 “样式表” 应用于我认为必须删除层并再次添加它的层,而不仅仅是 “图像特征”

    :

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

    现在用一个定时函数包装图像功能 :

    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;
    

    但到目前为止还不能使任何东西工作,它只会将图像旋转到加载状态。图像将以其应有的坐标移动。

    那么,我对redraw函数做了什么错误呢,或者我如何才能让这个图像实时旋转呢?

    提前谢谢

    小崎

    添加: 我设法得到

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

    成功地重新绘制第2层。但它仍然不更新旋转。我想是因为样式图正在更新。但是它每N秒运行一次样式图,但是没有对旋转的更新,并且如果我在Firebug中对其进行监视,那么标题的变量正在正确更新。


    如果我要用点数组和线串绘制三角形。 我该如何面对朝向标题的三角形呢? 我有一点的经度和航向。

                  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;
    

    添加和删除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});
    
    3 回复  |  直到 14 年前
        1
  •  3
  •   Sphvn Frebin Francis    14 年前

    解决问题如下:

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

    问题解决了。工作得很好。

        2
  •  1
  •   milovanderlinden    14 年前

    第一猜测:

    我假设你的图层有一个单点物体,当跟随一辆装有GPS的汽车时,它会移动和旋转?

    如果只销毁层上的所有功能(假设它只是一个功能),并用新的标题集重新绘制功能,可能会更好。

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

    请检查以下文档: http://trac.openlayers.org/wiki/Styles 风格上。

    希望这有点帮助。

        3
  •  1
  •   milovanderlinden    14 年前

    您还可以尝试将对象的标题作为属性:

    {"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对象上被转换为“属性”。