Openlayers 4将画布模式用于要素样式

Question

我正在使用最新的OL 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或示例来获得它，因为它们都使用图层或图像样式上的样式，但是不是我需要的确切方式...

有任何想法吗？

提前致谢

Answer 1

您可以努力使填充图案正确，但这是一个使用画布生成的图案的工作示例，该图案使用各种形状和两个矢量层。

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

Openlayers 4将画布模式用于要素样式

问题描述

1 个解决方案

解决方案1
0 2017-07-08 06:08:46

Openlayers 4将画布模式用于要素样式

问题描述

1 个解决方案

解决方案1 0 2017-07-08 06:08:46

解决方案1
0 2017-07-08 06:08:46