Openlayers 4はフィーチャスタイルにキャンバスパターンを使用します

私は最新のOL 4バージョンを使用しています。私はマップ上にいくつかの機能を持っています（1つの会社 - > 1つの機能）。各企業にはカテゴリがあり、各カテゴリには1つの色があります。 "緑" または "青"：カラーOpenlayers 4はフィーチャスタイルにキャンバスパターンを使用します

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

機能の

スタイルのような単純な文字列です。これは問題なく動作しています。

しかし、複数のカテゴリ（最大2）を持つ企業があります。これは、私は画像の塗りつぶしでそれを使用しようとした動作しませんでした

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

：その後、

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 style = new ol.style.Style({ 
    image: new ol.style.RegularShape({ 
     fill: new ol.style.Fill({colorlike: color})     
    }) 
});

これも機能しませんでした。色と色の組み合わせが機能しない

どのようにOL機能にキャンバスパターンを使用しますか？私はちょうど半分ごとに異なる色の四角形がほしいと思う。しかし、彼らはすべてレイヤーやイメージスタイルでスタイルを使用するので、私はそれが必要な正確な方法ではなく、OLのAPIや例でそれを得ることはできません...

アイデア？あなたがここにあなたの塗りつぶしパターンが正しい得る上で動作することができますが、事前

出典

2017-07-08 Cabe Skuriles

あなたは5の幅を持つ2つのストロークをやってみましたか？ –

どのようにあなたのスタイルを描いていますか？ –

に

おかげで形と2つのベクトル層のさまざまな方法を使ってキャンバス生成されたパターンを使用した実施例です。

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

出典

2017-07-08 06:08:46

ありがとうございます、今晩、2ストロークであなたの提案を試してみましょう –

Openlayers 4はフィーチャスタイルにキャンバスパターンを使用します

答えて

関連する問題