Openlayers 4使用畫布圖案作爲功能樣式

我正在使用最新的OL 4版本。我在地圖上有幾個功能（一家公司 - >一個功能）。每家公司都有一個類別，每個類別都有一種顏色。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 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({     
    fill: new ol.style.Fill({colorlike: color}) 
});

這個沒有工作，所以我試圖用圖像填充使用它：

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的寬度是多少？ –

你是如何繪製你的風格？ –

你可以讓你的填充模式正確工作，但這裏是用使用各種形狀和兩個矢量圖層的畫布生成模式工作的例子。

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

謝謝，今天晚上會試一下，你的建議是兩招 –

Openlayers 4使用畫布圖案作爲功能樣式

回答

相關問題