javascript - 更改openlayers 2中单线节点的样式

标签 javascript html openlayers gis

我在 Openlayers 中有一个图层,它允许用户绘制一条线,其中每个顶点都出现节点。例如:

enter image description here

但是,我希望第一个节点与其余节点不同,以表示行的开头。我正在使用 styleMap 来生成图层样式,但似乎无法覆盖第一个节点的属性。

这是我的样式图代码:

   var myDefault = {
        strokeColor: "#FF9900",
        fillColor: "#FF9900",
        strokeOpacity: 1,
        strokeWidth: 4,
        fillOpacity: .9,
        pointRadius: 6
    };

    var myStyleMap = new OpenLayers.StyleMap({
       "default": new OpenLayers.Style(myDefault, {context:context})
    });

非常感谢任何帮助!

最佳答案

您可以定义自定义样式函数,而不仅仅是使用未处理的要素属性。为此,您必须在 OpenLayers.Style 中定义“上下文”属性,例如使用标签条件。

var defStyle = new OpenLayers.Style({
strokeColor: "#ee9900", 
strokeWidth: 2, 
fillColor: "#ee9900", 
pointRadius: 5 , 
strokeWidth: 2,
    strokeOpacity: 1,
    label: '${label}',
    fontSize: '11px',
    fontColor: '#575555',
    fontFamily: 'Verdana',
    labelAlign: 'cm',
    labelOutlineWidth: 2
},
{
 context: {
        label:function(feature) {
            if(feature.attributes['measure']) {
                return feature.attributes.measure+" "+ feature.attributes.units;
            } else {
                return '';
            }
        }
}
});

您可以为第一个节点添加任何属性并搜索它,以应用您的自定义样式。

关于javascript - 更改openlayers 2中单线节点的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30599356/

相关文章:

javascript - 上传图片,随机播放并显示

javascript - for 循环中的 If 语句被忽略

javascript - 如何更改仅带有弹出窗口的事件选项卡的 Chrome 扩展程序图标?

javascript - ExecJS - Ruby 中的 Javascript 对象实例?

javascript - OpenLayers多线绘制线条消失

javascript - OpenLayers - 获取几何投影

javascript - 定位所有类元素以从同一点对齐

javascript - 如何收集 AngularJS 中已选择的行的数据?

JavaScript/HTML - 警告框先于声音?

javascript - 使用控制比例线保存 map