首页 文章

如何使用OpenLayer MAP v2从所选多边形获取所有标记的列表

提问于
浏览 次
0

我能够在OpenLayers Map Version 2.x上运行以下功能

  • 将标记放在 Map 上

  • 在 Map 上绘制多边形

  • 在 Map 上选择多边形

现在我的要求是当我选择任何多边形时，我想显示警告框，其中包含所选多边形内的所有标记 .

我使用以下代码：

<html>
    <head>
        <link href="common.css" type="text/css" rel="stylesheet">
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="OpenLayers.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <div style="font-weight: bold">OSM Drawing Layer</div>
        <select id="mapMode" name="mapMode" size="1" onchange="changeMapMode(this.value);">
            <option value="none" selected>Navigation</option>
            <option value="polygon">Draw Polygon</option>
            <option value="line">Draw Line</option>
            <option value="select">Select Features</option>
        </select>
        <div id="highlighted"></div>
        

        <div id="featureTable"></div>
        <script type="text/javascript">
            //https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3

            var lat=23.033863;
            var lon=72.585022;
            var zoom=4;
            var mapOptions = {
                div: "map"
            };

            var map = new OpenLayers.Map('map', mapOptions);
            map.addLayer(new OpenLayers.Layer.OSM());
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var epsg4326 = new OpenLayers.Projection("EPSG:4326");
            var projectTo = map.getProjectionObject();

            if(!map.getCenter()){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(epsg4326, projectTo);
                map.setCenter (lonLat, zoom);
            }

            drawingLayer = new OpenLayers.Layer.Vector("Drawing layer");
            drawingLayer.events.on({
                'featureselected': function(feature) {
                    updateFeatureTable(this.selectedFeatures);
                },
                'featureunselected': function(feature) {
                    updateFeatureTable(this.selectedFeatures);
                }
            });
            map.addLayer(drawingLayer);

            var lonLatSarkhej = new OpenLayers.LonLat(72.5000,22.9833).transform(epsg4326,projectTo);
            var lonLatVadodara = new OpenLayers.LonLat(73.2003,22.3000).transform(epsg4326,projectTo);
            var lonLatBhuj = new OpenLayers.LonLat(69.6700,23.2500).transform(epsg4326,projectTo);
            var lonLatMumbai = new OpenLayers.LonLat(72.8258,18.9750).transform(epsg4326,projectTo);
            var lonLatJaipur = new OpenLayers.LonLat(75.8235,26.9260).transform(epsg4326,projectTo);
            var lonLatDelhi = new OpenLayers.LonLat(77.2300,28.6100).transform(epsg4326,projectTo);

            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);
            var size = new OpenLayers.Size(24,24);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('icon/Marker-Pink.png', size, offset);

            markers.addMarker(new OpenLayers.Marker(lonLatSarkhej,icon)); //Sarkhej
            markers.addMarker(new OpenLayers.Marker(lonLatVadodara,icon.clone())); //Vadodara
            markers.addMarker(new OpenLayers.Marker(lonLatBhuj,icon.clone())); //Bhuj
            markers.addMarker(new OpenLayers.Marker(lonLatMumbai,icon.clone())); //Mumbai
            markers.addMarker(new OpenLayers.Marker(lonLatJaipur,icon.clone())); //Jaipur
            markers.addMarker(new OpenLayers.Marker(lonLatDelhi,icon.clone())); //Delhi

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

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

            var highlightCtrl = new OpenLayers.Control.SelectFeature(drawingLayer, {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                eventListeners: {
                    //beforefeaturehighlighted: report,
                    featurehighlighted: report,
                    featureunhighlighted: unReport
                }
            });
            map.addControl(highlightCtrl);
            highlightCtrl.activate();

            function report(e) {
                //OpenLayers.Console.log(e.type, e.feature.id);
                document.getElementById('highlighted').innerHTML=e.feature.id;
            };
            function unReport(e) {
                //OpenLayers.Console.log(e.type, e.feature.id);
                document.getElementById('highlighted').innerHTML="";
            };

            function changeMapMode(value) {
                for (var key in drawingControls) {
                    var control = drawingControls[key];
                    if (value == key) {
                        control.activate();
                    } else {
                        control.deactivate();
                    }
                }
            }

            function controlFeatureHandler(e) {
                alert(e.feature.geometry.getBounds());
            }

            function updateFeatureTable(featureList) {
                var wkt = new OpenLayers.Format.WKT();
                var table = "<table border='1'>";
                for(var key in featureList) {
                    table += "<tr><td>";
                    table += featureList[key].id;
                    table += "</td><td>";
                    table += wkt.write(featureList[key]);
                    table += "</td></tr>";
                }
                table += "</table>";
                document.getElementById('featureTable').innerHTML=table;
            }
        </script>
    </body>
</html>

任何人都可以知道我如何获得所选多边形内的所有标记？

我找到了一篇使用OpenLayers Version 3 https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3编写的文章 . 但我使用的是2.x版本

任何帮助将受到高度赞赏 .

javascript openlayers polygon marker

1 回答

  • 0

    我已使用下面的代码解决了这个问题 . 发布答案的目的是为了帮助其他正在寻找答案的人 .

    我在创建Polygon时调用controlFeatureHandler函数 .

    function controlFeatureHandler(e) {
  getIntersectsMarkers(e.feature);
}

    当选择特定的Polygon时，也调用controlFeatureHandler函数 .

    function updateFeatureTable(featureList) {
  var wkt = new OpenLayers.Format.WKT();
  var table = "<table border='1'>";
  for(var key in featureList) {
      table += "<tr><td>";
      table += featureList[key].id;
      table += "</td><td>";
      table += wkt.write(featureList[key]);
      table += "</td></tr>";

      getIntersectsMarkers(featureList[key]);
  }
  table += "</table>";
  document.getElementById('featureTable').innerHTML=table + "</br>Markers:" + markersArray;
}

    此函数将返回所选多边形内的标记数（使用纬度/经度） .

    function getIntersectsMarkers(feature) {
  markersArray = [];
  for (var i in markers.markers) {
     var p = new OpenLayers.Geometry.Point(markers.markers[i].lonlat.lon, markers.markers[i].lonlat.lat);
     if (feature.geometry.intersects(p)) {
        markersArray.push(markers.markers[i]);
        var lonlat = new OpenLayers.LonLat(markers.markers[i].lonlat.lon, markers.markers[i].lonlat.lat);
        var _lonlat = lonlat.transform(projectTo, epsg4326);
        console.log('lon:' + _lonlat.lon + ', lat:' + _lonlat.lat);
     }
   } 
}

    如果您遇到任何问题，请填写免费在这里询问 .

    回复于

相关问题