openlayer+Vue地图显示遮罩效果

openlayer+Vue地图显示遮罩效果

前言

数据为json格式的边界经纬度，采用线创建一个矢量图层，设置一个屏幕范围，然后根据屏幕范围创建一个polygon，再将点做成一个点数组，添加进lineRing，并由此创建一个lineRing,然后再将lineRin添加进polygon，由此形成了一个遮罩面。

二、使用步骤

1.引入库

import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';
import Geometry from 'ol/geom/Geometry';
import { fromExtent } from 'ol/geom/Polygon';
import LinearRing from 'ol/geom/LinearRing';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';

2.创建矢量图层

  var mystyle = new Style({
      fill: new Fill({
        color: "rgba(72,61,139)",
      }),
      stroke: new Stroke({
        color: "#BDBDBD",
        width: 2
      })
    });
    this.converLayer = new VectorLayer({
      source: new VectorSource(),
      style: mystyle
    });
    var dataURL = require('../../assets/json/测试.json')
    this.addconver(dataURL);
    this.map.addLayer(this.converLayer);

3.两个主要方法

这里主要是读取json文件，获取点坐标

  addconver(data) {
    var fts = new GeoJSON().readFeatures(data);
    var ft = fts[0];
    var converGeom = this.erase(ft.getGeometry());
    console.log(converGeom)
    var convertFt = new Feature({
      geometry: converGeom
    })
    console.log(this.converLayer)
    this.converLayer.getSource().addFeature(convertFt);
  }

这里的sitePoints就是点数据的数组，每个json文件的格式不一样，所以一定要找到经纬度的表示格式

 erase(geom) {
    debugger
    var extent = [-180, -90, 180, 90];
    var polygonRing1 = fromExtent(extent)
    var coords = geom.getCoordinates();
    var sitePoints = [];
    for (let i = 0; i < coords[0].length; i++) {
      sitePoints.push([coords[0][i][0], coords[0][i][1]])
    }
    sitePoints.push(sitePoints[0]);
    var linearRing1 = new LinearRing(sitePoints);
    polygonRing1.appendLinearRing(linearRing1);
    console.log("源数据:", polygonRing1.getLinearRing())
    return polygonRing1;
  }

结果为

有轻微改动，转载: https://blog.csdn.net/u012413551/article/details/88937819.