Openlayers3:如何在标记图标周围添加彩色边框?

问题描述

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

OpenLayers 3 renders's its marker icons as images on a canvas. Markers can have transparent background with non regular image icon. Is it possible to add a colored border of specific thickness and color using ol.interaction.Select?

推荐答案

因此，我能够通过修改图标像素操作示例.可以使用ol.interaction.select提供的styleFunction中的图标图像画布，并首先创建与icon形状相同的彩色填充，然后在其上写回icon，从本质上为图标提供彩色边框.看起来像这样:

So I was able to achieve this by modifying the Icon Pixel Operations example on the OpenLayers website. It is possible to work with the icon image canvas in the styleFunction that ol.interaction.select provides, and first create a colored fill of the same shape as icon, and then write icon back on it, essentially giving a colored border to the icon. Which looks like this:

非活动状态:

正在工作 CodePen .

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

这篇关于Openlayers3:如何在标记图标周围添加彩色边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！