更改绘面区域的填充样式斜线之类的

0 投票

如图把绘图区域底色更改为斜线

6月 26, 2019 分类:  342次浏览 | 用户: fangzhenhao (7 分)

1个回答

0 投票
 
已采纳
目前前端的填充样式只支持颜色的风格。
6月 26, 2019 用户: 于浩 登峰造极 (5,668 分)
采纳于 7月 1, 2019 用户:fangzhenhao
你说的是ol.style.fill里面的color吗 这个我改了只是画的时候有颜色 画好之后填充颜色还是默认的
贴一下完整的代码,看一下是如何实现的。
$(buttons[key]).on('click', function () {
            clearInteraction();
            draw = new ol.interaction.Draw({
                source: source,
                type: buttons[key].value,
                snapTolerance: 20,
                freehand: true,
                style: new ol.style.Style({  //就这里面设置的颜色吧 只有绘的时候有颜色 绘玩颜色就又是白色了
                    
                    fill: new ol.style.Fill({
                        color:'rgba(0,0,0,0.5)',
                    })
                })
            });
            map.addInteraction(draw);
        });

你这个fill是对于绘制时候对绘制的面设置了样式,可以对他的绘制结果的目标源或者目标features设置样式

我看的别的也是改features  但是我不会获取绘图

https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html

你可以new 一个vectorlayer,然后把你生成的这个目标source,就是我上图里画红圈的,传给这个vectorlayer,然后设置这个vectorlayer的style

看不太懂 不会指过去

         $(buttons[key]).on('click', function () {
            clearInteraction();
            draw = new ol.interaction.Draw({
                source: source,
                layers: [
                    vectorLayer
                ],
                type: buttons[key].value,
                snapTolerance: 20,
                freehand: true
            });
            var vectorLayer = new ol.layer.Vector({
                source: source,
                style:new ol.style.Style({
                    fill:new ol.style.Fill({
                        color:'rgba(0,0,0,0.9)'
                    })
                })
            });
            map.addInteraction(draw);
        });
    });

https://openlayers.org/en/latest/examples/draw-features.html

可以参考下openlayers的示例,这个有绘制并保存到vectorlayer的功能,设置vectorlayer的样式就可以了

谢谢 终于改出来了
大佬,弱弱的问一下,Leeaflet能实现反斜线填充吗,被困扰好久了
...