Question

有没有办法在不改变功能样式的情况下使用OpenLayers的Select互动？

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

谢谢！

Answer 1

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

来自ol.interaction.Selection：

默认情况下，所选要素的样式不同，因此此互动可用于视觉突出显示，以及为其他操作选择要素，例如修改或输出

所选功能的样式。默认情况下，使用默认编辑样式（请参阅ol.style）。

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

如何使用选择交互而不应用样式

1 个答案: