Fatal编程技术网
  • javascript/
  • Javascript 如何使不同的矢量层可访问？

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

javascript openlayers

Javascript 如何使不同的矢量层可访问？,javascript,popup,openlayers,markers,Javascript,Popup,Openlayers,Markers,这是我的原始工作代码，仅使用1个矢量层 <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">&

这是我的原始工作代码，仅使用1个矢量层

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


map=新的OpenLayers.map（“mapdiv”）；
addLayer（新的OpenLayers.Layer.OSM（））；
epsg4326=新OpenLayers.Projection（“EPSG:4326”）；
projectTo=map.getProjectionObject（）；
var lonLat=newOpenLayers.lonLat（16.49679,43.52764）.transform（epsg4326，projectTo）；
var=12；
map.setCenter（lonLat，zoom）；
var vectorLayer=新的OpenLayers.Layer.Vector（“覆盖”）；
var feature=new OpenLayers.feature.Vector(
新OpenLayers.几何.点（16.42253，43.50928）.变换（epsg4326，projectTo），
{说明：'Marjan'}，
{externalGraphic:'img/marker.png'，graphicHeight:25，graphicWidth:21，graphicXOffset:-12，graphicYOffset:-25}
);    
矢量图层。添加特征（特征）；
var feature=new OpenLayers.feature.Vector(
新OpenLayers.几何.点（16.5658043.50722）.变换（epsg4326，projectTo），
{说明：'Perun'}，
{externalGraphic:'img/marker.png'，graphicHeight:25，graphicWidth:21，graphicXOffset:-12，graphicYOffset:-25}
);    
矢量图层。添加特征（特征）；
var feature=new OpenLayers.feature.Vector(
新开放层。几何。点（16.40478，43.57865）。转换（epsg4326，projectTo），
{说明：'Kozjak'}，
{externalGraphic:'img/marker.png'，graphicHeight:25，graphicWidth:21，graphicXOffset:-12，graphicYOffset:-25}
);    
矢量图层。添加特征（特征）；
map.addLayer（矢量层）；
//使用弹出功能向矢量层添加选择器控件
变量控制={
选择器：new OpenLayers.Control.SelectFeature（矢量层，{onSelect:createPopup，onSelect:destroyPopup}）
};
函数createPopup（功能）{
feature.popup=新建OpenLayers.popup.FramedCloud（“pop”，
feature.geometry.getBounds（）.getCenterLonLat（），
无效的
“这是一个非常有趣的故事，
无效的
是的，
函数（）{controls['selector'].unselectAll（）；}
);
//feature.popup.closeOnMove=true；
map.addPopup（feature.popup）；
}
功能（特性）{
feature.popup.destroy（）；
feature.popup=null；
}
addControl（控件['selector']）；
控件['selector']。激活（）；

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

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

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


乳浊指数
map=新的OpenLayers.map（“mapdiv”）；
addLayer（新的OpenLayers.Layer.OSM（））；
epsg4326=新OpenLayers.Projection（“EPSG:4326”）//WGS 1984年预测
projectTo=map.getProjectionObject（）//地图投影（球面墨卡托）
var lonLat=newOpenLayers.lonLat（16.49679,43.52764）.transform（epsg4326，projectTo）；
var=12；
map.setCenter（lonLat，zoom）；
var vectorLayer=新的OpenLayers.Layer.Vector（“覆盖”）；
var vectorLayer1=新的OpenLayers.Layer.Vector（“覆盖”）；
//将标记定义为矢量图层的“特征”：
var feature=new OpenLayers.feature.Vector(
新OpenLayers.几何.点（16.42253，43.50928）.变换（epsg4326，projectTo），
{说明：'Marjan'}，
{externalGraphic:'img/marker.png'，graphicHeight:25，graphicWidth:21，graphicXOffset:-12，graphicYOffset:-25}
);    
矢量图层。添加特征（特征）；
var feature=new OpenLayers.feature.Vector(
新OpenLayers.几何.点（16.5658043.50722）.变换（epsg4326，projectTo），
{说明：'Perun'}，
{externalGraphic:'img/marker.png'，graphicHeight:25，graphicWidth:21，graphicXOffset:-12，graphicYOffset:-25}
);    
矢量图层。添加特征（特征）；
var feature1=新的OpenLayers.Feature.Vector(
新开放层。几何。点（16.40478，43.57865）。转换（epsg4326，projectTo），
{说明：'Kozjak'}，
{externalGraphic:'img/marker.png'，graphicHeight:25，graphicWidth:21，graphicXOffset:-12，graphicYOffset:-25}
);    
vectorLayer1.添加功能（功能1）；
map.addLayer（矢量层）；
map.addLayer（vectorLayer1）；
变量控制={
选择器：new OpenLayers.Control.SelectFeature（矢量层，{onSelect:createPopup，onSelect:destroyPopup}）
};
变量控制1={
选择器：new OpenLayers.Control.SelectFeature（vectorLayer1，{onSelect:createPopup，onSelect:destroyPopup}）
};
函数createPopup（功能）{
feature.popup=新建OpenLayers.popup.FramedCloud（“pop”，
feature.geometry.getBounds（）.getCenterLonLat（），
无效的
“这是一个非常有趣的故事，
无效的
是的，
函数（）{controls['selector'].unselectAll（）；}
);
map.addPopup（feature.popup）；
}
函数createPopup（功能1）{
feature1.popup=新建OpenLayers.popup.FramedCloud（“pop”，
功能1.geometry.getBounds（）.getCenterLonLat（），
无效的
“这是一个非常有趣的故事，
无效的
是的，
函数（）{controls1['selector'].unselectAll（）；}
);
map.addPopup（功能1.popup）；
}
功能（特性）{
feature.popup.destroy（）；
feature.popup=null；
}
功能（功能1）{
特性1.popup.destroy（）；
feature1.popup=null；
}
addControl（控件['selector']）；
控件['selector']。激活（）；
addControl（controls1['selector']）；
控件1['selector'].activate（）；
但它不能正常工作。它只显示带有#1 i的元素