Question

我使用OPENLAYERS 3.0在我的页面上绘制了一张地图。

在document.ready（）中，我绘制了地图，并在其上绘制了几个标记一些经度和纬度组合。

我在地图上添加了绘制线，多边形和选择特征。

我的想法是在页面加载时在地图上绘制几个标记，我想要一个绘制一个ploygon或边界框，然后单击我应该选择的那些选项能够在这些选择中绘制标记，是否可以这样做没有循环，任何人请给我一个建议来实现这一目标。

我的HTML和JAVASCRIPT代码如下

var map, layer;
    var drawControls;
    OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
    $('document').ready(function () {

        console.log('in');
        OpenLayers.ProxyHost = "/proxy/?url=";
        map = new OpenLayers.Map('map');
        layer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });

        map.addLayer(layer);
        map.setCenter(new OpenLayers.LonLat(0, 0), 0);

        var newl = new OpenLayers.Layer.Text("text", { location: "./content/textfile.txt" });
        map.addLayer(newl);

        var markers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);

        var size = new OpenLayers.Size(21, 25);
        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
        //markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0, 0), icon));

        var halfIcon = icon.clone();
        //markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0, 45), halfIcon));            
        var Latitudes = '12.98267,13.00118,12.97161,12.97977,12.92828,12.97597';
        var Longitudes = '80.26338,80.2565,80.24343,80.25288,80.23621,80.22121';
        var LatArray = Latitudes.split(',');
        var LonArray = Longitudes.split(',');
        for (var g = 0; g < LatArray.length; g++) {
            marker = new OpenLayers.Marker(new OpenLayers.LonLat(LonArray[g], LatArray[g]), icon.clone());
            //marker.setOpacity(0.2);
            marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
            markers.addMarker(marker);
        }

        //marker = new OpenLayers.Marker(new OpenLayers.LonLat(90, 10), icon.clone());
        //marker.setOpacity(0.2);
        //marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
        //markers.addMarker(marker);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();
        halfIcon.setOpacity(0.5);

        var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
        renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

        var vectors = new OpenLayers.Layer.Vector("Vector Layer",
        {
            renderers: renderer
        });
        vectors.events.on(
        {
            'featureselected': function (feature) {
                $('counter').innerHTML = this.selectedFeatures.length;

                $('myd').innerHTML = 'this.selectedFeatures.length :' + this.selectedFeatures.length + 'this.selectedFeatures[0].geometry.bounds :' + this.selectedFeatures[0].geometry.bounds;


            },
            'featureunselected': function (feature) {
                $('counter').innerHTML = this.selectedFeatures.length;                   
                $('myd').innerHTML = 'UNSEL this.selectedFeatures.length :' + this.selectedFeatures.length + 'this.selectedFeatures[0].geometry.bounds :' + this.selectedFeatures[0].geometry.bounds;

            }
        });

        map.addLayers([layer, vectors]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        drawControls =
        {
            point: new OpenLayers.Control.DrawFeature(
                vectors, OpenLayers.Handler.Point
            ),
            line: new OpenLayers.Control.DrawFeature(
                vectors, OpenLayers.Handler.Path
            ),
            polygon: new OpenLayers.Control.DrawFeature(
                vectors, OpenLayers.Handler.Polygon
            ),
            select: new OpenLayers.Control.SelectFeature(
                vectors,
                {
                    clickout: false, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey", // shift key adds to selection
                    box: true
                }
            ),
            selecthover: new OpenLayers.Control.SelectFeature(
                vectors,
                {
                    multiple: false, hover: true,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
            )
        };

        for (var key in drawControls) {
            map.addControl(drawControls[key]);
        }





    });
   function init()
   {

    }

    function toggleControl(element) 
    {
        for (key in drawControls) {
            var control = drawControls[key];
            if (element.value == key && element.checked) {
                control.activate();
            }
            else {
                control.deactivate();
            }
        }
    }

    function update() 
    {
        var clickout = document.getElementById("clickout").checked;
        if (clickout != drawControls.select.clickout) 
        {
            drawControls.select.clickout = clickout;
        }
        var box = document.getElementById("box").checked;
        if (box != drawControls.select.box) 
        {
            drawControls.select.box = box;
            if (drawControls.select.active) 
            {
                drawControls.select.deactivate();
                drawControls.select.activate();
            }
        }
   }

<div id="content"></div>
<h1 id="title">
    Markers Layer Example</h1>
<div id="tags">
    Marker, event, mousedown, popup, inco</div>
<div id="shortdesc">
    Show markers layer with different markers</div>
<div id="map" class="smallmap">
</div>
<ul id="controlToggle">
    <li>
        <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);"
            checked="checked" />
        <label for="noneToggle">
            navigate</label>
    </li>
    <li>
        <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
        <label for="pointToggle">
            draw point</label>
    </li>
    <li>
        <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
        <label for="lineToggle">
            draw line</label>
    </li>
    <li>
        <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
        <label for="polygonToggle">
            draw polygon</label>
    </li>
    <li>
        <input type="radio" name="type" value="selecthover" id="selecthoverToggle" onclick="toggleControl(this);" />
        <label for="selecthoverToggle">
            Select features on hover</label>
    </li>
    <li>
        <input type="radio" name="type" value="select" id="selectToggle" onclick="toggleControl(this);" />
        <label for="selectToggle">
            select feature (<span id="counter">0</span> features selected)</label>
        <ul>
            <li>
                <input id="box" type="checkbox" checked="checked" name="box" onchange="update()" />
                <label for="box">
                    select features in a box</label>
            </li>
            <li>
                <input id="clickout" type="checkbox" name="clickout" onchange="update()" />
                <label for="clickout">
                    click out to unselect features</label>
            </li>
        </ul>
    </li>
</ul>
<div id="myd">
</div>

Answer 1

这可能会有所帮助。

我在以下位置找到了完整的详细信息：

https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3

您还可以在此处查看现场演示：

http://jsfiddle.net/GFarkas/fk1mqq25/1/

在OpenLayers边界框中获取标记

1 个答案: