Question

我有一些代码可以初始化带点的地图。我从json获得的点坐标，在文件末尾有一个过滤器。我需要在地图上隐藏/显示一些点。我该怎么办？ 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

过滤集群的常用方法是在ol.source.Cluster中使用geometryFunction。 “当不应将某个功能用于群集时，该函数应返回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;
}

Answer 2

只需将某些功能添加到矢量源，以便仅显示它们。如：

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

Openlayers5隐藏功能

2 个答案: