openlayers行政区划分其他区域遮盖

1. 山东省遮盖层工具JS

/**
 * 资源包引入
 */
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import LinearRing from "ol/geom/LinearRing";
import Fill from "ol/style/Fill";
import { Feature } from "ol";
import { fromExtent } from "ol/geom/Polygon";
import { Style,  Stroke } from "ol/style";



/**
 * 私有方法
 */
function _coverLayer(url,map) {
  request({
    url: url,
    method: "GET",
    dataType: "json",
    success: (res) => {
      var converGeom = _erase(res.data.features[0].geometry);
      var convertFt = new Feature({
        geometry: converGeom,
      });
      var mystyle = new Style({
        fill: new Fill({
          color: "rgba(0,0,0, 0.2)",
        }),
        stroke: new Stroke({
          color: "#BDBDBD",
           2,
        }),
      });
      let converLayer = new VectorLayer({
        source: new VectorSource(),
        style: mystyle,
      });
      converLayer.getSource().addFeature(convertFt);
      map.addLayer(converLayer);
    },
  });
}


function _erase(geom) {
  var extent = [-180, -90, 180, 90];
  var polygonRing = fromExtent(extent);
  var coords = geom.coordinates;
  coords.forEach((coord) => {
    var linearRing = new LinearRing(coord[0]);
    polygonRing.appendLinearRing(linearRing);
  });
  return polygonRing;
}



/**
 * 山东省
 */
export const shandong = {
  init(map) {
    _coverLayer('/static/city/shandongsheng.json', map)
    map.getView().setCenter([116.98360411285401,36.654264296423754])
    map.getView().setZoom(7)
  }
}

注： request请求是axios 已经做了封装。如果需要封装demo可查看作者的其他文章。

如果需要其他省市的json数据可去阿里云获取JSON文件

http://datav.aliyun.com/tools/atlas

代码使用的结构是不包含子区域的，如果需要进行区划分需要修改_coverLayer方法