我想将此随机函数更改为onclick函数

时间:2017-02-22 06:46:42

标签: javascript jquery html openlayers

我实际上是在页面上随机创建圆圈,我想绘制这些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),
	                (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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

onload标记中的onclick更改为body

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