SOURCE

const country = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'gray',
    width: 1,
  }),
  fill: new ol.style.Fill({
    color: 'rgba(20,20,20,0)',
  }),
});
const selectedCountry = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'rgba(200,20,20,0.8)',
    width: 2,
  }),
  fill: new ol.style.Fill({
    color: 'rgba(200,20,20,0.4)',
  }),
});

const selectedCountry1 = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'rgba(20,210,20,0.8)',
    width: 2,
  }),
  fill: new ol.style.Fill({
    color: 'rgba(20,202,20,0.4)',
  }),
});

const selectedCountry2 = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'rgba(205,200,20,0.8)',
    width: 2,
  }),
  fill: new ol.style.Fill({
    color: 'rgba(205,200,20,0.4)',
  }),
});

// lookup for selection objects
let selection = {
  "河北省": selectedCountry,
  "山东省": selectedCountry1,
  "山西省": selectedCountry2,

};

 

var vectorLayer1 = new ol.layer.VectorTile({
    // declutter: true,
    source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        url: "https://tiles.kye-erp.com/maptile-dispatch/data/kye_admin_pro/{z}/{x}/{y}.pbf"
        // url: "https://tiles.kye-erp.com/maptile-dispatch/data/kye_admin_city/{z}/{x}/{y}.pbf"
        // url: "https://tiles.kye-erp.com/maptile-dispatch/data/kye_admin_county/{z}/{x}/{y}.pbf"
        // url: "https://tiles.kye-erp.com/maptile-dispatch/data/kye_admin_town/{z}/{x}/{y}.pbf"
        // url: "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf"
    }),
    // style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)function (feature) {
    style: country
})

var map = new ol.Map({
    target: 'map',
    layers: [
        // new ol.layer.Tile({
        //     source: new ol.source.OSM()
        // }),
        // vectorLayer,
        vectorLayer1
    ],
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        multiWorld: true,
        // projection: 'EPSG:3857',
        // center: new ol.proj.transform([116.39123296750768, 39.907180309385694], 'EPSG:4326', 'EPSG:3857'),
        // zoom: 8
    })
});

// Selection
const selectionLayer = new ol.layer.VectorTile({
  map: map,
  renderMode: 'vector',
  source: vectorLayer1.getSource(),
  style: function (feature) {
    if (feature.getProperties().admin_name in selection) {
      return selection[feature.getProperties().admin_name];
    }
  },
});

map.on(['click'], function (event) {
    console.info(vectorLayer1)
    vectorLayer1.getFeatures(event.pixel).then(function (features) {
    console.info(features)
    if (!features.length) {
      selection = {};
      selectionLayer.changed();
      return;
    }
    const feature = features[0];
    if (!feature) {
      return;
    }
    const fid = feature.getId();

    if (selectElement.value.indexOf('singleselect') === 0) {
      selection = {};
    }
    // add selected feature to lookup
    selection[fid] = feature;

    selectionLayer.changed();
  });
});

<div id="map" class="map"></div>

.map {
    height: 600px;
    width: 100%;
}