Openlayers 为目标范围以外的区域添加遮罩 gis

Openlayers 为目标范围以外的区域添加遮罩 gis

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

import Feature from "ol/Feature";
import {LinearRing,LineString, Point } from "ol/geom";
import { unByKey } from "ol/Observable";
// map,vector,drag 作为全局变量
import { map, vector, drag } from "./basicMap";

添加遮罩层

 let initLayer = new VectorLayer({
                        zIndex: 3,
                        source: new VectorSource(),
                        style: new Style({

                          stroke: new Stroke({
                            color:"#f4b49f",
                            // color:"rgba( 255, 255, 255, 1)",
                            width:3
                          }),
                          fill: new Fill({
                             color:"rgba( 255, 255, 255, 0.2)"//,
                            // color:"#f4b49f"
                          })
                        })
                      });
                      map.addLayer(initLayer);

为遮罩层添加数据

                    let linearRing = new LinearRing(rangeCoords);
                      let extent = [-180,-90,180,90];
                      let polygonRing = fromExtent(extent);
                      polygonRing.appendLinearRing(linearRing);

                      const convertFt = new Feature({
                        geometry: polygonRing
                      });
                      initLayer.getSource().addFeature(convertFt);