Openlayers 5个隐藏功能

Question

我有一些代码可以用点来初始化地图。我从 json 获得的点坐标，在文件末尾我有一个过滤器。我需要 hide/show 地图上的一些点。我该怎么做？ setStyle() 或更改图像大小不起作用。有什么想法吗？

// coordinates
var coordinatesJson;
function init(paramsFilter) {
  $.getJSON("/wp-content/themes/ukid/mapdata.php",function(data){
    coordinatesJson = data;
    dataReady(paramsFilter);
  });
}
function dataReady(paramsFilter) {
  // coordinates points
  var coordinates = [];
  $.each(coordinatesJson, function (index, value) {
    coordinates[index] = ol.proj.fromLonLat([parseFloat(value['longitude']), parseFloat(value['latitude'])]);
  });
  
  // features points
  var features = [];
  $.each(coordinates, function (index, value) {
    features[index] = new ol.Feature({
      geometry: new ol.geom.Point(value),
      // name: 'Null Island',
      color: 'green',
      type: 'kindergarten',
      size: [32,32]
    });
  });

  $.each(coordinatesJson, function(index, value){
    features[index].values_.name = value['post_title'];
    features[index].values_.post_name = value['post_name'];
    features[index].values_.city = value['city'];
    features[index].values_.area = value['area'];
  });
  
// support for render map
  var source = new ol.source.Vector({
    features: features
  });

  var clusterSource = new ol.source.Cluster({
    distance: 40,
    source: source
  });


// clusters and style of point
  var clusters = new ol.layer.Vector({
    source: clusterSource,
    style: function(feature) {
      var size = feature.get('features').length;
      var color = feature.get('features')[0].get('color');
      var size = feature.get('features')[0].get('size');
      var  style = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: '/wp-content/themes/ukid/img/kindergarten-icon.png',
          imgSize: size
        })
      });
      return style;
    }
  });
  
// support for render map
  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

// render map
  var map = new ol.Map({
    layers: [raster, clusters],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([30.5238, 50.45466]),
      zoom: 11
    })
  });

// filter map
  if (paramsFilter) {
    let featuresList = source.forEachFeature(function(callback){
      if (paramsFilter['type']) {
        if (callback['values_']['type'] != paramsFilter['type']) {
          // HOW HIDE MAP POINT ?
        }
      }
      if (paramsFilter['city']) {
        if (callback['values_']['city'] != paramsFilter['city']) {
          // HOW HIDE MAP POINT ?
        }
      }
      if (paramsFilter['area']) {
        if (callback['values_']['area'] != paramsFilter['area']) {
          // HOW HIDE MAP POINT ?
        }
      }
    });
  }
}
init();

Answer 1

只需将某些特征添加到矢量源中，以便只显示它们。如：

source.clear();
features.forEach(function (ftr) {
  if (ftr.get("someProperty")>10) {
    source.addFeature(ftr);
  }
});

Answer 2

过滤簇的常用方法是使用 ol.source.Cluster 中的 geometryFunction。 "When a feature should not be considered for clustering, the function should return null." https://openlayers.org/en/v4.6.5/apidoc/ol.source.Cluster.html 但是，在这种情况下，预加载了单个 json 我怀疑 Ulas 的方法会更有效。

  var clusterSource = new ol.source.Cluster({
    distance: 40,
    source: source,
    geometryFunction: function(feature) {
      if (paramsFilter) {
        if (paramsFilter['type'] && feature.get('type') != paramsFilter['type']) return null;
        if (paramsFilter['city'] && feature.get('city') != paramsFilter['city']) return null;
        if (paramsFilter['area'] && feature.get('area') != paramsFilter['area']) return null;
      }
      return feature.getGeometry();
    }
  });

您可以为不同的类型设置不同的图像，方法是为每个图像设置一个图标，最好使用匹配的名称以使编码更容易，例如：

style: function(feature) {
  var size = feature.get('features').length;
  var color = feature.get('features')[0].get('color');
  var size = feature.get('features')[0].get('size');
  var type = feature.get('features')[0].get('type');
  var  style = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: '/wp-content/themes/ukid/img/' + type + '-icon.png',
      imgSize: size
    })
  });
  return style;
}

Openlayers 5个隐藏功能

Openlayers5 hide features

openlayers

openlayers-5