javascript - open layers LineString not working - Stack Overflow|江阴雨辰互联

Sorry to bother you guys, but I'm stuck with his problem for half a day.

I want to draw poly line in OpenLayers using LineString object, so I've copied the example from documentation. It runs ok but i can't see the line on the screen

Code looks like this

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    <script type="text/javascript"  src=".js"></script>
    <script src=".js"></script>
    <script src=';amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 

  <script type="text/javascript">    

var map;
var lineLayer ;
var points;
var style;

var polygonFeature
  function test()
  {
    lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 
    style = { strokeColor: '#0000ff', 
                strokeOpacity: 1,
                strokeWidth: 10
    };

    map.addLayer(lineLayer);                    

    points = new Array();
    points[0] =new OpenLayers.LonLat(-2.460181,27.333984 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
    points[1] = new OpenLayers.LonLat(-3.864255,-22.5 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;   
    var linear_ring = new OpenLayers.Geometry.LinearRing(points);
    polygonFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Polygon([linear_ring]), null, style);
    lineLayer.addFeatures([polygonFeature]);
    alert("1");

  }

  function initialize() 
  {    
      map = new OpenLayers.Map ("map_canvas", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0399,
            numZoomLevels: 19,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
          });

        // Define the map layer
        // Here we use a predefined layer that will be kept up to date with URL changes
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        map.addLayer(layerMapnik);
      var lonLat = new OpenLayers.LonLat(0, 0).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        map.zoomTo(3);
        map.setCenter(lonLat, 19);  

    test();
  }

  </script>
    </head>

    <body onload="initialize()" >

    <div id="map_canvas" style="width: 828px; height: 698px"></div>  
  </body>

</html>

I'm sure I'm missing some parameter in creation of map or something but I really can't figure which one.

Sorry to bother you guys, but I'm stuck with his problem for half a day.

I want to draw poly line in OpenLayers using LineString object, so I've copied the example from documentation. It runs ok but i can't see the line on the screen

Code looks like this

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    <script type="text/javascript"  src="http://openlayers/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap/openlayers/OpenStreetMap.js"></script>
    <script src='http://maps.google./maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 

  <script type="text/javascript">    

var map;
var lineLayer ;
var points;
var style;

var polygonFeature
  function test()
  {
    lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 
    style = { strokeColor: '#0000ff', 
                strokeOpacity: 1,
                strokeWidth: 10
    };

    map.addLayer(lineLayer);                    

    points = new Array();
    points[0] =new OpenLayers.LonLat(-2.460181,27.333984 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
    points[1] = new OpenLayers.LonLat(-3.864255,-22.5 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;   
    var linear_ring = new OpenLayers.Geometry.LinearRing(points);
    polygonFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Polygon([linear_ring]), null, style);
    lineLayer.addFeatures([polygonFeature]);
    alert("1");

  }

  function initialize() 
  {    
      map = new OpenLayers.Map ("map_canvas", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0399,
            numZoomLevels: 19,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
          });

        // Define the map layer
        // Here we use a predefined layer that will be kept up to date with URL changes
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        map.addLayer(layerMapnik);
      var lonLat = new OpenLayers.LonLat(0, 0).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        map.zoomTo(3);
        map.setCenter(lonLat, 19);  

    test();
  }

  </script>
    </head>

    <body onload="initialize()" >

    <div id="map_canvas" style="width: 828px; height: 698px"></div>  
  </body>

</html>

I'm sure I'm missing some parameter in creation of map or something but I really can't figure which one.

Share Improve this question edited May 26, 2015 at 15:30 Joel 7,5794 gold badges54 silver badges59 bronze badges asked Feb 17, 2011 at 17:59 AlexS 9274 gold badges17 silver badges30 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You forget 's' character in this line:

lineLayer.addFeatures([lineFeature]);

Function 'addFeature' doesn't exist: OpenLayers.Layer.Vector.addFeatures

To see the feature, hold Shift key on your keyboard and try to draw a box

EDIT: Ok, now I know how did you want.

You need to create one OpenLayers.Point object for each point you have in your DB. One solution is to use and Ajax call to your own PHP function to retrieve them. The PHP file includes code to get them. I remend to return them in JSON format (pherhaps an string). Using JQuery framework:

$.ajax({
   url: 'your_php_file.php',
   dataType: JSON // for example, you can use 'string' type too
   success: function(coordinates){

   }
});

Now you have a lot of coordinates from your DB. It's time to draw your polygon. Following link can be useful

OpenLayers - how do I draw a Polygon from existing lonLat points?

I hope it helps you. Happy codding!

EDIT2:

linear_ring is an object belongs to OpenLayers.Geometry.LinearRing class. The constructor needs an array of OpenLayers.Geometry.Points and you was giving it OpenLayers.LonLat array.

You need to modify this adding this line after each point creation (modifying the index according to you own code):

points[0] = new OpenLayers.Geometry.Point(points[0].lon,points[0].lat);

So your test function looks like this:

function test(){
      lineLayer = new OpenLayers.Layer.Vector("Line Layer");
      style = { strokeColor: '#0000ff',
         strokeOpacity: 1,
         strokeWidth: 10
      };

      points = new Array();

      points[0] =new OpenLayers.LonLat(-2.460181,27.333984 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
      points[0] = new OpenLayers.Geometry.Point(points[0].lon,points[0].lat);

      points[1] = new OpenLayers.LonLat(-3.864255,-22.5 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
      points[1] = new OpenLayers.Geometry.Point(points[1].lon,points[1].lat);

      var linear_ring = new OpenLayers.Geometry.LinearRing(points);
      polygonFeature = new OpenLayers.Feature.Vector(
         new OpenLayers.Geometry.Polygon([linear_ring]), null, style);
         lineLayer.addFeatures([polygonFeature]);

      map.addLayer(lineLayer);

 }

The result is this: Image result

Yes, OpenLayers can programatically draw lines. Its even fast enough to draw new lines multiple times a second so you can show live data or animations. Anyway, you have a lot of stuff going on in your code. Perhaps your style is messed up and drawing invisible lines, or your data points are getting transformed incorrectly and the line is off the map. Anyway, I suggest this simple test.

Create a map, and add a vector layer. hang on to the vector layer in a global var called layerVec. Then, run this code.

var CreateLine = function()
{

  var pList = new Array();
  for(var i=0; i<200; i++)
  {
    var p = new OpenLayers.Geometry.Point();
    p.x = i;
    p.y = i;
    pList.push(p);
  }
  var g = new OpenLayers.Geometry.LineString(pList);
  var f = new OpenLayers.Feature.Vector(g,null,null);
  layerVec.addFeatures(f);
};

Dont worry about coordinates yet, this should be a line in the middle of the map. It may be tiny, or huge depending on your projection, so zoom in.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745420255a4626932.html

javascript - open layers LineString not working - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - open layers LineString not working - Stack Overflow

2 Answers 2

相关推荐