Openlayers 4 verwenden Canvas-Muster für Feature-Stil

Ich verwende neueste OL 4-Version. Ich habe mehrere Funktionen auf der Karte (eine Firma -> eine Funktion). Jedes Unternehmen hat eine Kategorie und jede Kategorie hat eine Farbe.Openlayers 4 verwenden Canvas-Muster für Feature-Stil

Stil Feature

var style = new ol.style.Style({ 
    image: new ol.style.RegularShape({ 
     fill: new ol.style.Fill({color: color}), 
     stroke: new ol.style.Stroke({ color: 'black', width: 2 }), 
     points: 4, 
     radius: 10, 
     angle: Math.PI/4 
    }) 
});

Farbe ist eine einfache Zeichenfolge wie: "grün" oder "blau". Das funktioniert gut.

Aber es gibt Firmen mit mehr als einer Kategorie (max 2). Meine Idee war es, eine Leinwand Muster zu verwenden:

var canvas = document.createElement('canvas'); 
canvas.width = 10; 
canvas.height = 10; 
var context = canvas.getContext('2d'); 
context.fillStyle = "black"; 
context.fillRect(0, 0, 5, 5); 
context.fillStyle= "white"; 
context.fillRect(5,0,5,5);       
color = context.createPattern(canvas, "no-repeat");

Und dann verwenden Sie diese Farbe für den Stil des Merkmals:

var style = new ol.style.Style({     
    fill: new ol.style.Fill({colorlike: color}) 
});

dies so nicht funktioniert Ich habe versucht, es mit Bildfüllung zu verwenden:

var style = new ol.style.Style({ 
    image: new ol.style.RegularShape({ 
     fill: new ol.style.Fill({colorlike: color})     
    }) 
});

Dies hat auch nicht funktioniert. Farbe und Farbe wird nicht funktionieren

Wie verwende ich ein Canvas-Muster für eine OL-Funktion. Ich möchte nur ein Rechteck mit einer anderen Farbe jede Hälfte. Aber ich kann es nicht durch die OL API oder die Beispiele bekommen, weil sie alle Stil auf Layer oder Bildstil verwenden, aber nicht die genaue Art, wie ich es brauche ...

Irgendwelche Ideen?

Dank im Voraus

Quelle

2017-07-08 Cabe Skuriles

Haben Sie versucht, mit einer Breite von 5 zwei Schläge zu tun? –

Wie zeichnest du deine Stile? –

Sie Ihre Füllmuster korrekt auf immer arbeiten kann, aber hier ist ein funktionierendes Beispiel eine Leinwand erzeugte Muster unter Verwendung einer Vielzahl von Formen und zwei Vektorebenen verwenden.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Regular Shapes</title> 
 
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css"> 
 
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> 
 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 
 
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="map" class="map"></div> 
 
    <script> 
 
    /*var canvas = document.createElement('canvas'); 
 
canvas.width = 10; 
 
canvas.height = 10; 
 
var context = canvas.getContext('2d'); 
 
context.fillStyle = "black"; 
 
context.fillRect(0, 0, 5, 5); 
 
context.fillStyle= "white"; 
 
context.fillRect(5,0,5,5);       
 
color = context.createPattern(canvas, "no-repeat");*/ 
 

 
var canvas = document.createElement('canvas'); 
 
var context = canvas.getContext('2d'); 
 

 
var pixelRatio = ol.has.DEVICE_PIXEL_RATIO; 
 
var pattern = (function() { 
 
     canvas.width = 10; 
 
     canvas.height = 10 
 
     // white background 
 
     context.fillStyle = 'white'; 
 
     context.fillRect(0, 0, 5, 5); 
 
      context.fill(); 
 
     // outer circle 
 
     context.fillStyle = 'black'; 
 
     context.fillRect(5, 5, 5, 5); 
 
     context.fill(); 
 

 
     return context.createPattern(canvas, 'repeat'); 
 
     }()); 
 
    /*var vectorLayer = new ol.layer.Vector({ 
 
     source: new ol.source.Vector({ 
 
      url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson', 
 
      format: new ol.format.GeoJSON() 
 
     }), 
 
     style: getStackedStyle 
 
     });*/ 
 
     var getStackedStyle = function(feature, resolution) { 
 
     var id = feature.getId(); 
 
     fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern); 
 
     return style; 
 
     }; 
 
     var stroke = new ol.style.Stroke({color: 'black', width: 2}); 
 
     var fill = new ol.style.Fill(pattern); 
 
     var fill2 = new ol.style.Fill(); 
 
    /* fill2..setColor(patter);*/ 
 
     var style2 = new ol.style.Style({ 
 
      stroke: new ol.style.Stroke({ 
 
      color: '#333', 
 
      width: 2 
 
     }) 
 
     }); 
 
     fill.setColor(pattern); 
 
     var styles = { 
 
     'custom': style2, 
 
     'square': new ol.style.Style({ 
 
      image: new ol.style.RegularShape({ 
 
      fill: fill, 
 
      stroke: stroke, 
 
      points: 4, 
 
      radius: 10, 
 
      angle: Math.PI/4 
 
      }) 
 
     }), 
 
     'triangle': new ol.style.Style({ 
 
      image: new ol.style.RegularShape({ 
 
      fill: fill, 
 
      stroke: stroke, 
 
      points: 3, 
 
      radius: 10, 
 
      rotation: Math.PI/4, 
 
      angle: 0 
 
      }) 
 
     }), 
 
     'star': new ol.style.Style({ 
 
      image: new ol.style.RegularShape({ 
 
      fill: fill, 
 
      stroke: stroke, 
 
      points: 5, 
 
      radius: 10, 
 
      radius2: 4, 
 
      angle: 0 
 
      }) 
 
     }), 
 
     'cross': new ol.style.Style({ 
 
      image: new ol.style.RegularShape({ 
 
      fill: fill, 
 
      stroke: stroke, 
 
      points: 4, 
 
      radius: 10, 
 
      radius2: 0, 
 
      angle: 0 
 
      }) 
 
     }), 
 
     'x': new ol.style.Style({ 
 
      image: new ol.style.RegularShape({ 
 
      fill: fill, 
 
      stroke: stroke, 
 
      points: 4, 
 
      radius: 10, 
 
      radius2: 0, 
 
      angle: Math.PI/4 
 
      }) 
 
     }) 
 
     }; 
 

 

 
     var styleKeys = ['x', 'cross', 'star', 'triangle', 'square']; 
 
     var count = 250; 
 
     var features = new Array(count); 
 
     var e = 4500000; 
 
     for (var i = 0; i < count; ++i) { 
 
     var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; 
 
     features[i] = new ol.Feature(new ol.geom.Point(coordinates)); 
 
     features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]); 
 
     } 
 

 
     var source = new ol.source.Vector({ 
 
     features: features 
 
     }); 
 

 
    /* */var vectorLayer = new ol.layer.Vector({ 
 
     source: source, 
 
     style: getStackedStyle 
 
     }); 
 

 
     // Create a vector layer that makes use of the style function above… 
 
     var vectorLayer2 = new ol.layer.Vector({ 
 
     source: new ol.source.Vector({ 
 
      url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson', 
 
      format: new ol.format.GeoJSON() 
 
     }), 
 
     
 
     });/**/ 
 
     var map = new ol.Map({ 
 
     layers: [ 
 
      vectorLayer, vectorLayer2 
 
     ], 
 
     target: 'map', 
 
     view: new ol.View({ 
 
      center: [0, 0], 
 
      zoom: 2 
 
     }) 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

Quelle

2017-07-08 06:08:46

Danke, versuche es heute Abend und deinen Vorschlag mit zwei Strichen –

Openlayers 4 verwenden Canvas-Muster für Feature-Stil

Antwort

Verwandte Themen