如何使不同的矢量图层可访问？

Question

这是我仅使用 1 个 VectorLayer 的原始工作代码。

    <html>
  <head>
        <link rel="stylesheet" type="text/css" href="slova.css">
        <link rel="stylesheet" type="text/css" href="blink.css"></head>
   <body>
   <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
     map = new OpenLayers.Map("mapdiv");
     map.addLayer(new OpenLayers.Layer.OSM());

    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); 
    projectTo = map.getProjectionObject(); 

    var lonLat = new OpenLayers.LonLat( 16.49679 ,43.52764 ).transform(epsg4326, projectTo);


    var zoom=12;
    map.setCenter (lonLat, zoom);

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 16.42253, 43.50928 ).transform(epsg4326, projectTo),
            {description:'Marjan'} ,
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 16.56580, 43.50722 ).transform(epsg4326, projectTo),
            {description:'Perun'} ,
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 16.40478, 43.57865  ).transform(epsg4326, projectTo),
            {description:'Kozjak'},
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);


    map.addLayer(vectorLayer);


    //Add a selector control to the vectorLayer with popup functions
    var controls = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };

    function createPopup(feature) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="slika"><h6>INDEKS RIZIKA POŽARA RASLINJA</h6><div class="container"><div class="panel rizik1 "><h1>VRLO MALA</h1></div><div class="panel rizik2"><h2>MALA</h2></div><div class="panel rizik3"><h3>UMJERENA</h3></div><div class="panel rizik4 blink_me"><h4>VELIKA</h4></div><div class="panel rizik5"><h5>VRLO VELIKA</h5></div></div></div>',
          null,
          true,
          function() { controls['selector'].unselectAll(); }
      );
      //feature.popup.closeOnMove = true;
      map.addPopup(feature.popup);
    }

    function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }

    map.addControl(controls['selector']);
    controls['selector'].activate();

  </script>

</body></html>

as seen here.

我试图通过添加新图层和标记来更改其中一个标记的弹出内容。新代码如下所示：

    <html>
  <head><title>Indeks opasnosti</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="slova.css">
        <link rel="stylesheet" type="text/css" href="blink.css"></head>
  <body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

    var lonLat = new OpenLayers.LonLat( 16.49679 ,43.52764 ).transform(epsg4326, projectTo);


    var zoom=12;
    map.setCenter (lonLat, zoom);

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    var vectorLayer1 = new OpenLayers.Layer.Vector("Overlay");

    // Define markers as "features" of the vector layer:
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 16.42253, 43.50928 ).transform(epsg4326, projectTo),
            {description:'Marjan'} ,
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 16.56580, 43.50722 ).transform(epsg4326, projectTo),
            {description:'Perun'} ,
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    var feature1 = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 16.40478, 43.57865  ).transform(epsg4326, projectTo),
            {description:'Kozjak'},
            {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer1.addFeatures(feature1);


    map.addLayer(vectorLayer);
    map.addLayer(vectorLayer1);
    var controls = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };
    var controls1 = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer1, { onSelect: createPopup, onUnselect: destroyPopup })
    };
    function createPopup(feature) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="slika"><h6>INDEKS RIZIKA POŽARA RASLINJA</h6><div class="container"><div class="panel rizik1 "><h1>VRLO MALA</h1></div><div class="panel rizik2"><h2>MALA</h2></div><div class="panel rizik3"><h3>UMJERENA</h3></div><div class="panel rizik4 blink_me"><h4>VELIKA</h4></div><div class="panel rizik5"><h5>VRLO VELIKA</h5></div></div></div>',
          null,
          true,
          function() { controls['selector'].unselectAll(); }
      );

      map.addPopup(feature.popup);
    }
    function createPopup(feature1) {
      feature1.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature1.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="slika"><h6>INDEKS RIZIKA POŽARA RASLINJA</h6><div class="container"><div class="panel rizik1 "><h1>VRLO MALA</h1></div><div class="panel rizik2 blink_me"><h2>MALA</h2></div><div class="panel rizik3"><h3>UMJERENA</h3></div><div class="panel rizik4 blink_me"><h4>VELIKA</h4></div><div class="panel rizik5"><h5>VRLO VELIKA</h5></div></div></div>',
          null,
          true,
          function() { controls1['selector'].unselectAll(); }
      );

      map.addPopup(feature1.popup);
    }
    function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }
    function destroyPopup(feature1) {
      feature1.popup.destroy();
      feature1.popup = null;
    }
    map.addControl(controls['selector']);
    controls['selector'].activate();
    map.addControl(controls1['selector']);
    controls1['selector'].activate(); 
  </script>

</body></html>

但是as you can see here它不起作用properly.It只显示带有#1的元素index.What我可以同时显示特征和特征1吗？

Answer 1

首先，如果你两次定义一个同名的函数，你只是覆盖了第一个声明。 createPopup 和 detroyPopup 就是这种情况。

无论如何，OpenLayers.Control.SelectFeature 控件接受一个或多个矢量图层作为第一个参数。因此，您可以对两个图层使用一个控件，如下所示： new OpenLayers.Control.SelectFeature([vectorLayer, vectorLayer1], { onSelect: createPopup, onUnselect: destroyPopup })

但是，我不认为使用一层以上是满足您需求的正确解决方案（如果我理解正确的话！）。

我认为您应该将所有特征添加到一个层中，使用属性来标识它们（"description" 可以）。

您可以为每个功能创建具有不同 html 的弹出窗口，如下所示：

<code><pre>

function createPopup(feature) {
  var html;
  if(feature.attributes.description == 'Marjan') {
      html = '<div class="slika"><h6>....</div>';
  } else if(feature.attributes.description == 'Kozjak') {
      html = '<div class="slika"><h6>....</div>';
  }
  feature.popup = new OpenLayers.Popup.FramedCloud("pop",
      feature.geometry.getBounds().getCenterLonLat(),
      null,
      html,
      null,
      true,
      function() { controls['selector'].unselectAll(); }
  );
  map.addPopup(feature.popup);
}

</pre></code>

如何使不同的矢量图层可访问？

how to make different vectorlayers accessible?

javascript

popup

markers

openlayers