지도상의 MouseClick 이벤트 및 OpenLayers를 사용하여 원 만들기 2

Question

원이 있지만 페이지를로드 할 때 항상 나타납니다. 지도를 클릭하면이 원이 나타나기를 원합니다. 원이 같은 위치에 있고 움직이지 않는 곳에서 붙어 있습니다.지도를 클릭하면 표시됩니다. 아무도 도와 줄 수 있습니까? 또는 당신은 여기

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

Pls는 방문 내가 코드를 pls는 어떤 문제를 만들 프레임 때문에 브라우저에서 실행하려고 갱신했던 바이올린을 확인할 수 있습니다.

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

여기에 귀하의 의견에 따라 업데이트 된 코드를 추가 IAM : -

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>