Openlayers旋转道路名称

时间:2016-04-20 09:27:50

标签: openlayers geoserver

在GeoServer上,我得到一个图层组作为基础图层来显示地图。 base_osm

一个图层包含道路名称。我使用Openlayers。 map

现在我想将道路名称旋转180度。 我试图找到一些解决方案,但什么也得不到(也许是以错误的方式)...... 你能给我一些建议或解决方案吗? 我的英语不好,希望你得到我想表达的意思。 的由于!!!

<script type="text/javascript">
var map;
function init() {
    var proj = new OpenLayers.Projection("EPSG:4326");

    var bounds = new OpenLayers.Bounds(103.598434448242, 1.24977505207062,
            103.993843078613, 1.48103499412537);
    var options = {
        controls : [ new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoom(),
                new OpenLayers.Control.ArgParser(),
                new OpenLayers.Control.Attribution(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.LayerSwitcher({displayProjection : new OpenLayers.Projection("EPSG:4326")}),],
        maxExtent : bounds,
        projection : proj,
        displayProjection : proj,
        units : 'degrees'
    };

    map = new OpenLayers.Map('ol-map', options);

    var tiled = new OpenLayers.Layer.WMS("test_osm",
            "http://localhost:8088/geoserver/osm/wms"
            , {
                LAYERS : 'osm:base_osm',
                STYLES : '',
                format : 'image/png',
                tiled : true,
            }, {
                buffer : 0,
                displayOutsideMaxExtent : true,
                isBaseLayer : true,

            });
    map.addLayer(tiled);

    var tiled2 = new OpenLayers.Layer.WMS("test_osm2",
            "http://localhost:8088/geoserver/osm/wms"
            , {
                LAYERS : "osm:highway-label",
                transparent: true,
                STYLES : '',
                format : "image/svg+xml",
                tiled : true,
                transparent : true,
            }, {
                buffer : 0,
                displayOutsideMaxExtent : true,
                isBaseLayer : false,
            }); 
    map.addLayer(tiled2); 
    map.zoomToMaxExtent();
}

以上是我得到地图的代码,我不知道下一步......

2 个答案:

答案 0 :(得分:0)

我还尝试为设置文本样式找到accordingLineString之类的方法。只有我找到了,计算你的街道rotation并设置文字样式:

text: new ol.style.Text({ rotation: 0.3 //your styles })

look this question

答案 1 :(得分:0)

您的标签是在服务器端呈现的,因此客户端(使用OpenLayers)无法改变标签的呈现方式。

您应该编辑osm:highway-label图层使用的样式(SLD)。

你可以在这里找到好的例子 http://docs.geoserver.org/latest/en/user/styling/sld-cookbook/lines.html

但我认为你正在寻找标签旋转配置,这里解释 http://docs.geoserver.org/latest/en/user/styling/sld-reference/labeling.html#rotation