Question

以下问题：我在矢量图层中使用OpenLayers.Geometry.LineString绘制一条线。使用Openlayer SelectFeature我想选择这一行。但这只是在起点和终点可能。这是openlayer源代码中的错误吗？

这是我的例子：点击蓝色粗线不起作用。

<html>
    <head>
        <title>OpenLayers Example</title>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript"src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    </head>

    <body>
        <div style="width:100%; height:100%" id="map"></div>
        <script defer="defer" type="text/javascript">

        //create map
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: 'EPSG:4326',
            units: "m",
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            controls: [
                new OpenLayers.Control.PanZoom(), 
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.MousePosition({"numDigits": 8,
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    emptyString:"outside the map"
                }),
            ]
        };        

        map = new OpenLayers.Map('map', options);

        // create OSM layer
        osm_osma = new OpenLayers.Layer.OSM.Osmarender('OpenStreetMap Osmarender', {
            minZoomLevel: 0,
            maxZoomLevel: 100,
            isBaseLayer: true
        });

        map.addLayers([osm_osma]);      
        var lonlat=transformLonLat("8.3191929972096", "49.015806343698", false);
        map.setCenter(lonlat, 17);

        //create vector-layer
        // Layerstyle
        var vlayer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
        vlayer_style.fillOpacity = 0.6;
        vlayer_style.fillColor = "green";
        vlayer_style.strokeWidth = 6;
        vlayer_style.strokeColor = "blue";
        vlayer_style.strokeOpacity = 1;

        var select_style = OpenLayers.Util.extend({}, vlayer_style);
        select_style.fillOpacity = 0.6;
        select_style.strokeWidth = 10;
        select_style.strokeColor = "black";
        select_style.fillColor = "black";
        vlayer_style.strokeOpacity = 1;

        var vStyleMap = new OpenLayers.StyleMap({
            "default" :vlayer_style,
            "select" :select_style
        });

        var vlayer = new OpenLayers.Layer.Vector("vlayer", {styleMap: vStyleMap});
        map.addLayer(vlayer);

        //create SelectFeatures
        var selectControl=new OpenLayers.Control.SelectFeature(vlayer,
        {
            displayClass: "selectButton", 
            title: 'Select Ways', 
            onSelect:selected, 
            onUnselect:unselected,
            toggle:false,
            clickout:true,
            multiple:false,
            hover:false,
            toggleKey:"ctrlKey", 
            multipleKey:"shiftKey",
            geometryTypes: ["OpenLayers.Geometry.LineString"],
            callbacks: {
                'over': feature_hover,
                'out': feature_hover_out
            }
        });

        map.addControl(selectControl);
        selectControl.activate();

        //Draw Linestring
        var waypoint_lon="8.3096336042805";
        var waypoint_lat="49.016608500028";
        var lonlat=transformLonLat(waypoint_lon, waypoint_lat, false);        
        var point=new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
        var arrPoint =[];
        arrPoint.push(point); 

        waypoint_lon="8.3274863874837";
        waypoint_lat="49.016249642214";
        lonlat=transformLonLat(waypoint_lon, waypoint_lat, false);        
        point=new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
        arrPoint.push(point); 

        var line = new OpenLayers.Geometry.LineString(arrPoint);    
        var lineF = new OpenLayers.Feature.Vector(line,null);

        vlayer.addFeatures([lineF]);

        //Functions
        function transformLonLat(lon, lat, anzeige) {
            var lonlat1 = null;
            if (anzeige==true)
                lonlat1=new OpenLayers.LonLat(lon, lat).transform(
                    new OpenLayers.Projection("EPSG:900913"), // Spherical Mercator Projection
                    new OpenLayers.Projection("EPSG:4326") // WGS 1984,
                );
            else
            lonlat1=new OpenLayers.LonLat(lon, lat).transform(
                new OpenLayers.Projection("EPSG:4326"), // WGS 1984,
                new OpenLayers.Projection("EPSG:900913") // Spherical Mercator Projection
            );
            return lonlat1;
        }

        function feature_hover( feature ){ 
            feature.layer.div.style.cursor = "crosshair";
        } 

        function feature_hover_out( feature ){ 
            feature.layer.div.style.cursor = "";
        } 

        function selected (obj) {
            alert("select");
        }

        function unselected (obj) {  
            alert("deselect");
        }
        </script>
    </body>
</html>

Answer 1

可能它确实有效，但是很难点击中间的那条线（并且更容易点击它的端点）？

Openlayers - 使用LineString的SelectFeature不起作用

1 个答案: