openlayers-3 - Openlayers 3偏移正则形状

标签 openlayers-3

对于群集功能,我想在OL3中制作以下样式:

一个正方形,在其顶部,在右上角还有另一个较小的正方形。较大的正方形将保留符号,而较小的正方形将保留聚类要素的数量。

类似于this

有可能实现这一目标吗?在API中,我已经看到ol.style.Icon和ol.style.Text具有anchor和offset属性,但没有RegularShape ...

最佳答案

我最终通过使用单个png图像克服了这个问题,该图像同时包含正方形和较小的正方形,并在上面覆盖了动态文本,如下所示:

    var clusterStyle = [new ol.style.Style({
        image: new ol.style.Icon({
          src: clustericon.png
        }),
        text: new ol.style.Text({
          text: feature.get('features').length.size.toString(),
          offsetY: -18,
          offsetX: 18,
          font: '12px Arial',
          fill: new ol.style.Fill({
            color: '#fff'
          }),
          scale: 1
        }),
        zIndex: 20
      }), new ol.style.Style({
        image: new ol.style.Icon({
          src: 'overlayicon.png'
        }),
        zIndex: 21
      })];

您也可以在其上插入覆盖图像。希望无论如何能对您有帮助

关于openlayers-3 - Openlayers 3偏移正则形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34180335/

相关文章:

javascript - OpenLayers 3 map 可视化

android - 移动设备上的可滚动 OL3 LayerSwitcher

openlayers-3 - 无法获取要素坐标,因此我可以获得最接近的要素

canvas - 使用 OpenLayer3,Internet Explorer 11 不显示基于 svg 的图层

javascript - OpenLayers ol-debug.js 提供 ol.js 属性

javascript - openlayers-3 在等待时更改光标

javascript - 如何在 Openlayers 3 ol.interaction.Select 上手动引发 'select' 事件?

javascript - 以像素为单位的 OpenLayers 特征

javascript - 带有弹出窗口的 openlayers 标记

javascript - 如何在本地保存 map 值以供用户第二次访问