如何在OpenLayers 3中使笔画不透明度起作用 [英] How to make Stroke opacity work in OpenLayers 3

问题描述

无论我做什么，我都无法在OpenLayers 3中使Stroke不透明.我试图达到的目的是在OSM瓷砖贴图上画一条线，透明度为0.5.

这是示例代码:

var lineString = new ol.geom.LineString([
   [4.9020, 52.3667],
   [4.9030, 52.3667],
   [4.9040, 52.3667],
   [4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: lineString,
            name: 'Line'
        })]
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'yellow',
            opacity: 0.5,
            width: 15
        })
    })
});    

var view = new ol.View({
    center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
   zoom: 18
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    lineLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: view
});

您可以在这里看到它: http://jsfiddle.net/abgcvqw3/1/

解决方案

不透明度是通过color选项设置的，它是颜色值的第四个元素(A，代表RGBA中的"Alpha").

例如，以下是您可以使用半透明黄色的方法:

 color: [255, 255, 0, 0.5]
 

这是另一种表示法:

 color: 'rgba(255,255,0,0.5)'
 

I cannot get Stroke opacity working in OpenLayers 3 no matter what I try. What I try to achieve is to draw a line to OSM tile map with 0.5 opacity.

Here is sample code:

var lineString = new ol.geom.LineString([
   [4.9020, 52.3667],
   [4.9030, 52.3667],
   [4.9040, 52.3667],
   [4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: lineString,
            name: 'Line'
        })]
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'yellow',
            opacity: 0.5,
            width: 15
        })
    })
});    

var view = new ol.View({
    center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
   zoom: 18
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    lineLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: view
});

You can see it here: http://jsfiddle.net/abgcvqw3/1/

解决方案

The opacity is set through the color option, as the fourth element of the color value (the A, for "Alpha" in RGBA).

For example here's how you can have a semi transparent yellow:

color: [255, 255, 0, 0.5]

And here is another notation:

color: 'rgba(255,255,0,0.5)'

这篇关于如何在OpenLayers 3中使笔画不透明度起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！