2017-02-22 1 views
1

Ich erstelle tatsächlich Kreise zufällig auf Seite und ich möchte diese onclick Funktion zeichnen. Aber welcher Code ich habe, ist Zufallsfunktion, die zufällig auf Seite verteilt. Wie kann ich diesen Code in onclick ändern?Ich möchte diese zufällige Funktion zu onclick Funktion ändern

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

+0

Code funktioniert überhaupt nicht. Bitte geben Sie einige Arbeitsbeispiel Link zu testen und zu überprüfen –

+0

@Anant OpenLayers.js ist nicht da, denke ich. – Shubham

+1

@Shubham ja Openlayer.js Ist nicht als eine Bibliotheksdatei angehängt. Ich habe meinen eigenen Code hochgeladen. Kannst du helfen ? –

Antwort

0

ändern onload zu onclick in Ihrem body-Tag.

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

Hallo, danke aber Onclick Es wird Karte laden. Ich möchte Kreise auf Klick machen, die per Zufallsfunktion machen. –

+0

Im Moment erstellt es 20 zufällige Kreise. Sie möchten, dass diese 20 zufälligen Kreise beim Klicken erstellt werden? Oder möchten Sie einen zufälligen Kreis beim Klicken? – Uzbekjon

+2

Ich möchte nur einen Kreis. Und in der Mitte werde ich auf die Karte klicken. Kannst du helfen ? bitte –