openlayers开发内容中一些比较新奇需求的实现方式示例：
调用canvas绘制几何图形
<!DOCTYPE html>
<html>
<head>
<title>Render geometries to a canvas</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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.6.5/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: [window.innerWidth, window.innerHeight]});
var fill = new ol.style.Fill({color: 'red'});
var stroke = new ol.style.Stroke({color: 'green'});
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]));
//绘制图标点要素
var ratation = marker.getProperties().ANGLE * Math.PI / 180;
var carPoi = new ol.geom.Point([car.x, car.y]);
var carStyle = new ol.style.Style({
image: new ol.style.Icon({
img: img,
scale: 1,
imgSize: [15,25],// 需要声明图片的大小，cancas绘制必要参数
size: [15,25],// 需要声明大小，cancas绘制必要参数
rotation: ratation
})
});
vectorContext.drawFeature(new ol.Feature({geometry:carPoi}),carStyle);
</script>
</body>
</html>
25
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
