设置样式缩放级别 openlayers 3

2024-04-29

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

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
    })
  })
});

矢量层示例演示了如何使用样式函数来实现与分辨率相关的样式:http://openlayers.org/en/latest/examples/vector-layer.html 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
        })
      })
    });
  }
});

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

设置样式缩放级别 openlayers 3 的相关文章

  • 上传到google脚本中的特定文件夹

    所以我想制作一个表单 将文件 照片 视频上传到 Google Drive 中的特定文件夹 文件 照片 视频 但我不知道如何在 Google Apps 脚本中制作 我尝试了这样的操作 并在控制台中出现错误 无效的参数侦听器 所以这里有一个索引
  • $(window).resize() 和打印预览模式

    我有一段非常简单的代码 可以在调整大小后刷新窗口 window resize function location reload 当我尝试在 Chrome 中打开打印预览模式 Ctrl P 时 它也会刷新它 有什么想法如何避免这种行为吗 要确
  • Draggable 正在阻止触摸事件

    我正在尝试使用拖动来来回移动 div 这部分工作正常 直到 div 具有可滚动内容 由于滚动条 这在桌面上不是问题 但在触摸设备上会出现问题 由于触摸事件与拖动事件冲突 我无法滚动内容 我尝试创建一个条件来检测拖动是否水平方向多于垂直方向
  • 获取预转译源代码的 Karma 代码覆盖率

    我使用 Karma 来运行测试 使用 webpack 来捆绑文件 并使用 babel 进行 es6 gt es5 转译 我已经运行了测试并生成了代码覆盖率 但代码覆盖率数字是针对转译后的源文件的 是否有办法获得原始源文件的代码覆盖率 我尝试
  • 在复选框内映射复选框 ReactJS

    我有一个函数 一旦主复选框被选中 就会触发子复选框 并且所有这些复选框都是从 JSON 映射的 主复选框 最高级别 及其下面的所有子复选框 第二级别 都会在单击时显示 并且效果很好 我想要显示的是单击时主复选框 第三级别 的子复选框2 级项
  • Scalatest PlusPlay Selenium 无法调整窗口大小

    对此已经研究了一段时间 我似乎找不到使用 scalatest plus 调整窗口大小的方法 我发现在线搜索或文档的唯一方法http doc scalatest org 2 1 5 index html org scalatest selen
  • 在 javascript 中循环 html 复选框

    实际上我有一个关于如何在java脚本中循环复选框的问题 假设我在jsp循环中创建了html复选框 我希望在javascript中对这些复选框进行验证 我应该怎么做 通常对于单个对象 我们可以执行 window document form c
  • 如何从谷歌地图中的纬度和经度获取地址位置? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 所以我有纬度和经度就像44 4647452 and 7 3553838 我需要获得如下地址 米兰 意大利 str 肯尼迪 89 我怎样才能
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • 在网站的一次导航中仅显示一次弹出窗口

    我有一个使用 Laravel 创建的网站 我希望用户第一次访问我的网站时能够看到弹出窗口 我的意思是第一次 用户访问我网站上的任何页面 这是第一次 访问网站上的一些链接页面 现在 这些页面访问不是第一次 在同一选项卡中打开 facebook
  • SWC with JavaScript:如何处理 CSS 导入以及如何绝对导入?

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 如何在不知道id的情况下从内页获取父iframe元素?

    让我们想象一下我有这样的东西 div div test html 是空页面 自定义hash属性始终具有不同的值 出于安全原因两个页面位于同一域 iframe 元素的数量和顺序是随机的 我的问
  • 在 Photoshop 中使用 javascript 修改文本项的内容

    我知道如何使用这样的代码在 Photoshop 中设置文本项的内容 var al doc activeLayer if al kind LayerKind TEXT get the textItem var ti al textItem c
  • 为什么我会失去对元素的引用?

    我偶然发现了一些奇怪的东西 至少对我来说 案例如下 我选择一个元素 child1 从 DOM 并将其保存到变量中 我继续添加一个新元素child1的家长 parent1 现在 如果我尝试修改某些值child1它不记录更改 似乎引用已经消失
  • React:设置 State 或设置 Prop 而无需重新渲染

    Problem 目前 我有一个LoginForm具有 成功 处理函数的组件handleOnSuccess 然后将其链接到父组件onTokenUpdate由 令牌更新 处理函数定义的属性handleUpdateToken 问题是setStat
  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能
  • 如何对对象数组调用reduce来求和它们的属性?

    说我想求和a x对于中的每个元素arr arr x 1 x 2 x 4 arr reduce function a b return a x b x gt NaN 我有理由相信a x is undefined在某一点 以下工作正常 arr
  • 只允许在输入字段中输入数字

    我想要打开电话号码字段这个网站 http myfrugaltech com dev savoo register 只接受数字或数字 我无权编辑 HTML 代码 那么可以使用 jQuery 通过定位字段 ID 来完成此操作吗 如果可以的话 该
  • 在 JSON 对象中存储和发送原始文件数据

    我正在寻找一种方法来传输任何文件类型的原始文件数据和任何可能的内容 我的意思是文件和文件内容都是用户生成的 在 Backbone 前端中使用 xhr ajax 调用两种方式针对 Django 后端 编辑 也许问题仍然不清楚 如果您在 IDE

随机推荐