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

Question

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

Answer 1

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

非活动状态：

工作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
        }))
      });

  }

完整代码：

 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); 

 <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>