如何在不应用样式的情况下使用 Select 交互

Question

有没有什么方法可以在不改变功能样式的情况下使用 OpenLayers 的 Select 交互？

我只对悬停时使用该交互的事件感兴趣。

谢谢！

Answer 1

OpenLayers 有很好的文档。阅读 API 很有帮助。

来自ol.interaction.Selection：

By default, selected features are styled differently, so this interaction can be used for visual highlighting, as well as selecting features for other actions, such as modification or output

Style for the selected features. By default the default edit style is used (see ol.style).

因此，您可以通过为地图上定义的 select 交互提供相同的样式来解决这个问题。默认样式定义在 ol.style.

的文档中列出

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'https://openlayers.org/en/v4.6.4/examples/data/geojson/countries.geojson',
          format: new ol.format.GeoJSON()
        })
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
      
      var styleFunction = function(feature) {
         var fill = new ol.style.Fill({
           color: 'rgba(255,255,255,0.4)'
         });
         var stroke = new ol.style.Stroke({
           color: '#3399CC',
           width: 1.25
         });
         var styles = [
           new ol.style.Style({
             image: new ol.style.Circle({
               fill: fill,
               stroke: stroke,
               radius: 5
             }),
             fill: fill,
             stroke: stroke
           })
         ];
         return styles;
      }

      var select = new ol.interaction.Select({
        style: styleFunction
      });
      map.addInteraction(select);

<!DOCTYPE html>
<html>
  <head>
    <title>Select Features</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
  </body>
</html>

如何在不应用样式的情况下使用 Select 交互

How to use the Select interaction without applying style

openlayers

openlayers-3