制作可以赚钱的网站网站页面设计如何收费
❝
注：当前使用的是 ol 9.2.4 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
在WebGIS系统开发中，有时候会遇到只需要展示某一图层特殊区域的需求，通常情况下需要单独发一个地图服务，但为了简化操作，可以利用OpenLayers进行图层遮罩与裁剪处理。
1. 图层遮罩
图层遮罩即为图层加上遮罩层，单独留出展示区域。结合canvas，通过上下文属性globalCompositeOperation和绘制方法可以方便的设置遮罩层。
1.1. 创建canvas元素
创建canvas元素，并将其添加到地图视图作为子元素，设置position为绝对定位，宽高与父元素相等，然后设置显示层级在父元素之上。
const { offsetWidth, offsetHeight } = map.getViewport()
overCanvas = document.createElement('canvas');
overCanvas.width = offsetWidth;
overCanvas.height = offsetHeight;
overCanvas.style.position = 'absolute';
overCanvas.style.top = '0';
overCanvas.style.left = '0';
overCanvas.style.zIndex = '99';
const ctx = overCanvas.getContext('2d');
map.getViewport().appendChild(overCanvas);
1.2. 设置遮罩层样式
fillStyle为填充色，strokeStyle为边线色，lineWidth为边线宽度。
const fillStyle = 'rgba(255,255,255,1)'
const strokeStyle = 'red'
const lineWidth = 3ctx.fillStyle = fillStyle;
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = lineWidth;
1.3. 绘制遮罩层
清除画布： 在绘制遮罩层之前需要使用clearRect方法清除画布。clearRect方法会将从左上角(0,0)开始，宽高为地图大小的矩形区域设置为透明黑色(rgb(0 0 0 / 0%))。
坐标转换： 使用map.getPixelFromCoordinate将地理坐标转换为屏幕坐标，对于地理坐标系，可以直接转换，若为投影坐标系，需要使用ol.proj.fromLonLat将其转为投影坐标，再转换为屏幕坐标。
绘制遮罩层：调用beginPath开始绘制路径，moveTo表示起点，lineTo表示绘制路径，绘制完成后使用closePath关闭路径，然后调用fill完成填充，第一个形状绘制完成，简称s1。然后使用rect绘制矩形，调用fill进行填充，第二个形状绘制完成，简称s2。在s1和s2之间设置globalCompositeOperation属性为source-out。globalCompositeOperatio = 'source-out'表示新形状为原来的形状s1和后面的形状s2不相交的部分。
绘制显示范围线： 使用stroke方法进行路径绘制。globalCompositeOperatio = 'source-over'表示新形状位于旧形状之上，显示层级更高。
// 清除画布
ctx.clearRect(0, 0, overCanvas.width, overCanvas.height)
const ynJSON = YNGeoJSON.features[0].geometry.coordinates[0][0]
const coords = ynJSON.map(coord => {// return map.getPixelFromCoordinate(ol.proj.fromLonLat(coord))return map.getPixelFromCoordinate(coord)
})// 绘制显示区域
ctx.beginPath();
coords.forEach((coord, index) => {index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
})
ctx.closePath();
ctx.fill();// 绘制遮罩层
ctx.globalCompositeOperation = 'source-out';
ctx.rect(0, 0, overCanvas.width, overCanvas.height)
ctx.fill();// 绘制路径
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
coords.forEach((coord, index) => {index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
})
ctx.closePath();
ctx.stroke()
方式一：先绘制显示区域，再绘制遮罩层，设置ctx.globalCompositeOperation = 'source-out'。
// 绘制显示区域
ctx.beginPath();
coords.forEach((coord, index) => {index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
})
ctx.closePath();
ctx.fill();ctx.globalCompositeOperation = 'source-out';// 绘制遮罩层
ctx.rect(0, 0, overCanvas.width, overCanvas.height)
ctx.fill();
方式二：先绘制遮罩层，再绘制显示区域，设置ctx.globalCompositeOperation = 'destination-out'。
// 绘制遮罩层
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fill();ctx.globalCompositeOperation = 'destination-out';// 绘制显示区域
ctx.beginPath();
coords.forEach((coord, index) => {index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
})
ctx.closePath();
ctx.fill();
方式二：先绘制遮罩层，再绘制显示区域，设置ctx.globalCompositeOperation = 'xor'。
// 绘制遮罩层
ctx.fillRect(0, 0, canvas.width, canvas.height)ctx.globalCompositeOperation = "xor";// 绘制显示区域
ctx.beginPath();
coords.forEach((coord, index) => {index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
})
ctx.closePath()
ctx.fill();
1.4. 取消遮罩
移除添加的遮罩元素即可取消遮罩。
/*** 取消遮罩*/
function cancelOverlay(overCanvas) {map.getViewport().removeChild(overCanvas);
}
2. 图层裁剪
2.1. 创建裁剪要素
在进行图层裁剪之前需要创建裁剪要素，可以通过GeoJSON数据构建裁剪要素区域。
const coords = YNGeoJSON.features[0].geometry.coordinates[0]
const clipFeature = new ol.Feature({geometry: new ol.geom.Polygon(coords),
})
2.2. 开启裁剪
创建图层裁剪方法，传递待裁剪图层和裁剪要素参数。监听裁剪图层渲染前和渲染后事件，在图层渲染前进行裁剪，渲染完成后恢复画布，并设置图层显示范围为裁剪区域。
/*** 创建裁剪* @param {ol.layer} clipLayer 需要裁剪的图层* @param {ol.feature} clipFeature 裁剪区域*/
function createClipByLayer(clipLayer, clipFeature) {// 监听图层渲染前事件，进行裁剪操作clipLayer.on("prerender", prerenderEvt)// 监听图层渲染后事件，进行画布恢复clipLayer.on("postrender", postrenderEvt)// 设置裁剪范围clipLayer.setExtent(clipFeature.getGeometry().getExtent())
}
**prerenderEvt** ： 图层渲染前处理事件
function prerenderEvt(event) {const vectorContext = ol.render.getVectorContext(event);event.context.globalCompositeOperation = 'source-over';const ctx = event.context;// 保存裁剪前画布状态ctx.save();// 绘制裁剪区域vectorContext.drawFeature(clipFeature, new ol.style.Style({stroke: new ol.style.Stroke({color: "red",width: 5,}),fill: new ol.style.Fill({color: "rgba(0, 0, 255, 0.25)",})}));ctx.clip();
}
**postrenderEvt** ： 图层渲染后处理事件
function postrenderEvt(event) {let ctx = event.context;// 恢复裁剪前画布状态ctx.restore();
}
2.3. 取消裁剪
取消裁剪操作前先移除裁剪图层，然后再将其添加到地图中，并取消地图渲染监听事件，最后设置地图全幅范围显示。
/*** 取消裁剪* @param {ol.layer} clipLayer 需要裁剪的图层* @param {ol.layer} fullExtentLayer 地图全图范围图层*/
function cancelClip(clipLayer,fullExtentLayer) {map.removeLayer(clipLayer)map.addLayer(clipLayer)// 设置图层显示层级clipLayer.setZIndex(-1)// 取消图层事件监听clipLayer.un("prerender", prerenderEvt)clipLayer.un("postrender", postrenderEvt)// 设置图层全幅显示clipLayer.setExtent(fullExtentLayer.getExtent())
}
3. 不成功的例子
在下面的代码中，我想通过监听地图事件precompose和postcompose来完成裁剪操作，这样就不用针对每个图层进行裁剪了。但是运行发现并没有达到理想的效果，有两个问题，一是坐标计算不对，应该是地理坐标转换为屏幕坐标不准确；二是裁剪后图层并没有只显示裁剪区域，随着地图放大、缩小或者拖动，其他区域也会显示出来。我暂时也没有想到更好的解决办法，等着以后再探究吧，也希望有想法的小伙伴可以指正一下。
/*** 开启裁剪*/
function startClip() {map.on("precompose", function (event) {const canvas = document.querySelector("canvas");const ctx = canvas.getContext("2d");ctx.save();ctx.reset()ctx.beginPath();const ynJSON = YNGeoJSON.features[0].geometry.coordinates[0][0]// ctx.rect(0, 0, canvas.width, canvas.height);const coords = ynJSON.map(coord => {return map.getPixelFromCoordinate(ol.proj.fromLonLat(coord,map.getView().getProjection()))})coords.forEach((coord, index) => {// const y = ol.render.getRenderPixel(event,coord[1])index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])})ctx.closePathctx.clip();ctx.globalCompositeOperation = 'source-over';ctx.beginPath();coords.forEach((coord, index) => {index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])})ctx.closePath();ctx.stroke()});map.on("postcompose", function (event) {const canvas = document.querySelector("canvas");const ctx = canvas.getContext("2d");ctx.restore()})
}
4. canvas小知识
现代前端二维地图库，区别于三维地图WebGL模式，基本上都是利用canvas进行渲染，所以了解一下canvas相关知识是有必要的。在使用canvas对象时，要进行其他操作前，必须要先获取canvas上下文对象，即ctx``const ctx = canvas.getContext("2d")下面介绍一些绘制方法和属性：
| 方法名称 | 作用 |
|---|---|
clearRect(x, y, width, height) | 创建从左上角(x,y)开始，宽高为width和height的黑色透明矩形区域 |
fill() | 根据fillStyle填充绘制区域 |
stroke() | 根据给定strokeStyle绘制边线 |
rect(x, y, width, height) | 绘制从左上角(x,y)开始，宽高为width和height的矩形，需要结合fill()和stroke使用 |
fillRect(x, y, width, height) | 根据fillStyle绘制从左上角(x,y)开始，宽高为width和height的矩形 |
moveTo(x, y) | 根据坐标(x,y)为起点开始路径绘制 |
lineTo(x, y) | 绘制从上一个点到给定坐标(x,y)的直线，结合fill()和stroke将路径添加到canvas上 |
clip() | 裁剪给定区域。由于裁剪的不可恢复性，在裁剪开始前需要使用save保存状态，裁剪完成后使用restore进行恢复 |
reset() | 重置绘制路径以及样式等 |
save() | 保存绘制前的状态，如fillStyle |
restore() | 恢复绘制前的状态，如fillStyle |
strokeStyle | 设置边线样式，如strokeStyle="red"或者strokeStyle="#ddd"或者strokeStyle="(255,255,255,0.25)" |
fillStyle | 设置填充样式,如fillStyle="red"或者fillStyle="#ddd"或者fillStyle="(255,255,255,0.25)" |
全局合成属性：globalCompositeOperation我将现有画布内容简称为旧形状，新绘制对象为新形状。
| 属性值 | 作用 |
|---|---|
"source-over" | 默认设置，绘制的新形状在旧形状之上 |
"source-in" | 新形状仅在新形状和目标画布重叠的地方绘制。其他透明。 |
"source-out" | 新形状在新形状与旧形状没有重叠的地方进行绘制（绘制非重叠区域） |
"source-atop" | 新形状仅绘制与旧形状重叠的区域（绘制重叠区域） |
"destination-over" | 绘制的新形状在旧形状之下 |
"destination-in" | 旧形状仅在新形状和目标画布重叠的地方绘制。其他透明。 |
"destination-out" | 绘制旧形状与新形状的非重叠区域 |
"destination-atop" | 现有画布仅保留与新形状重叠的区域。新形状绘制在画布内容后面。 |
"copy" | 只显示新形状 |
"xor" | 新旧形状相交的区域为透明，其他区域正常显示 |
5. 参考知识
牛老师：https://mp.weixin.qq.com/s/Jv5zhxG1wAoJUzDBe8XsrAcanvas：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing
OpenLayers：https://openlayers.org/en/v9.2.4/examples/layer-clipping-vector.html