使用ol-ext的Transform做图形拖拽,怎么去修改选中的默认样式

最近做图形的绘制和编辑时使用了ol-ext库,虽然成功的能编辑图形,但这个选择的红色线框想修改一下颜色。


在这里插入图片描述
直接贴代码:

在这里插入代码片

		this._modifyDraw = new Transform({
            enableRotatedTransform: false,
            addCondition: shiftKeyOnly,
            layers: [this.vectorLayer],
            hitTolerance: 2,
            translateFeature: true,
            scale: true,
            rotate: false,
            keepAspectRatio: false,
            keepRectangle: false,
            translate: true,
            stretch: false,
            pointRadius: function (f) {
                const radius = f.get('radius') || 10
                return [radius, radius]
            }
        })

        this._modifyDraw.overlayLayer_.setStyle(
            new Style({
                image: new RegularShape({
                    fill: new Fill({
                        color: 'rgba(21,129,255,0.1)'
                    }),
                    stroke: new Stroke({
                        color: '#1581FF',
                        width: 1
                    }),
                    radius: 8,
                    points: 4,
                    angle: Math.PI / 4
                }),
                fill: new Fill({
                    color: 'rgba(21,129,255,0)'
                }),
                stroke: new Stroke({
                    color: '#1581FF',
                    width: 1,
                    lineDash: [10, 10]
                })
            })
        )

这样设置后样式就变了,如图:
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
多边形等距扩大或缩小是指在保持多边形形状不变的情况下,通过对多边形的每个顶点进行等量的平移来改变多边形的大小。ol-ext是一个开源的JavaScript库,提供了一些方便的方法来实现这种等距扩大或缩小的操作。 在使用ol-ext库时,可以通过使用其中的“scale”方法来实现多边形的等距扩大或缩小。该方法需要传入一个比例因子作为参数,该因子用于确定扩大或缩小的倍数。如果传入一个大于1的比例因子,多边形将被等比例扩大;如果传入一个小于1的比例因子,多边形将被等比例缩小。 例如,如果我们有一个正方形的多边形,其每个边长为10个单位,我们可以使用ol-ext库的“scale”方法来将其等距扩大为20个单位长的正方形。代码如下: var polygon = new ol.geom.Polygon([[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]]); var scaleFactor = 2; polygon.scale(scaleFactor); 这段代码将将原始多边形等比例扩大为原来的2倍,得到一个边长为20个单位的正方形。 同样,如果我们想要将同样的正方形多边形等距缩小为原来的一半大小,可以使用以下代码: var polygon = new ol.geom.Polygon([[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]]); var scaleFactor = 0.5; polygon.scale(scaleFactor); 这段代码将原始多边形等比例缩小为原来一半大小,得到一个边长为5个单位的正方形。 通过ol-ext库的“scale”方法,我们可以方便地实现多边形的等距扩大或缩小操作,而无需手动计算每个顶点的新坐标。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值