2017-02-22 30 views
0

Я хочу сделать круг на карте с помощью jQuery. В этом заданном коде круги сделаны случайным образом. Но я хочу сделать только один круг нажатием. Openlayer.js можно найти на веб-сайте Openlayer.Я хочу добавить эти круги onClick of mouse на Openlayer map

<!DOCTYPE html> 
 
<html lang='en'> 
 
<head> 
 
    <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() * 5))] 
 
       } 
 
      )]); 
 
     }  
 

 
     //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 symbolizers_lookup = { 
 
      'circle': { 
 
       'fillColor': '#336699','fillOpacity':.8, 'pointRadius':50, '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>

ответ

1

Да Если вы разговариваете в Openlayer2 это поможет вам cheers.further Я приложил код в jsfiddle `

var point1 = new OpenLayers.Geometry.Point(0, 0); 
 
var point2 = new OpenLayers.Geometry.Point(5000000, 1000000); 
 
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000); 
 
var radius = $("#amount").val(); 
 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2, radius, 20, 0); 
 
var featurecircle = new OpenLayers.Feature.Vector(mycircle); 
 

 
marker1 = new OpenLayers.Feature.Vector(point1, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1 
 
}); 
 
marker1.style = { 
 
    display: 'none' 
 
};

http://jsfiddle.net/zLjae81b/18/ `

+0

благодарит вас. –

2

я настоятельно рекомендую вам изучить это: http://openlayers.org/en/latest/examples/draw-features.html

Вот минималистский издание примера:

var draw; // global so we can remove it later 
 
function addInteraction() { 
 
    var value = "circle" 
 
    draw = new ol.interaction.Draw({ 
 
    source: source, 
 
    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value) 
 
    }); 
 
    map.addInteraction(draw); 
 
} 
 

 
addInteraction();

Хотя он не создает формы по jquery, он позволяет рисовать круги на карте.

Надеется, что это помогает, счастливое кодированию :)