OpenLayers3-7-Box Selection

最新推荐文章于 2024-05-27 17:43:08 发布

isowang

最新推荐文章于 2024-05-27 17:43:08 发布

阅读量1.3k

点赞数

分类专栏： openlayers GIS

GIS 同时被 2 个专栏收录

11 篇文章

订阅专栏

openlayers

9 篇文章

订阅专栏

本文介绍如何使用 OpenLayers 的 DragBox 交互功能来选中地图上的要素，并通过 Select 交互进行高亮显示。用户可通过 Ctrl+拖拽的方式绘制选择框，被选中的要素名称将显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：http://openlayers.org/en/v3.13.0/examples/box-selection.html

No countries selected
This example shows how to use a DragBox interaction to select features. Selected features are added to the feature overlay of a select interaction (ol.interaction.Select) for highlighting.

Use Ctrl+Drag (Command+Drag on Mac) to draw boxes.

Related API documentation:
ol.Map,ol.View,ol.events.condition,ol.format.GeoJSON,ol.interaction.DragBox,ol.interaction.Select,ol.layer.Tile,ol.layer.Vector,ol.source.OSM,ol.source.Vector

翻译：
这个例子示范了如何使用DragBox 交互选中的feature.被选中的feature会以一个高亮的效果添加到一个feature覆盖物中.

使用Ctrl+拖拽来画方形

相关的api文档包括：
ol.Map,ol.View,ol.events.condition,ol.format.GeoJSON,ol.interaction.DragBox,ol.interaction.Select,ol.layer.Tile,ol.layer.Vector,ol.source.OSM,ol.source.Vector

<!DOCTYPE html>
<html>
  <head>
    <title>Box Selection</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
    <style>
      .ol-dragbox {
        background-color: rgba(255,255,255,0.4);
        border-color: rgba(100,150,0,1);
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">No countries selected</div>
    <script>
    //使用的geojson这种方式来创建一个地图数据源
      var vectorSource = new ol.source.Vector({
        url: 'data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      });

    //map上添加了2个layer 分别为osm底图,以及国家边界线
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: vectorSource
          })
        ],
        renderer: 'canvas',
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      // a normal select interaction to handle click
      var select = new ol.interaction.Select();
      map.addInteraction(select);

      var selectedFeatures = select.getFeatures();

      // a DragBox interaction used to select features by drawing boxes
      var dragBox = new ol.interaction.DragBox({
        condition: ol.events.condition.platformModifierKeyOnly
      });

      map.addInteraction(dragBox);

      var infoBox = document.getElementById('info');

      dragBox.on('boxend', function() {
        // features that intersect the box are added to the collection of
        // selected features, and their names are displayed in the "info"
        // div
        var info = [];
        var extent = dragBox.getGeometry().getExtent();
        vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
          selectedFeatures.push(feature);
          info.push(feature.get('name'));
        });
        if (info.length > 0) {
          infoBox.innerHTML = info.join(', ');
        }
      });

      // clear selection when drawing a new box and when clicking on the map
      dragBox.on('boxstart', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = '&nbsp;';
      });
      map.on('click', function() {
        selectedFeatures.clear();
        infoBox.innerHTML = '&nbsp;';
      });
    </script>
  </body>
</html>