Openlayers5 隐藏功能

安德烈·库岑科

我有一些代码可以用点初始化地图。我从 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();

审查

只需向矢量源添加某些功能,以便仅显示它们。如:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在OpenLayers 3中隐藏和显示功能?(重画?)

来自分类Dev

OpenLayers5:hitTolerance 似乎不适用于 WMS 层

来自分类Dev

如何在 OpenLayers5 上获得长按、右键单击或此类事件?

来自分类Dev

JavaScript隐藏元素功能

来自分类Dev

Xcode隐藏功能

来自分类Dev

隐藏的异步功能

来自分类Dev

实例化隐藏功能

来自分类Dev

显示/隐藏功能

来自分类Dev

JavaScript - 显示/隐藏功能

来自分类Dev

OpenLayers覆盖功能ID

来自分类Dev

Openlayers 功能创建问题

来自分类Dev

Div Wont隐藏与jQuery隐藏功能

来自分类Dev

全球环境中隐藏的功能?

来自分类Dev

隐藏Access 2016的功能区

来自分类Dev

如何激活隐藏输入的功能?

来自分类Dev

如何激活隐藏输入的功能?

来自分类Dev

使用CSS的隐藏显示功能

来自分类Dev

显示/隐藏功能-多余的空格

来自分类Dev

Javascript显示和隐藏功能

来自分类Dev

类功能单击显示/隐藏

来自分类Dev

隐藏和显示jQuery功能

来自分类Dev

JavaScript中对象的“隐藏”功能

来自分类Dev

OpenLayers功能(以像素为单位)

来自分类Dev

Openlayers 3:动画点功能

来自分类Dev

在放大openlayers 3时隐藏图层或要素?

来自分类Dev

如何隐藏在jQuery单击功能后显示的隐藏div

来自分类Dev

如何隐藏在jQuery单击功能后显示的隐藏div

来自分类Dev

iPad的显示/隐藏功能切换

来自分类Dev

无法在div上应用简单的隐藏功能