From 47bb60f2968445635b46debebdfa235e222826a5 Mon Sep 17 00:00:00 2001
From: songyumeng <songyumeng@supermap.com>
Date: Tue, 22 May 2018 11:22:35 +0800
Subject: [PATCH] Add support for fill-pattern

---
 stylefunction.js | 45 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/stylefunction.js b/stylefunction.js
index 65888aa8..000ea770 100644
--- a/stylefunction.js
+++ b/stylefunction.js
@@ -302,7 +302,7 @@ export default function(olLayer, glStyle, source, resolutions, spriteData, sprit
   const textColor = new Fill();
 
   const iconImageCache = {};
-
+  const patternCache = {};
   const styles = [];
 
   const styleFunction = function(feature, resolution) {
@@ -337,7 +337,48 @@ export default function(olLayer, glStyle, source, resolutions, spriteData, sprit
         let color, opacity, fill, stroke, strokeColor, style;
         const index = layerData.index;
         if (type == 3) {
-          if (!('fill-pattern' in paint) && 'fill-color' in paint) {
+          opacity = getValue(layerId, paint, 'fill-opacity', zoom, properties);
+          if ('fill-pattern' in paint) {
+            const fillIcon = getValue(layerId, paint, 'fill-pattern', zoom, properties);
+            if (fillIcon) {
+              const icon = fromTemplate(fillIcon, properties);
+              if (spriteImage && spriteData && spriteData[icon]) {
+                ++stylesLength;
+                style = styles[stylesLength];
+                if (!style || !style.getFill() || style.getStroke() || style.getText()) {
+                  style = styles[stylesLength] = new Style({
+                    fill: new Fill()
+                  });
+                }
+                fill = style.getFill();
+                style.setZIndex(index);
+                const icon_cache_key = icon + '.' + opacity;
+                let pattern = patternCache[icon_cache_key];
+                if (!pattern) {
+                  const spriteImageData = spriteData[icon];
+                  const canvas = document.createElement('canvas');
+                  canvas.width = spriteImageData.width;
+                  canvas.height = spriteImageData.height;
+                  const ctx = canvas.getContext('2d');
+                  ctx.globalAlpha = opacity;
+                  ctx.drawImage(
+                    spriteImage,
+                    spriteImageData.x,
+                    spriteImageData.y,
+                    spriteImageData.width,
+                    spriteImageData.height,
+                    0,
+                    0,
+                    spriteImageData.width,
+                    spriteImageData.height
+                  );
+                  pattern = ctx.createPattern(canvas, 'repeat');
+                  patternCache[icon_cache_key] = pattern;
+                }
+                fill.setColor(pattern);
+              }
+            }
+          } else if ('fill-color' in paint) {
             opacity = getValue(layerId, paint, 'fill-opacity', zoom, properties);
             color = colorWithOpacity(getValue(layerId, paint, 'fill-color', zoom, properties), opacity);
             if (color) {