javascript - open layers LineString not working -
sorry bother guys, i'm stuck problem half day.
i want draw poly line in openlayers using linestring object, i've copied example documentation. runs ok can't see line on screen
code looks this
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title></title> <script type="text/javascript" src="http://openlayers.org/api/openlayers.js"></script> <script src="http://www.openstreetmap.org/openlayers/openstreetmap.js"></script> <script src='http://maps.google.com/maps?file=api&v=2&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 map layer // here use predefined layer kept date 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 parameter in creation of map or can't figure one.
you forget 's' character in line:
linelayer.addfeatures([linefeature]); function 'addfeature' doesn't exist: openlayers.layer.vector.addfeatures
to see feature, hold shift key on keyboard , try draw box
edit: ok, know how did want.
you need create 1 openlayers.point object each point have in db. 1 solution use , ajax call own php function retrieve them. php file includes code them. recommend return them in json format (pherhaps string). using jquery framework:
$.ajax({ url: 'your_php_file.php', datatype: json // example, can use 'string' type success: function(coordinates){ } }); now have lot of coordinates db. it's time draw polygon. following link can useful
openlayers - how draw polygon existing lonlat points?
i hope helps you. happy codding!
edit2:
linear_ring object belongs openlayers.geometry.linearring class. constructor needs array of openlayers.geometry.points , giving openlayers.lonlat array.
you need modify adding line after each point creation (modifying index according own code):
points[0] = new openlayers.geometry.point(points[0].lon,points[0].lat); so test function looks 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 this: image result
Comments
Post a Comment