我想在 Openlayer 地图上单击鼠标添加这些圆圈

Question

我想用 jQuery 在地图上画一个圆。在这个给定的代码圈是随机制作的。但我只想在点击时制作一个圆圈。 Openlayer.js 可以在 Openlayer 网站上找到。

<!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),
                 (Math.floor(Math.random() * 180) - 90)
             ),
             {
                    '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>

Answer 1

我强烈建议你学习这个：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 创建形状，但它允许在地图上绘制圆圈。

希望对您有所帮助，编码愉快 :)

Answer 2

是的，如果您在 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/`

我想在 Openlayer 地图上单击鼠标添加这些圆圈

I want add these circles onClick of mouse on Openlayer map

javascript

gis

jquery

openlayers