设置样式缩放级别openlayers 3 [英] Set style zoom level openlayers 3

查看:595
本文介绍了设置样式缩放级别openlayers 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在Openlayers中,可以根据缩放级别打开或关闭某些功能.尽管查看了文档,但我在OpenLayers 3中找不到相同的功能.有谁知道如何做到这一点?这是我要放置在地图上的功能,ol.style.Text是我仅在用户放大到特定的缩放级别后才想显示的功能.

In Openlayers it was possible to turn certain features on or off depending on the zoom level. I have not found the same functionality in OpenLayers 3 despite looking through the documentation. Does anyone know how to do this? This is the feature I'm placing on the map and ol.style.Text is what I would like to display only after the user is zoomed in to a particular zoom level.

var geoJsonObj = {
  'type': 'Feature',
  'geometry': JSON.parse(response.FieldList[key].Shape)
}
var vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
});
Fields[Field.FieldID] = new ol.layer.Vector({
  projection: 'EPSG:4269',
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
    }),
    text: new ol.style.Text({
      textAlign: 'Center',
      text: response.FieldList[key].Acres,
      scale: 1
    })
  })
});

推荐答案

矢量层示例演示了如何使用样式函数来实现与分辨率相关的样式:

The vector layer example demonstrates the use of a style function for resolution dependent styling: http://openlayers.org/en/latest/examples/vector-layer.html

这是一个简化的版本:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    var text = resolution < 5000 ? feature.get('name') : '';
    return new ol.style.Style({
      text: new ol.style.Text({
        text: text,
        fill: new ol.style.Fill({
          color: '#000'
        }),
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 3
        })
      })
    });
  }
});

上面的层将以低于每像素5000个地图单​​位的分辨率渲染特征name.

The layer above would render feature names at resolutions below 5000 map units per pixel.

上面的矢量层示例还包含一些其他代码,以便在可能的情况下重用样式.如果您拥有大量功能,则可以通过为每个渲染帧创建新样式实例来给垃圾收集器施加过多压力.

The vector layer example above has some additional code to reuse styles when possible. If you've got a ton of features, you can put excess pressure on the garbage collector by creating new style instances for every render frame.

这篇关于设置样式缩放级别openlayers 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆