Fatal编程技术网
  • javascript/
  • Javascript 如何使用OpenLayer MAP v2从选定多边形获取所有标记的列表

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

javascript openlayers

Javascript 如何使用OpenLayer MAP v2从选定多边形获取所有标记的列表,javascript,openlayers,polygon,marker,Javascript,Openlayers,Polygon,Marker,我能够在OpenLayers Map 2.x版上运行以下功能 在地图上做标记 在地图上画多边形 选择地图上的多边形 现在我的要求是，当我选择任何多边形时，我希望显示警报框，其中包含选定多边形内的所有标记 我正在使用以下代码： <html> <head> <link href="common.css" type="text/css" rel="stylesheet"> <link rel="stylesheet"

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

  • 在地图上做标记
  • 在地图上画多边形
  • 选择地图上的多边形
现在我的要求是，当我选择任何多边形时，我希望显示警报框，其中包含选定多边形内的所有标记

我正在使用以下代码：

<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>
        <br />
        <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>


OSM绘图层
航行
绘制多边形
划线
选择特征


//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 map=new OpenLayers.map（'map'，mapOptions）；
addLayer（新的OpenLayers.Layer.OSM（））；
addControl（新的OpenLayers.Control.LayerSwitcher（））；
var epsg4326=新的OpenLayers.Projection（“EPSG:4326”）；
var projectTo=map.getProjectionObject（）；
如果（！map.getCenter（））{
var lonLat=newopenlayers.lonLat（lon，lat）.transform（epsg4326，projectTo）；
map.setCenter（lonLat，zoom）；
}
drawingLayer=新的OpenLayers.Layer.Vector（“绘图层”）；
drawingLayer.events.on({
“功能选定”：功能（功能）{
updateFeatureTable（此.selectedFeatures）；
},
“功能未选择”：功能（功能）{
updateFeatureTable（此.selectedFeatures）；
}
});
map.addLayer（drawingLayer）；
var lonLatSarkhej=新OpenLayers.LonLat（72.5000,22.9833）.transform（epsg4326，projectTo）；
var lonLatVadodara=新OpenLayers.LonLat（73.2003,22.3000）.transform（epsg4326，projectTo）；
var lonLatBhuj=新OpenLayers.LonLat（69.6700,23.2500）.transform（epsg4326，projectTo）；
var LonLat孟买=新OpenLayers.LonLat（72.8258,18.9750）.transform（epsg4326，projectTo）；
var lonLatJaipur=新OpenLayers.LonLat（75.8235,26.9260）.transform（epsg4326，projectTo）；
var LonLat德里=新OpenLayers.LonLat（77.2300,28.6100）.transform（epsg4326，projectTo）；
var markers=新的OpenLayers.Layer.markers（“markers”）；
添加图层（标记）；
var size=新的OpenLayers.size（24,24）；
var偏移=新的OpenLayers.Pixel（-（大小为w/2），-size.h）；
var icon=new OpenLayers.icon（'icon/Marker Pink.png'，大小，偏移量）；
markers.addMarker（新的OpenLayers.Marker（lonLatSarkhej，icon））//萨尔凯吉
markers.addMarker（新的OpenLayers.Marker（lonLatVadodara，icon.clone（））//瓦多达拉
markers.addMarker（新的OpenLayers.Marker（lonLatBhuj，icon.clone（））//布吉
markers.addMarker（新的OpenLayers.Marker（lonlat，icon.clone（））//孟买
markers.addMarker（新的OpenLayers.Marker（lonLatJaipur，icon.clone（））//斋浦尔
markers.addMarker（新的OpenLayers.Marker（lonlat德里，icon.clone（））//德里
绘图控件={
多边形：新的OpenLayers.Control.DrawFeature（drawingLayer，OpenLayers.Handler.polygon{
eventListeners：{
“featureadded”：controlFeatureHandler
}
}),
行：新建OpenLayers.Control.DrawFeature（drawingLayer，OpenLayers.Handler.Path），
选择：新建OpenLayers.Control.SelectFeature(
拉丝机，
{
点击：错误，
切换：false，
多重：假，
悬停：错，
toggleKey：“ctrlKey”//ctrl键从选择中删除
multipleKey:“shiftKey”//shift key添加到选择中
框：对
}
)
};
for（绘图控件中的var键）{
map.addControl（drawingControls[key]）；
}
var highlightCtrl=新建OpenLayers.Control.SelectFeature（drawingLayer{
哈弗：没错，
highlightOnly:没错，
renderIntent:“临时”，
eventListeners：{
//在突出显示功能之前：报告，
特色突出：报告，
功能未高亮显示：取消报告
}
});
map.addControl（highlightCtrl）；
highlightCtrl.activate（）；
功能报告（e）{
//OpenLayers.Console.log（e.type，e.feature.id）；
document.getElementById（'highlighted'）.innerHTML=e.feature.id；
};
功能取消报告（e）{
//OpenLayers.Console.log（e.type，e.feature.id）；
document.getElementById（'突出显示'）.innerHTML=“”；
};
函数changeMapMode（值）{
for（绘图控件中的var键）{
var控制=绘图控制[键]；
如果（值==键）{
控件。激活（）；
}否则{
控件。停用（）；
}
}
}
函数controlFeatureHandler（e）{
警报（如feature.geometry.getBounds（））；
}
函数updateFeatureTable（功能列表）{
var wkt=new OpenLayers.Format.wkt（）；
var表=”；
for（特性列表中的变量键）{
表+=”；
table+=featureList[key].id；

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



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);
     }
   } 
}