Question

如何更改我在地图上绘制的要素的颜色（随机或迭代特定数组）？

这是我的代码：

// marker layer
Msource = new ol.source.Vector();

markLayer = new ol.layer.Vector({
  source: Msource,
  style: new ol.style.Style({
    image: new ol.style.Icon({
      opacity: 0.95,
      src: 'http://www..../images/mapplot.png',
     color: "red"
    })
  })
});

我有一个按钮，当我点击它时，我可以使用以下代码绘制该标记：

var mark;
var counter = "true";

function addMark(Type) {

  counter = "true";

  mark = new ol.interaction.Draw({
    source: Msource,
    type: Type
  });

  // limit the marker to 4
  if (Msource.getFeatures().length < 4) {

    map.addInteraction(mark);

    // occurs when you finish to draw the current element
    mark.on("drawend", function(){
      counter = "true";
      drawingMarker();
    });

    // occurs just after you finish to draw the current element
    markLayer.on("change", function(){
      map.removeInteraction(mark);

      if (counter == "true") {
        counter = "false";
        var ind = Msource.getFeatures().length - 1;
        Msource.getFeatures()[ind].setId(MarkId - 1);
      }

    });

  } else {

    map.removeInteraction(mark);

    // show max marker message
    $(".maxmarkers").css("display", "inline");

  }

} // end addDraw


$("#Marker").click(function(e) {
  e.preventDefault();
  addMark("Point");
});

我使用了删除功能和拖动功能等其他功能，因此，我指定了递增的ID。

如何随机或通过数组更改标记的颜色（最大标记为4）？

这里有一个屏幕截图，显示当前的标记，标记不是red，因为我现在正在使用另一个图像，但我有另一个（总是png）根据颜色改变颜色在图层中。

Answer 1

在[{3}}

中回答我问题的Pavlos所有积分

var myColors = ['red','blue','green','yellow'];
var iterator = -1;

function styleFn(f){

var retSytle;


  if (typeof(f.get('styledwithcolor')) != 'undefined'){
  console.log("1",typeof(f.get('styledwithcolor')))

  retSytle = 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: f.get('styledwithcolor')
          })
        })
      });
  } else {
  console.log("2",typeof(f.get('styledwithcolor')))
  if (iterator == myColors.length-1){
  iterator =-1
  }
iterator = iterator + 1;
  f.set('styledwithcolor',myColors[iterator]);
  retSytle = 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: myColors[iterator]
          })
        })
      });
  console.log("retSytle",retSytle)
  }
  return [retSytle];
}

markLayer = new ol.layer.Vector({
  source: Msource,
  style: styleFn
});

OpenLayers 4造型绘制功能

1 个答案: