Question

我有一个简单的openlayer程序，可以在鼠标点击时添加圆圈。但对于新的圈子，它将删除最后一个。我给jsfiddel链接。如果你能提供帮助，请更新它。进一步的代码也在这里。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    <link rel="stylesheet" type="text/css" href="http://openlayers.org/en/v3.16.0/css/ol.css">
    <style type="text/css">
    </style>
    
    <script type='text/javascript'>
    //<![CDATA[
   $(window).load(function() {
       function updateIcon(f) {
          
           vector.drawFeature(f);
       }
 
       options = {
           div: "map",
           zoom: 2,
           center: [0, 0],
           layers: [
               new OpenLayers.Layer.OSM()
           ]
       };
       map = new OpenLayers.Map(options);
       vector = new OpenLayers.Layer.Vector();
       map.addLayer(vector);
 
       var point1 = new OpenLayers.Geometry.Point(0, 0);
       var point2 = new OpenLayers.Geometry.Point(5000000, 1000000);
       var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
       var radius = $("#amount").val();
       var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2, radius, 20, 0);
       var featurecircle = new OpenLayers.Feature.Vector(mycircle);
 
 
       ///vector.addFeatures([featurecircle]);
 

 
       OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
           defaultHandlerOptions: {
               'single': true,
               'double': false,
               'pixelTolerance': 0,
               'stopSingle': false,
               'stopDouble': false
           },
 
           initialize: function(options) {
               this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
               OpenLayers.Control.prototype.initialize.apply(
                   this, arguments
               );
               this.handler = new OpenLayers.Handler.Click(
                   this, {
                       'click': this.trigger
                   }, this.handlerOptions
               );
           },
 
           trigger: function(e) {
               console.log(map)
               console.log(e)
               var lonlat = map.getLonLatFromPixel(e.xy);
               var newPoint = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
               vector.removeFeatures([featurecircle]);
               var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(
                   newPoint,
                   radius,
                   40,
                   0
               );
            
               featurecircle = new OpenLayers.Feature.Vector(mycircle);
               vector.addFeatures([featurecircle]);
           }
 
       });
      
       var click = new OpenLayers.Control.Click();
       map.addControl(click);
       click.activate();
 
   }); //]]>
    </script>
</head>
 
<body>
    <p>
        
        <input type="text" id="amount" value="1000000" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range-max"></div>
    <div id="map" style="width:600px;height:600px;"></div>
</body>
 
</html>

http://jsfiddle.net/zLjae81b/30/

Answer 1

为什么不想在自行移除时删除？

只需删除删除代码（第108行）：

vector.removeFeatures([featurecircle]);

Openlayer2：我可以在图层上添加更多圆圈而不删除最后一个圆圈吗？

1 个答案: