javascript - map 上的 MouseClick 事件并使用 OpenLayers 2 使圆圈出现

Question

我有一个圆圈，但当我加载页面时它总是出现。我希望当我单击 map 时出现这个圆圈。它卡在圆圈保留在同一位置并且不移动的位置。我希望当我们单击 map 时出现这个圆圈有人可以帮忙吗？或者您可以访问这里

http://jsfiddle.net/zLjae81b/18/

function updateIcon(f) {
    f.style.externalGraphic = "marker.png";
    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(1000000, 1000000);
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
var radius = $( "#amount" ).val();
 var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0);
     var featurecircle = new OpenLayers.Feature.Vector(mycircle);
     


// var selected_polygon_style = {
//     strokeWidth: 5,
//     strokeColor: '#ff0000'
//     // add more styling key/value pairs as your need
// };

// featurecircle.style = selected_polygon_style;

marker1 = new OpenLayers.Feature.Vector(point1, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
marker1.style = { display: 'none' };

marker2 = new OpenLayers.Feature.Vector(point2, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});

marker3 = new OpenLayers.Feature.Vector(point3, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
vector.addFeatures([marker1, marker2, marker3, featurecircle]);



$( "#slider-range-max" ).slider({
      range: "max",
      min: 1000000,
      max: 3000000,
      value: 1000000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
         radius =  $( "#amount" ).val();

     vector.removeFeatures([featurecircle]);

var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
    point2,
    radius,
    40,
    0
);




featurecircle = new OpenLayers.Feature.Vector(mycircle);
vector.addFeatures([featurecircle]);

         console.log(radius);

      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$( radius ).val( $( "#slider-range-max" ).slider( "value" ) );

<p>
  <label for="amount">Minimum number</label>
  <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> 

Answer 1

请检查我已更新您的代码的 fiddle ，请尝试在浏览器中运行，因为框架会产生一些问题。

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

这里我根据您的评论添加更新的代码:-

function initializeMap() {
    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);
    return map
}

function addClickEventHandlertoMap(map) {
    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) {
            var lonlat = map.getLonLatFromPixel(e.xy);
            point = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
            var radius = $("#amount").val();
            updateFeatureCircle(point, radius);
        }

    });

    var click = new OpenLayers.Control.Click();
    map.addControl(click);
    click.activate();
}

function initializeSlider() {
    $("#slider-range-max").slider({
        range: "max",
        min: 1000000,
        max: 3000000,
        value: 1000000,
        slide: function(event, ui) {
            $("#amount").val(ui.value);
            if (typeof point == "undefined") {
                point = new OpenLayers.Geometry.Point(0, 0);
            }
            var radius = $("#amount").val();
            updateFeatureCircle(point, radius);
        }
    });
}

function updateFeatureCircle(point, radius) {
    if (typeof featurecircle != "undefined") {
        vector.removeFeatures([featurecircle]);
    }
    var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
        point,
        radius,
        40,
        0
    );


    featurecircle = new OpenLayers.Feature.Vector(circle);
    vector.addFeatures([featurecircle]);
}
$(window).load(function() {
    var map = initializeMap();
    initializeSlider();
    addClickEventHandlertoMap(map);
});

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


<p>
  <label for="amount">Minimum number</label>
  <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>