vue2+OpenLayers 天地图上凸显出当前地理位置区域（4）

凸显出当前区域 需要当前地方的json数据 这个可以在阿里的这个阿里

看下效果图

遮盖层的逃命都是可以调的
引入 下面一段代码

import sx from "@/views/json/sx1.json"; //  下载的json
import GeoJSON from "ol/format/GeoJSON";  // ol的一些方法
import Polygon, {
    fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing';

<template>
  <div class="container">
    <div id="vue-openlayers" class="map-x"></div>
    <div
      id="info-box"
      class="info-box"
      style="width: 100px; height: 100px"
    ></div>
    <div id="canv" style="width: 100px; height: 100px"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import {
    Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import {
    Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import {
    Point, LineString } from "ol/geom";
import {
    Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";


import sx from "@/views/json/sx1.json";
import GeoJSON from "ol/format/GeoJSON";
import Polygon, {
    fromExtent } from "ol/geom/Polygon";
import