Openlayers 3 如何使用样式而不使用贴图将OpenLayers 3功能渲染到画布?
问题: 如何使用样式而不使用贴图将要素渲染到画布 背景: 我有一个示例,它将一个几何体渲染到一个符合ol3风格的画布上,但它只在openlayers的未构建版本(ol debug.js)下运行,因为它使用了私有函数(ol.vec.Mat4) 另一种方法是创建地图,添加矢量图层,设置要素的样式,将要素添加到图层,并从地图中删除所有事件/控件,使其看起来像画布 第二个是使用 第三个类似于第二个,我负责在使用ol.render.toContext之前将几何体转换为像素坐标,如本文所示 我想那会让人筋疲力尽吗?还是有别的办法?Doh!在openlayers网站上找到了一个正确的链接 在该示例中,坐标已经是像素:Openlayers 3 如何使用样式而不使用贴图将OpenLayers 3功能渲染到画布?,openlayers-3,Openlayers 3,问题: 如何使用样式而不使用贴图将要素渲染到画布 背景: 我有一个示例,它将一个几何体渲染到一个符合ol3风格的画布上,但它只在openlayers的未构建版本(ol debug.js)下运行,因为它使用了私有函数(ol.vec.Mat4) 另一种方法是创建地图,添加矢量图层,设置要素的样式,将要素添加到图层,并从地图中删除所有事件/控件,使其看起来像画布 第二个是使用 第三个类似于第二个,我负责在使用ol.render.toContext之前将几何体转换为像素坐标,如本文所示 我想那会让人
<!DOCTYPE html>
<html>
<head>
<title>Render geometries to a canvas</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var vectorContext = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});
var fill = new ol.style.Fill({color: 'blue'});
var stroke = new ol.style.Stroke({color: 'black'});
var style = new ol.style.Style({
fill: fill,
stroke: stroke,
image: new ol.style.Circle({
radius: 10,
fill: fill,
stroke: stroke
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
vectorContext.drawGeometry(new ol.geom.Point([88, 88]));
</script>
</body>
</html>
以下是我的TRS逻辑:
function translate(points: number[][], vector: number[]) {
return points.map(p => vector.map((v, i) => v + p[i]));
}
function rotate(points: number[][], a: number) {
return points.map(p => {
let [x, y, cos, sin] = [p[0], p[1], Math.cos(a), Math.sin(a)];
return [
x * cos - y * sin,
x * sin + y * cos
];
});
}
function scale(points: number[][], vector: number[]) {
return points.map(p => vector.map((v, i) => v * p[i]));
}
和在OpenLayers API中可用,但不可用。
function render(canvas: HTMLCanvasElement, line: ol.Coordinate[], style: ol.style.Style) {
let extent = ol.extent.boundingExtent(line);
let [dx, dy] = ol.extent.getCenter(extent);
let [sx, sy] = [canvas.width / ol.extent.getWidth(extent), canvas.height / ol.extent.getHeight(extent)];
line= translate(line, [-dx, -dy]);
line= scale(line, [Math.min(sx, sy), -Math.min(sx, sy)]);
line= translate(line, [canvas.width / 2, canvas.height / 2]);
let feature = new ol.Feature({
geometry: new ol.geom.Polygon([line]),
style: style
});
let vtx = ol.render.toContext(canvas.getContext("2d"));
vtx.drawFeature(feature, style);
}
function translate(points: number[][], vector: number[]) {
return points.map(p => vector.map((v, i) => v + p[i]));
}
function rotate(points: number[][], a: number) {
return points.map(p => {
let [x, y, cos, sin] = [p[0], p[1], Math.cos(a), Math.sin(a)];
return [
x * cos - y * sin,
x * sin + y * cos
];
});
}
function scale(points: number[][], vector: number[]) {
return points.map(p => vector.map((v, i) => v * p[i]));
}