要素集合中每个要素的不同颜色 [英] Different colors for each feature of a collection of features

问题描述

我已经在我的地图中上传了一个具有Open Layers 3的Geojson文件。该Geojson文件是一个具有5个LineString型要素的FeatureCollection。 我如何才能用不同的颜色显示每个要素以区分我的路径？ 如果我将颜色添加到Geojson文件的样式中，这是不可读的，如果我将颜色添加到笔划，则所有要素都以单一颜色着色。

下面我添加代码。

谢谢。

var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: 'http://localhost/joggo_wp/percorsi.geojson'
            }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: "#ff000",
                    width: 2.5,                     
                })
            }),     
        });

文件GEOJSON：

{

"type"："FeatureCollection"， "crs"：{"type"："name"，"properties"：{"name"："urn：ogc：def：crs：epsg：：4326"}}， "功能"：[ {"type"："Feature"，"Properties"：{"ID"：1.0，"LUNGH_M"：1970.0，"Nome"："Percorso 1"，"Partenza"："Via del Poggio Imperiale 4"，"Arrivo"："Via S.Leonardo 59n"，"Longhezza"："1，97公里"}，"Style"：{"COLOR"："#FF0000"}，"GEOMETRY"：{"TYPE"："LineString"，"坐标"：[[11.24203700040032，43.759969754752376]，[11.247204649917521，43.750208064502473]，[11.247446659153409，43.750240561464494]，[11.247746238597509，43.750179530458503]，[11.247960306028226，43.750118937742307]，[11.248108264989046，43.749966781403657]，[11.248240378523741，43.749814084940027]，[11.248897533371567，43.7500652772493]，[11.2491402988037，43.750277668555015]，[11.198620263028，43.75785529826899]，[11.2509518649749738，43.751621232262722493]，[11.24914029088037，43.75027766855555015]，[11.198620263028，43.75785526799]，[11.25259518649249738]，[11.2525518649226793]，[11.249140292988037，43.75027767668555015]，[11.198620263028，43.7578555529826899]，[11.25259518649649738]，[11.2525951864922622493]，[11.249140292988037，43.7500652672493]，[11.24914029088037，43.7502776766855555015]，[11.198620263028，43.[11.250562891152564，43.751940055106814]，[11.250844806161599，43.752116454510677]，[11.250976903611187，43.752184285854881]，[11.251025276742347，43.752394633135999]，[11.251095944135562，43.752551715399683]，[11.252075754111447，43.753064192693351]，[11.252260569522404，43.753162663730734]，[11.25229821634777，43.753302788154329]，[11.252042422884459，43.753607171300693]，[252089750740879，43.40053713535]，[11.25204670259305303，43.754152945071198]，[11.252404680629，43.7543428690690493]，[11.2520204242607171300693]，[252089750740879，43.40053713535]，[11.25204670259305303，43.754152945071198]，[11.25404680629，43.7543428690690493]，[11.2520204242607171300693]，[252089750740879，43.40053713535]，[11.25204670259305303，43.754152945071198]，[11.25404680629，43.7543428690490493]，[11.25202042422884459，43.753607171300693]，[252089750740879，43.40053713535]，[11.25204670259305303[11.251887408111035，43.754762904036816]}}， ......

推荐答案

您需要创建一个样式函数来处理此类情况。

所以让你的风格起作用：

 var styleFunction = function(feature) {
       console.log(feature);
     //now you can use any property of your feature to identify the different colors
     //I am using the ID property of your data just to demonstrate
      var color;
      if (feature.get("ID")==1){
      color = "red";
      } else if (feature.get("ID")==2){
      color = "green";
      } else {
     color = "black"; 
      }

      var retStyle =   new ol.style.Style({
          stroke: new ol.style.Stroke({ 
            color: color,
            width: 5
          })
        });
       return retStyle;

      };

然后将此函数指定给向量层的样式

var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: 'http://localhost/joggo_wp/percorsi.geojson'
            }),
            style: styleFunction     
        });

这里是fiddle

这篇关于要素集合中每个要素的不同颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！