Question

我正在为我的地图上的矢量要素添加动态样式，就像这样...

 var source = webLayer.getSource();
                                                var features = source.getFeatures();


                                                var templateStyle = new ol.style.Style({
                                                    fill: new ol.style.Fill({ color: convertHex(Layer.LayerStyle.FillColor, '0.5') }),
                                                    stroke: new ol.style.Stroke({ color: convertHex(Layer.LayerStyle.LineColor, '0.5') }),
                                                    text: new ol.style.Text({
                                                        font: '24px Verdana',
                                                        text: webLayer.U.label,
                                                        offsetY: 20,
                                                        fill: new ol.style.Fill({
                                                            color: [255, 255, 255, 0.8]
                                                        })
                                                    })
                                                });


                                                var select = new ol.interaction.Select({
                                                    style: templateStyle
                                                });

                                                map.addInteraction(select);                                                    webLayer.setVisible(Visibility);
                                                features[0].setStyle(templateStyle);

我还想为文本添加一个分辨率函数，因此它只能以某种分辨率显示，例如......

style: function (feature, resolution) {
                            var text = resolution * 100000 < 10 ? response.FieldList[key].SomeText: '';

                            if (text != "") {
                                styleCache[text] = [new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#319FD3',
                                        width: 1
                                    }),
                                    text: new ol.style.Text({
                                        font: '12px Calibri,sans-serif',
                                        text: text,
                                        fill: new ol.style.Fill({
                                            color: '#000'
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#fff',
                                            width: 3
                                        })
                                    }),
                                    fill: new ol.style.Fill({
                                        color: convertHex(response.FieldList[key].Shade, '0.5')
                                    })
                                })];
                            }

但是还没有弄清楚如何通过创建这样的风格来实现这个......

var templateStyle = new ol.style.Style({
                                                    fill: new ol.style.Fill({ color: convertHex(Layer.LayerStyle.FillColor, '0.5') }),
                                                    stroke: new ol.style.Stroke({ color: convertHex(Layer.LayerStyle.LineColor, '0.5') }),
                                                    text: new ol.style.Text({
                                                        font: '24px Verdana',
                                                        text: webLayer.U.label,
                                                        offsetY: 20,
                                                        fill: new ol.style.Fill({
                                                            color: [255, 255, 255, 0.8]
                                                        })
                                                    })
                                                });

Answer 1

我最终意识到我可以使用最初用于创建矢量要素的相同类型的样式函数...我必须注入用于创建地图的控制器并按照这种方式执行属性。< / p>

var source = webLayer.getSource();
                                                var features = source.getFeatures();

                                                var styleCache = {};
                                                var feature = features[0];
                                                var view = map.getView();
                                                var shade = webLayer.U.shade;
                                                if (shade == "")
                                                {
                                                    shade = Layer.LayerStyle.FillColor;
                                                }
                                                var templateStyle = function (feature, resolution) {
                                                    var text = view.getResolution() * 100000 < 10 ? webLayer.U.label : '';

                                                    if (text != "") {
                                                        styleCache[text] = [new ol.style.Style({
                                                            stroke: new ol.style.Stroke({
                                                                color: '#319FD3',
                                                                width: 1
                                                            }),
                                                            text: new ol.style.Text({
                                                                font: '12px Calibri,sans-serif',
                                                                text: text,
                                                                fill: new ol.style.Fill({
                                                                    color: '#000'
                                                                }),
                                                                stroke: new ol.style.Stroke({
                                                                    color: '#fff',
                                                                    width: 3
                                                                })
                                                            }),
                                                            fill: new ol.style.Fill({
                                                                color: rcisWebMapUtilities.convertHex(shade, '0.5')
                                                            })
                                                        })];
                                                    }
                                                    else if (text == "") {
                                                        styleCache[text] = [new ol.style.Style({
                                                            fill: new ol.style.Fill({
                                                                color: convertHex(shade, '0.5')
                                                            })
                                                        })
                                                        ]
                                                    } return styleCache[text];
                                                }


                                                var select = new ol.interaction.Select({
                                                    style: templateStyle
                                                });

                                                features[0].setStyle(templateStyle);
                                                webLayer.setVisible(Visibility);

OpenLayers 3应用具有分辨率函数

1 个答案: