Openlayers3：如何在标记图标周围添加彩色边框？

Question

OpenLayers 3将其标记图标渲染为画布上的图像。标记可以具有透明背景和非常规图像图标。是否可以使用ol.interaction.Select添加特定厚度和颜色的彩色边框？

Answer 1

所以我通过修改OpenLayers网站上的Icon Pixel Operations示例来实现这一目标。可以使用styleFunction提供的ol.interaction.select中的图标图像画布，并首先创建与图标相同形状的彩色填充，然后在其上写回图标，基本上为彩色边框到图标。看起来像这样：

非活跃状态：

工作CodePen。

以下是修改后的样式功能：

style: function(feature) {
    var image = feature.get('style').getImage().getImage();

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var activeColor = "red"; //set border color
      var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
          s = 2,  // thickness scale
          i = 0,  // iterator
          x = 2,  // final x position
          y = 2;  // final y position

      //set new canvas dimentions adjusted for border
      canvas.width = image.width + s + s;
      canvas.height = image.height + s + s;

      // draw images at offsets from the array scaled by s
      for(; i < dArr.length; i += 2)
      ctx.drawImage(image, x + dArr[i]*s, y + dArr[i+1]*s);

      // fill with color
      ctx.globalCompositeOperation = "source-in";
      ctx.fillStyle = activeColor;
      ctx.fillRect(0,0,canvas.width, canvas.height);

      // draw original image in normal mode
      ctx.globalCompositeOperation = "source-over";
      ctx.drawImage(image, x, y,image.width, image.height);

      //create new openlayers icon style from canvas
      return new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          crossOrigin: 'anonymous',
          src: undefined,
          img: canvas,
          imgSize: canvas ? [canvas.width, canvas.height] : undefined
        }))
      });

  }

完整代码：

＆＃13;

＆＃13;

function createStyle(src, img) {
  return new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      crossOrigin: 'anonymous',
      src: src,
      img: img,
      imgSize: img ? [img.width, img.height] : undefined
    }))
  });
}

var iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
iconFeature.set('style', createStyle('https://openlayers.org/en/v4.2.0/examples/data/icon.png', undefined));

var map = new ol.Map({
  layers: [
     new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      style: function(feature) {
        return feature.get('style');
      },
      source: new ol.source.Vector({features: [iconFeature]})
    })
  ],
  target: document.getElementById('map'),
  view: new ol.View({
    center: [0, 0],
    zoom: 3
  })
});


var select = new ol.interaction.Select({
  style: function(feature) {
    var image = feature.get('style').getImage().getImage();

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var activeColor = "red"; //set border color
      var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
          s = 2,  // thickness scale
          i = 0,  // iterator
          x = 2,  // final x position
          y = 2;  // final y position
      
      //set new canvas dimentions adjusted for border
      canvas.width = image.width + s + s;
      canvas.height = image.height + s + s;
    
      // draw images at offsets from the array scaled by s
      for(; i < dArr.length; i += 2)
      ctx.drawImage(image, x + dArr[i]*s, y + dArr[i+1]*s);
    
      // fill with color
      ctx.globalCompositeOperation = "source-in";
      ctx.fillStyle = activeColor;
      ctx.fillRect(0,0,canvas.width, canvas.height);
    
      // draw original image in normal mode
      ctx.globalCompositeOperation = "source-over";
      ctx.drawImage(image, x, y,image.width, image.height);
    
      //create new openlayers icon style from canvas
      return new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          crossOrigin: 'anonymous',
          src: undefined,
          img: canvas,
          imgSize: canvas ? [canvas.width, canvas.height] : undefined
        }))
      });
    
  }
});
map.addInteraction(select);

＆＃13;

<link href="https://openlayers.org/en/v4.2.0/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>

<div id="map" class="map"></div>

＆＃13;

＆＃13;

＆＃13;