多邊形在TMS中繪製後消失分層開放圖地圖

Question

我對Openlayers非常陌生，我嘗試使用gdal2tiles生成的平鋪圖像的TMS圖層。基本的東西，如平移/縮放工作正常，現在我試圖添加editingToolbar並在地圖上繪製一些多邊形。只要我繪製多邊形或將點放在地圖上，多邊形/點就會消失。我錯過了什麼？我該如何調試？

這是我的代碼（我正在gdal2tiles生成的html上嘗試它）。

<script type="text/javascript"> 

      var map; 

      var mapBounds = new OpenLayers.Bounds(0.0, -612.0, 857.0, 0.0); 
      var mapMinZoom = 0; 
      var mapMaxZoom = 2; 

      // avoid pink tiles 
      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; 
      OpenLayers.Util.onImageLoadErrorColor = "transparent"; 

      function init(){ 
      var options = { 
       controls: [], 
       maxExtent: new OpenLayers.Bounds( 0.0, -612.0, 857.0, 0.0), 
       maxResolution: 4.000000, 
       numZoomLevels: 3 
       }; 
      map = new OpenLayers.Map('map', options); 

      var layer = new OpenLayers.Layer.TMS("TMS Layer","", 
       { url: '', serviceVersion: '.', layername: '.', alpha: true, 
        type: 'png', getURL: overlay_getTileURL 
       }); 
      map.addLayer(layer); 
      map.zoomToExtent(mapBounds); 

      map.addControl(new OpenLayers.Control.PanZoomBar()); 
      map.addControl(new OpenLayers.Control.MousePosition()); 
      map.addControl(new OpenLayers.Control.MouseDefaults()); 
      map.addControl(new OpenLayers.Control.KeyboardDefaults()); 

     var vlayer = new OpenLayers.Layer.Vector("Editable"); 

     map.addControl(new OpenLayers.Control.EditingToolbar(vlayer)); 

     } 

     function overlay_getTileURL(bounds) { 
      var res = this.map.getResolution(); 
      var x = Math.round((bounds.left - this.maxExtent.left)/(res * this.tileSize.w)); 
      var y = Math.round((bounds.bottom - this.maxExtent.bottom)/(res * this.tileSize.h)); 
      var z = this.map.getZoom(); 
      if (x >= 0 && y >= 0) { 
       return this.url + z + "/" + x + "/" + y + "." + this.type;    
      } else { 
       return "http://www.maptiler.org/img/none.png"; 
      } 
     } 


     </script> 

Answer 1

您還必須在地圖上添加矢量圖層。

var vlayer = new OpenLayers.Layer.Vector("Editable"); 
map.addLayer(vlayer); // HERE 
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));