修改于2021/1/17
公共地图资源基本都是全国范围或者全球范围数据，但具体业务需求往往只是需要显示局部范围或者局部高亮显示。本案例基于Openlayers实现世界地图内蒙古区域的局部显示以及呼伦贝尔、阿荣旗的高亮显示。
1、地图局部显示
- 加载天地图影像图层、道路中文注记图层。
- 道路中文注记图层渲染后根据内蒙古边界范围进行局部裁剪。此处使用canvas的复合操作（globalCompositeOperation），在源图像中显示目标图像（destination-in）。
- 示例代码
layer.on("postrender", function (e) {
let vectorContext = getVectorContext(e);
e.context.globalCompositeOperation = 'destination-in';
// feature 为内蒙古面要素
vectorContext.drawFeature(feature, new Style({
fill: new Fill({
color: 'black',// 必需设置颜色
})
}));
e.context.globalCompositeOperation = 'source-over';
});
2、地图局部高亮
- 创建新的画布，大小与当前视图窗口大小一致。
- 新的画布填充阴影图形。
- 根据呼伦贝尔或阿荣旗边界坐标，在新画布上绘制区域图形。
- 新画布中显示区域图形外的阴影图形，即区域图形透明显示。
- 将新画布图形填充到地图图层画布上。
- 示例代码
//points: 呼伦贝尔或阿荣旗边界坐标
//ctx:地图图层画布
heightLight(points, ctx) {
let canvas = ctx.canvas;
let onePageCanvas = document.createElement('canvas');
onePageCanvas.setAttribute('width', String(canvas.width));
onePageCanvas.setAttribute('height', String(canvas.height));
let ctx_ = onePageCanvas.getContext('2d');
ctx_.rect(0, 0, canvas.width, canvas.height);
ctx_.fillStyle = "rgba(3,24,51,0.60)";
ctx_.fill();
ctx_.globalCompositeOperation = 'destination-out';
ctx_.beginPath();
for (let i = 0, cout = coords.length; i < cout; i++) {
// 获取屏幕坐标
let screenCoord = this.map.getPixelFromCoordinate(coords[i]);
let x = screenCoord[0];
let y = screenCoord[1];
if (i === 0) {
ctx_.moveTo(x, y);
} else {
ctx_.lineTo(x, y);
ctx_.lineTo(x, y);
}
}
ctx_.closePath();
ctx_.fill();
let patten = ctx.createPattern(onePageCanvas, "no-repeat");
ctx.fillStyle = patten;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
