open layers LineString not working
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.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.开发者_StackOverflow社区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.
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 recommend 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.
加载中,请稍侯......
精彩评论