OpenLayers 3中的多选功能无法正常工作

时间:2016-02-08 09:32:44

标签: openlayers-3

我是OpenLayers的新手,我做了一个简单的例子,我试图在地图上绘制多边形。绘图后,我希望能够多选按多次移动点击进行进一步处理。即使OpenLayers示例页面上的一些示例非常接近,我也无法做到这一点...... 这是我的代码(按下绘制按钮并绘制两个多边形,按停止按钮退出绘图模式并尝试多选按住Shift键):

 <body>
        <div>
        <img src="stop.png" class="fmsv_map_btn" id="fmsv_stop_elm" title="Stop drawing" alt="Stop drawing">
        <img src="draw.png" class="fmsv_map_btn" id="fmsv_contour_elm" title="Contour" alt="Contour">    
        </div>
        <div width="600" height="600" id="map" class="map"></div>
        <script>
        var engine = this;
        var draw = null;
        var map = new ol.Map({
            target: "map",
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.MapQuest({ layer: 'osm' })
              })
            ],
            view: new ol.View({
                center: [0,0],
                zoom: 2
            })
        });
        var features = new ol.Collection();
        var source = new ol.source.Vector({ features: features });
        var featureOverlay = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#000000'
                    })
                })
            })
        });
        featureOverlay.setMap(map);
        $("#fmsv_contour_elm").click(function () {
            addInteraction("Polygon");
        });
        $("#fmsv_stop_elm").click(function () {
            if (draw)
                map.removeInteraction(draw);
            draw = null;
        });
        var selectClick = new ol.interaction.Select({
            condition: ol.events.condition.click,
            //addCondition: ol.events.condition.shiftKeyOnly,
            //toggleCondition: ol.events.condition.never,
            //removeCondition: ol.events.condition.altKeyOnly,
        });
        map.addInteraction(selectClick);
        var selectedFeatures = select.getFeatures();
        //selectClick.on('select', function (e) {
        //});

        function addInteraction(drawmode) {
            if (draw)
            map.removeInteraction(draw);
            draw = new ol.interaction.Draw({
               features: features,
               type: /** @type {ol.geom.GeometryType} */ (drawmode)
            });
            map.addInteraction(draw);
       }
    </script>
  </body>

1 个答案:

答案 0 :(得分:0)

使用map.addLayer(featureOverlay);代替featureOverlay.setMap(map)