堆棧內存溢出
  簡體   English   中英

如何使不同的向量層可訪問？

[英]how to make different vectorlayers accessible?

 原文  2016-03-11 16:15:34  4   1    javascript/ popup/ openlayers/ markers

問題描述

這是我僅使用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>

如這里所見 。

我試圖通過添加新的圖層和標記來更改這些標記之一的彈出內容。 新代碼如下所示： 

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

但是正如您在這里看到的那樣，它無法正常工作。它僅顯示索引為＃1的元素。我該怎么做才能同時顯示feature和feature1？

1 個解決方案

解決方案1
 0 已采納  2016-03-14 09:27:39

首先，如果兩次定義相同名稱的函數，則只需覆蓋第一個聲明。 createPopup和detroyPopup就是這種情況。

無論如何，OpenLayers.Control.SelectFeature控件接受一個或多個矢量層作為第一個參數。 因此，您可以在兩個圖層上使用單個控件，例如： new OpenLayers.Control.SelectFeature([vectorLayer, vectorLayer1], { onSelect: createPopup, onUnselect: destroyPopup })

但是，我認為使用多層以上不是滿足您需求的正確解決方案（如果我理解正確的話！）。

我認為您應該將所有功能添加到單個圖層，並使用屬性來識別它們（“描述”就可以）。

然后，您可以為每個功能使用不同的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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使數組在Javascript中的不同功能下可訪問？ 如何在此代碼中訪問名稱 如何制作一個全局可訪問的變量？ 如何使這個 javascript 應用程序可訪問？ 如何檢測使用JavaScript在不同域上是否可訪問文件？ 如何使文件只能由JQuery .load訪問 如何使CKEditor刪除線功能可訪問？ 如何毫不客氣地使用jQuery使可訪問彈出窗口？ 在這種情況下如何使變量全局可訪問？ 如何使谷歌地圖中的重疊 POI 可訪問
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM