首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Openlayers5隐藏功能

Openlayers5隐藏功能
EN

Stack Overflow用户
提问于 2019-02-09 11:05:50
回答 2查看 869关注 0票数 0

我有一些代码初始化地图与点。我从json得到的点的坐标,在文件的末尾我有一个过滤器。我需要在地图上隐藏/显示一些点。我该怎么做呢?setStyle()或更改图像大小都不起作用。有什么想法吗?

代码语言:javascript
复制
// 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();

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-09 16:57:58

只需将某些功能添加到向量源中,这样就只会显示它们。例如:

代码语言:javascript
复制
source.clear();
features.forEach(function (ftr) {
  if (ftr.get("someProperty")>10) {
    source.addFeature(ftr);
  }
});
票数 1
EN

Stack Overflow用户

发布于 2019-02-09 20:01:33

过滤集群的常用方法是在ol.source.Cluster中使用geometryFunction。“当一个特性不应该被考虑用于集群时,函数应该返回null。”https://openlayers.org/en/v4.6.5/apidoc/ol.source.Cluster.html然而,在这种情况下,如果一个json已经被预加载,我怀疑Ulas的方法会更有效。

代码语言:javascript
复制
  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();
    }
  });

您可以为不同类型的图像提供不同的图标,最好使用匹配的名称以简化编码,例如:

代码语言:javascript
复制
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;
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54602755

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档