Openlayers 从数据库中获取坐标点动态生成线

Openlayers 从数据库中获取坐标点动态生成线的步骤如下:

 

// 1、新建矢量图层

    linelayer = new OpenLayers.Layer.Vector(“线图层”);    
                                     
//2、获取坐标 
    strtemp = “<%=getGeom()%>”;

     if(strtemp!=””)
     {
          var arrtemp = strtemp.split(‘|’);
           

           //3、将坐标字符串分解为坐标数组
            var row = arrtemp.length – 1;

             

             for(var i = 0; i < row; i++)
             {
                                    var point = arrtemp[i];

                                    var arr = convertPoint2LonLat(point);
                                  
                                    pointList.push(new OpenLayers.Geometry.Point(arr[0], arr[1]));       
                                  
               }
      }
                                  
      var linestring = new OpenLayers.Geometry.LineString(pointList); //坐标数组
                          

      //4、自定义线的风格
      var style_line = {
                                    strokeColor: “red”,
                                    strokeOpacity: 0.8,
                                    strokeWidth: 2,
                                    pointRadius: 20,
                                    label:””,
                                    fontSize:’12px’,
                                    fontFamily:’宋体’,
                                    labelXOffset:30,
                                    labelYOffset:10,
                                    labelAlign:’rm’
                            };
                            
       var lineFeature = new OpenLayers.Feature.Vector(linestring,null,style_line);               
                           

       //5、生成线图层                                          
       linelayer.addFeatures([lineFeature]);
                           
       // 6、加入图层到地图          
       map.addLayerlinelayer);

 

 

 function convertPoint2LonLat(origStr) {
                    var pointStr =origStr.replace(/POINT/(/,”); 
                    pointStr = pointStr.replace(//)/, ”);
                    return  pointStr.split(‘ ‘);
                   } 

转载自:https://blog.csdn.net/liumqj/article/details/6550157

You may also like...