Javascript Openlayers 3-创建自定义符号,如Openlayers 2->;OpenLayers.Renderer.symbol.anySymbol
在Javascript Openlayers 3-创建自定义符号,如Openlayers 2->;OpenLayers.Renderer.symbol.anySymbol,javascript,maps,gis,openlayers,openlayers-3,Javascript,Maps,Gis,Openlayers,Openlayers 3,在Openlayers v2中,我可以添加如下符号: OpenLayers.Renderer.symbol.pointToIcon = [100, 70, 20, 50, 42, 70, 20, 90]; 如何使用Openlayers 3实现这一点 在openlayers 3中,我可以使用此功能: var starSymbol = new ol.style.RegularShape({ points: 4, opacity: .5, radius: 10, ra
Openlayers v2
中,我可以添加如下符号:
OpenLayers.Renderer.symbol.pointToIcon = [100, 70, 20, 50, 42, 70, 20, 90];
如何使用Openlayers 3实现这一点
在openlayers 3
中,我可以使用此功能:
var starSymbol = new ol.style.RegularShape({
points: 4,
opacity: .5,
radius: 10,
radius2: 10 * .5,
angle: 130,
fill: new ol.style.Fill({
color: "blue"
}),
stroke: new ol.style.Stroke({
color: "red",
width: 1
})
});
我可以做其他的数字,但我不能做下面的数字
此外,我不使用“图标”,例如:
new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'data/icon.png'
}))
})
因为图标的颜色是固定的,我不能使用我需要的颜色
如果您能帮助我,我将不胜感激。您可以在画布上绘制自定义符号,并将其用作图标图像。OpenLayers为此提供了一个非常好的API。您可能需要查看以下示例: 对于您的特定符号,代码可能如下所示:
var canvas = document.createElement('canvas');
var render = ol.render.toContext(canvas.getContext('2d'),
{size: [50, 45]});
render.setFillStrokeStyle(
new ol.style.Fill({ color: 'red' }),
new ol.style.Stroke({ color: 'black' }));
render.drawPolygonGeometry(new ol.geom.Polygon(
[[[50, 35], [10, 25], [21,35], [10, 45], [50, 35]]]));
var style = new ol.style.Style({
image: new ol.style.Icon({
img: canvas,
imgSize: [canvas.width, canvas.height],
})
});