集群中具有不同颜色的标记。打开第3层

时间:2017-10-11 07:30:30

标签: javascript openlayers openlayers-3

早上好:

我正在使用Open Layer 3来显示地图。我正在通过Cluster添加标记。这个想法是根据大小加入标记。 enter image description here

因此。我想添加不同颜色的标记。

在我的功能中,当我打印标记时,我可以获得图标,它们是不同的。让我来表明一下。

var featured = feature.get('features');

var icon = featured [0] [“R”] ['icon'];

icon =“http://localhost:8000/img/icons/user_yellow.png

但是,群集只显示“http://localhost:8000/img/icons/user_blue.png

他们是我的职责:

 // this function computes a text style
    // based on the size of a cluster
    // the style is cached
    function getTextStyle(text) {
      var key = 'text' + text;

      if (!cache[key]) {
      if(text == 1){
        cache[key] = new ol.style.Style({
          text: new ol.style.Text({
            font: '22px sans-serif',
            text: text,
            textBaseline: 'alphabetic',
            offsetY: 15,
            fill: new ol.style.Fill({
              color: 'transparent'
            })
          })
        });
      }else{
         cache[key] = new ol.style.Style({
          text: new ol.style.Text({
            font: '22px sans-serif',
            text: text,
            textBaseline: 'alphabetic',
            offsetY: 15,
            fill: new ol.style.Fill({
              color: 'black'
            })
          })
        });     
      }
     }
      return cache[key];
    }



    // this function computes a circle style
    // based on the size of a cluster
    // the style is cached.
    function getCircleStyle(size,icon) {
      var key = 'circle' + size;     
      if (!cache[key]) {
        cache[key] = new ol.style.Style({
           image: new ol.style.Icon(({
            anchor: [0.5, 1],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            opacity: 1,
            src: icon,
           }))
        });
      }
      return cache[key];
    }


    // the style function for the cluster layer combines
// a circle and a text style based on the size of the cluster
function clusterStyle(feature, resolution) {

  var size = feature.get('features').length;
  var featured = feature.get('features'); 
  var icon = featured[0]["R"]['icon'];
  var pointStyle = getCircleStyle(size,icon);
  var textStyle = getTextStyle(size.toString());
  return [pointStyle, textStyle];
}

我不知道为什么这个功能会向我显示只有一种颜色的图标。

这是我的VectorLayer

var vectorLayer = new ol.layer.Vector({   source:clusterSource,   style:clusterStyle });

0 个答案:

没有答案