有没有做衣服的网站吗,网站自适应开发,开发公司支付给业主的购房补贴,如何进行网站网站调试❝ 注#xff1a;当前使用的是 ol 9.2.4 版本#xff0c;天地图使用的key请到天地图官网申请#xff0c;并替换为自己的key 在WebGIS系统开发中#xff0c;有时候会遇到只需要展示某一图层特殊区域的需求#xff0c;通常情况下需要单独发一个地图服务#xff0c;但为了简… ❝ 注当前使用的是 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上下文对象即ctxconst 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()保存绘制前的状态如fillStylerestore()恢复绘制前的状态如fillStylestrokeStyle设置边线样式如strokeStylered或者strokeStyle#ddd或者strokeStyle(255,255,255,0.25)fillStyle设置填充样式,如fillStylered或者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/Jv5zhxG1wAoJUzDBe8XsrAcanvashttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing
OpenLayershttps://openlayers.org/en/v9.2.4/examples/layer-clipping-vector.html
