简体   繁体   中英

I want to change this random function to onclick function

I am actually creating circles on page randomly and I want to draw these onclick function. But Which code I have is random function which randomly distribute on page. So how can I change this code to 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), (Math.floor(Math.random() * 180) - 90) ), { '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> 

Change onload to onclick in your body tag.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM