打开图层 LineString 不起作用

发布于 2024-10-18 04:53:21 字数 2918 浏览 1 评论 0原文

很抱歉打扰你们，但我被他的问题困扰了半天。

我想使用 LineString 对象在 OpenLayers 中绘制折线，因此我从文档中复制了示例。它运行正常，但我看不到屏幕上的线代码

看起来像这样

      <!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&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>

我确信我在创建地图或其他东西时缺少一些参数，但我真的不知道是哪一个。

原文

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.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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￠蛋碎的人ぎ生 2024-10-25 04:53:21

您忘记了这一行中的 's' 字符：

lineLayer.addFeatures([lineFeature]);

函数 'addFeature' 不存在： OpenLayers.Layer.Vector.addFeatures

要查看该功能，请按住键盘上的 Shift 键并尝试绘制一个框

< strong>编辑：好的，现在我知道你想要什么。

您需要为数据库中的每个点创建一个 OpenLayers.Point 对象。一种解决方案是使用 Ajax 调用您自己的 PHP 函数来检索它们。 PHP 文件包含获取它们的代码。我建议以 JSON 格式返回它们（也许是一个字符串）。使用 JQuery 框架：

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

   }
});

现在您从数据库中获得了很多坐标。是时候绘制多边形了。以下链接可能很有用

OpenLayers - 我该如何从现有的 lonLat 点绘制多边形？

我希望它对您有帮助。快乐编码！

EDIT2：

Linear_ring 是属于 OpenLayers.Geometry.LinearRing 类的对象。构造函数需要一个 OpenLayers.Geometry.Points 数组，而您给它的是 OpenLayers.LonLat 数组。

您需要修改此内容，在每个点创建后添加此行（根据您自己的代码修改索引）：

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

所以您的测试函数如下所示：

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);

 }

结果是这样的：图像结果

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

回复收藏 0 原文

人间不值得 2024-10-25 04:53:21

是的，OpenLayers 可以通过编程方式绘制线条。它的速度甚至足以每秒多次绘制新线，以便您可以显示实时数据或动画。不管怎样，你的代码中有很多东西。也许您的样式混乱并且绘制了看不见的线条，或者您的数据点转换不正确并且线条不在地图上。无论如何，我建议这个简单的测试。

创建地图，并添加矢量图层。挂在名为 LayerVec 的全局变量中的向量层。然后，运行此代码。

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);
};

暂时不用担心坐标，这应该是地图中间的一条线。它可能很小，也可能很大，具体取决于您的投影，因此请放大。

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.

回复收藏 0 原文

~没有更多了~