OpenLayer自定义区域显示

OpenLayer自定义区域显示

实现效果图如下

核心方法

funcation clipMap(){
           var clipgeom = new ol.geom.Polygon(henan);
           //将经纬度坐标转换为map对应的坐标（如果初始化的底图坐标是3826，需要使用坐标系转换）
           //clipgeom = clipgeom.transform("EPSG:4326", map.getView().getProjection());
           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";//color
               canvas.lineWidth = 2;//width
               canvas.stroke();//render
           }
   
           map.on('postcompose', function(event) {
               var ctx = event.context;
               ctx.restore();
           });
}

注意：

地图初始化时需要注意选用的空间坐标系。
裁剪计算使用的是屏幕坐标，如果初始化的底图坐标是3857(投影坐标系)，则需要使用坐标系转换。

clipMap - 4326.htm