OpenLayer自定义区域显示
实现效果图如下
![image.png](https://i-blog.csdnimg.cn/blog_migrate/86eac931d2009875b660155d5ac0335f.png)
核心方法
funcation clipMap(){
var clipgeom = new ol.geom.Polygon(henan);
map.on('precompose', clip);
function clip(e) {
var canvas=e.context;
canvas.save();
var coords = clipgeom.getCoordinates();
createClip(coords[0], canvas);
canvas.clip();
}
function createClip(coords, canvas) {
canvas.beginPath();
for (var i = 0, cout = coords.length; i < cout; i++) {
var screenCoord = map.getPixelFromCoordinate(coords[i]);
var x = screenCoord[0],
y = screenCoord[1];
if (i === 0) {
canvas.moveTo(x, y);
} else {
canvas.lineTo(x, y);
}
}
canvas.closePath();
canvas.strokeStyle = "red";
canvas.lineWidth = 2;
canvas.stroke();
}
map.on('postcompose', function(event) {
var ctx = event.context;
ctx.restore();
});
}
注意:
地图初始化时需要注意选用的空间坐标系。
裁剪计算使用的是屏幕坐标,如果初始化的底图坐标是3857(投影坐标系),则需要使用坐标系转换。
clipMap - 4326.htm