Question

我正在尝试为使用openlayers添加到地图中的线叠加添加方向。我已经在我的jsp中创建了map和line overlay，但问题是当在html文件中使用$ {variable}时，我会按预期获得输出并显示正确的方向。但是当在jsp中实现时，所有箭头似乎只指向一个方向。

我认为问题是javascript中没有替换javascript中的$ {variable}。

这是一段代码。

direction.jsp

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Line Direction Arrow in OpenLayers</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css"> 
    #map {
        width: 600px;
        height: 400px;
        border: 1px solid #ccc;
    }
</style> 
<script src="js-libraries/OpenLayers.js" type="text/javascript"></script>
<script src="js-libraries/directions.js" type="text/javascript"></script>
<script type="text/javascript">
    var map = null;
    var myNetwork =null;

    function init(){            

        map = new OpenLayers.Map('map');
        var ol_osm = new OpenLayers.Layer.OSM("Simple OSM Map");
        map.addLayers([ol_osm]);

        //vector layer
        var layer = new OpenLayers.Layer.Vector("Line");
        map.addLayer(layer);

        // add edit panel
        var editPanel = new OpenLayers.Control.EditingToolbar(layer);
        map.addControl(editPanel);

        //add direction layer 
        OpenLayers.Renderer.symbol.arrow = [0,2, 1,0, 2,2, 1,0, 0,2];
        var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
                {graphicName:"arrow",rotation : "${angle}"},
                OpenLayers.Feature.Vector.style["default"]));
        var dirLayer = new OpenLayers.Layer.Vector("direction", {styleMap: styleMap});
        map.addLayer(dirLayer);

        map.setCenter(new OpenLayers.LonLat(-702335,7043201),15);
        //console.log("Starting map");          
    }

    function updateDirection() {
        //alert(map.layers[2].name);
        map.layers[2].removeAllFeatures();
        var points=[];
        var features =map.layers[1].features;
        //alert(features.length);
        for (var i=0;i<features.length ;i++ )   {
            var linePoints = createDirection(features[i].geometry,get_position_value(),get_foreachseg_value()) ;
            //alert(get_foreachseg_value());
        //  for (var j=0;j<linePoints.length ;j++ ) {
        //      linePoints[j].attributes.lineFid = features[i].fid;
        //  }
            points =points.concat(linePoints);
 //             alert(points);
        }
        map.layers[2].addFeatures(points);
    }

    function get_position_value()   {
        for (var i=0; i < document.direction.position.length; i++)
           {
           if (document.direction.position[i].checked)
              {
              return document.direction.position[i].value;
              }
           }
    }
    function get_foreachseg_value() {           
        if (document.direction.foreachseg.checked){
            return true;
        } else {
            return false;
        }
    }

</script>
 </head>


<body onload="init()">
    <table><tr>
<td><div id="map" class="smallmap"></div></td>
<td><div align="left">
<form name="direction">

    <input type="radio" name="position" value="start"/> start <br>
    <input type="radio" name="position" value="end"/> end  <br>
    <input type="radio" name="position" value="middle" CHECKED/>middle <br>
    <input type="checkbox" name="foreachseg" /> Create for each segment of line <br>
    <input type=button value="Update" onClick=updateDirection(); />
</form>
</div></td>
</tr></table>     
</body>
</html>

无论如何在jsp中获得相应的角度？当文件重命名为direction.html时，页面似乎正常工作但是当重命名为direction.jsp时，未正确接收角度值。我需要在我的jsp应用程序中使用它。请帮忙。

谢谢和问候姜。

Answer 1

由于JSP是服务器端而javascript是客户端，所以你不能传递这样的参数，另一种方法是在jsp中添加角度作为隐藏字段

<input type="hidden" value="angle_value_comes_here" id="angle"/>

然后使用

在javascript中访问它

var angle = $('#angle').val();

希望有所帮助

Answer 2

我在这里发布了更新的代码。

    function updateDirection() {
                    flagMarkerStatus = 5;
                    var angles = 0;
        dirLayer.removeAllFeatures();
                    var linePoints=[];
        var points=[];
        var features =lineLayer.features;
                    document.getElementById("angle").value="";
        for (var i=0;i<features.length ;i++ )   {
            var linePoints = createDirection(features[i].geometry,"middle",true);
            points =points.concat(linePoints);
                    angles = document.getElementById("angle").value; 
                    //'angle' div contains angle values seperated by '~'
                    angles=angles.replace(/\[|\]/g, '');
                    angles=angles.split("~");                                

                for(var i=0;i<linePoints.length;i++){

                    var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
                            {graphicName:"arrow",rotation : angles[i],strokeWidth: 3,strokeColor: "#ff0000"},
                            OpenLayers.Feature.Vector.style["default"]));    
                     dirLayer.styleMap = styleMap;                       
                    dirLayer.addFeatures(linePoints[i]);                    

                } 

        }  



    }

javascript中的$ {variable}未在jsp中替换

2 个答案: