OpenLayers 仅将样式应用于道路的一部分 [英] OpenLayers apply style to only part of a road

问题描述

我想制作一张代表城市交通状况的地图.所以我想在地图上显示一些交通指标.我希望根据当前的交通情况为每条道路涂上不同的颜色.

I want to make a map that represent the traffic for a city. So I have some traffic metrics that I want to visualize on the map. I wish to color each road different colours depending it's current traffic.

类似的东西:

我试图找到有关如何将样式仅应用于部分道路的教程，但我找不到如何做到这一点.

I tried to find a tutorial on how to apply style to only part of a roads, but I could not find how to do that.

非常感谢，这会很有帮助，谢谢！！

Thank you very much it will help a lot thanks!!

推荐答案

你应该为矢量图层使用一个样式函数:

You should go with a stylefunction for a vector layer:

https://openlayers.org/en/v4.6.5/apidoc/ol.html#.StyleFunction

来自 OL3 的示例:

A sample from OL3:

http://openlayersbook.github.io/ch11-creating-web-map-apps/example-02.html

详细说明上面的例子

function flickrStyle(feature) {
    var style = null;
    if (feature.get("name")=="Küstenschwalbe") {
        style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'green'
          })
        })
        });
    }
    else {
        style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'yellow',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'red'
          })
        })
        });
    }
    return [style];
}

var flickrLayer = new ol.layer.Vector({
  source: flickrSource,
  style: flickrStyle
});

这篇关于OpenLayers 仅将样式应用于道路的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！