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使用画布图案作为功能样式

回答

相关问题