이 무작위 기능을 onclick 함수로 변경하고 싶습니다.

실제로 무작위로 페이지를 원으로 만들고이 onclick 함수를 그리기를 원합니다. 하지만 내가 가진 코드는 무작위로 페이지에 무작위로 배포하는 기능입니다. 어떻게이 코드를 onclick으로 바꿀 수 있습니까?이 무작위 기능을 onclick 함수로 변경하고 싶습니다.

<!DOCTYPE html> 
 
<html lang='en'> 
 
<head> 
 
<html> 
 
<input type="text" name="test" style="width: 130px; height: 30px "value="" id="text" placeholder="Enter length"/> 
 
</html> 
 
    <meta charset='utf-8' /> 
 
    <script type='text/javascript' src='OpenLayers.js'></script> 
 
    <script type='text/javascript'> 
 

 
    var map; 
 
    var vector_layer; 
 
    
 
    function init() { 
 
     //Create a map with an empty array of controls 
 
     map = new OpenLayers.Map('map_element'); 
 

 
     //Create a base layer 
 
     var wms_layer = new OpenLayers.Layer.WMS(
 
      'OpenLayers WMS', 
 
      'http://vmap0.tiles.osgeo.org/wms/vmap0', 
 
      {layers: 'basic'}, 
 
      {} 
 
     ); 
 
     map.addLayer(wms_layer); 
 
     
 
     //Add vector layer 
 
     vector_layer = new OpenLayers.Layer.Vector('Settlement Vector Layer'); 
 
     map.addLayer(vector_layer); 
 

 
     var settlement_values = { 
 
      
 
      4: 'circle' 
 
     } 
 

 
     //Create some points 
 
     for(var i=0; i<20; i++){ 
 
      vector_layer.addFeatures([new OpenLayers.Feature.Vector(
 
       new OpenLayers.Geometry.Point(
 
        (Math.floor(Math.random() * 360) - 180), 
 
\t     (Math.floor(Math.random() * 180) - 90) 
 
\t   ), 
 
\t    { 
 
        'settlement_type': settlement_values[(Math.floor(Math.random() * 15))] 
 
       } 
 
      )]); 
 
     }  
 

 
     //Create a style map object 
 
     var vector_style_map = new OpenLayers.StyleMap({}); 
 
     
 
     //ADD RULES    
 
     //We need to create a 'lookup table' that contains the desired values 
 
     // and corresponding symbolizer 
 

 
     
 
       
 
var x=document.getElementById("text").value; 
 

 
    
 

 

 

 
     var symbolizers_lookup = { 
 
     
 
      'circle': { 
 
       'fillColor': '#336699','fillOpacity':.8, 'pointRadius':x, 'strokeColor': '#003366', 'strokeWidth':2 
 
      } 
 
     } 
 
     
 
     //Now, call addUniqueValueRules and pass in the symbolizer lookups 
 
     vector_style_map.addUniqueValueRules('default', 'settlement_type', symbolizers_lookup); 
 
     
 
     //Add the style map to the vector layer 
 
     vector_layer.styleMap = vector_style_map; 
 
     
 
     if(!map.getCenter()){ 
 
      map.zoomToMaxExtent(); 
 
     } 
 

 
    } 
 

 
    </script> 
 
</head> 
 

 
<body onload='init();'> 
 
    <div id='map_element' style='width: 600px; height: 600px;'></div> 
 
</body> 
 
</html>

출처

2017-02-22 tousif Noor

코드가 전혀 작동하지 않습니다. 테스트를 위해 몇 가지 실제 예제 링크를 제공하고 –

@Anant OpenLayers.js가 거기에없는 것 같습니다. – Shubham

@Shubham 예 Openlayer.js는 라이브러리 파일로 첨부되지 않습니다. 내 자신의 코드를 업로드했습니다. 도울 수 있니 ? –

당신의 body 태그 onclick로 변경 onload.

<body onclick='init();'> <!-- <======== HERE --> 
    <div id='map_element' style='width: 600px; height: 600px;'></div> 
</body> 
</html>

출처

2017-02-22 06:50:41 Uzbekjon

안녕하세요, 감사하지만 Onclick지도를로드합니다. 나는 무작위로 만드는 클릭에 원을 만들고 싶다. –

지금은 20 개의 무작위 서클을 만들고 있습니다. 클릭시 20 개의 임의 서클을 만들길 원하십니까? 또는 클릭시 임의의 1 서클을 원하십니까? – Uzbekjon

원이 하나만 필요합니다. 그리고 센터는 내가지도 위에서 클릭 할 곳이 될 것입니다. 도울 수 있니 ? 제발 –

이 무작위 기능을 onclick 함수로 변경하고 싶습니다.

답변

관련 문제