渐变还有些问题需要晚上
引入

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

这块有两个部分的json数据 一个是全陕西省不包括市区的 一个是包括市区的
代码如下

<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 sxs from "@/views/json/sx.json";
import sx from "@/views/json/sx1.json";
import GeoJSON from "ol/format/GeoJSON";
import Polygon, { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing';

export default {
  name: "FirstMap",
  data() {
    return {
      map: null,
      draw: null,
      maskLayer: null,
      logo,
      layers: [],
      polygonFeatureList: [],
    };
  },
  methods: {
    initMap() {
      let that = this;
      // 将图标样式应用到点要素
      const features = [];
      const point = new Point([108.56, 34.15]); // 修改坐标格式
      const feature = new Feature({
        geometry: point,
        custom: { data: "123", type: "icon" },
        type: "icon",
      });
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: this.logo,
            // size: [40, 40],
            scale: 0.2, // 图标缩放比例
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const source = new VectorSource({
        features,
      });
      let markLayerPoints = new VectorLayer({
        source: source,
      });

      let map = new Map({
        target: "vue-openlayers",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",
            }),
          }),
          markLayerPoints, // 确保图层顺序正确
          // vectorLayers,
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [108.56, 34.15], // 修改中心坐标格式
          zoom: 6,
        }),
      });

      this.map = map;
      that.showSFArea() // 蓝色蒙层
      this.addAreaBoundary3();
    },
    addAreaBoundary3() {
    let that = this;
    that.removeFun("highLightLayer");
      sxs.features.forEach((item, index) => {
      that.addBoundary3(item, index);
    });
  },
  createGradientStyle(text1,adcode) {  
            const canvas = document.createElement('canvas');  
            const context = canvas.getContext('2d');  
            console.log(adcode,'adcode11111');
            // 创建渐变  
            let gradient = context.createLinearGradient(0, 0, 0, 256);  
            // gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // 渐变开始颜色  
            // gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // 渐变结束颜色  
            
            gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // 渐变开始颜色  
            gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // 渐变结束颜色  

            console.log(gradient,'gradient--------')

            // 创建渐变样式  
            // return new Style({  
            //     fill: new Fill({  
            //         color: gradient  
            //     }),  
            //     stroke: new Stroke({  
            //         color: 'black',  
            //         width: 1,  
            //     }),  
            // }); 
            
            return new Style({
        stroke: new Stroke({
          width: 2,
          color: "#65E6F9",
        }),
        fill: new Fill({
          color: gradient,
        }),
           text: new Text({
          text: text1.length > 5 ? text1.substring(0, 5) + '\r\n' + text1.substring(5):text1, // 文字内容
          fill: new Fill({
            color: "#fff"
          }),
          font: 120 / 10 + "px arial",
          overflow: true // 允许文本超出边界
        })
      })
        },
   // 行政区域标记颜色
   addBoundary3 (item, inx, type) {
    const that = this;
    that.removeFun("areaShape" + inx);
    var bdary = item.geometry.coordinates[0];
    let params = {};
    var text = item.properties.name;
    var adcode = item.properties.adcode;
    // const temp = that.countyData.filter(c => c.name === item.properties.name);
    // if (temp.length > 0) {
    //   params = temp[0]
    // }
    const polygonFeature = new Feature({
      name: text,
      // type: "polygon",
      type: item.geometry.type,
      geometry: new Polygon(bdary),
      // geometry: new MultiPolygon(item.geometry.coordinates),
      // params: params,
      // style: that.createGradientStyle() // 蓝色渐变
    });
    polygonFeature.setStyle(
      that.createGradientStyle(text,adcode) // 蓝色渐变
      // new Style({
      //   stroke: new Stroke({
      //     width: 2,
      //     color: "#65E6F9",
      //   }),
      //   fill: new Fill({
      //     color: "rgba(7,58,122,1)",
      //   }),
      //   text: new Text({
      //     text: text.length > 5 ? text.substring(0, 5) + '\r\n' + text.substring(5):text, // 文字内容
      //     fill: new Fill({
      //       color: "#fff"
      //     }),
      //     font: 120 / 10 + "px arial",
      //     overflow: true // 允许文本超出边界
      //   })
      // })
    );
    const polygonLayer = new VectorLayer({
      abc: '11111111',
      id: "areaShape" + inx,
      index: 10,
      source: new VectorSource({
        features: [polygonFeature],
      }),
    });
    that.polygonFeatureList.push(polygonLayer);
    that.map.addLayer(polygonLayer);
  },
    // 移除图层方法
    removeFun(layerId) {
      const that = this;
      const selArr = that.map.getLayers().getArray(); // 获取所有图层
      selArr.map((item, index) => {
        if (item.values_?.id == layerId) {
          // 移除图层
          that.map.removeLayer(selArr[index]);
        }
      });
    },

    // 创建蒙层，凸显区域
    showSFArea() {
      const initLayer = new VectorLayer({
        name: "blueLayer",
        // zIndex: 1,
        // opacity: 0.6,
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(3, 44, 79, 1)",
          }),
          stroke: new Stroke({
            color: "rgba(0,0,0,0.8)",
            width: 1
          })
        }),
      });
      this.map.addLayer(initLayer);

      this.addConver(initLayer);
    },
    // 添加遮罩
    addConver(converLayer) {
      let codeJson = sx;
      var fts = new GeoJSON().readFeatures(codeJson);
      const ft = fts[0];
      const converGeom = this.erase(ft.getGeometry());
      const convertFt = new Feature({
        geometry: converGeom,
      });
      converLayer.getSource().addFeature(convertFt);
    },

    // 擦除操作，生产遮罩范围
    erase(geom) {
      const extent = [-180, -90, 180, 90];
      const polygonRing = fromExtent(extent);
      const coords = geom.getCoordinates();
      coords.forEach((coord) => {
        const linearRing = new LinearRing(coord[0]);
        polygonRing.appendLinearRing(linearRing);
      });
      return polygonRing;
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped lang="scss">
.input {
  position: fixed;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 5px;
  padding-bottom: 10px;

  > * {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
}
</style>

<style scoped lang="scss">
.container {
  position: relative;

  .btn {
    position: absolute;
    left: 4%;
    top: 1%;
  }
}

#vue-openlayers {
  width: 100vw;
  height: 100vh;
}

h3 {
  line-height: 40px;
}

/* 隐藏信息盒子的初始样式 */
#info-box {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid black;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>