使用vue+openlayers6 将获取到的GEOJSON文件显示在地图上

//把json文件获取到，然后添加到地图上
getTableData: function (event) {
  let _this = this;
  var formData = new FormData();
  formData.append("type", event);

  let url = config.storebaseurl + "/rest/cfdController/getJSONFileData";
  return (
      Vue.axios
          //.post("/rest/Weather/getLostForecastGfsAndCmet", _this.condition)
          .post(url, formData, {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
          })
          .then((res) => {

            _this.dataList = [];
            if (res && res.data) {
              _this.dataList = JSON.parse(res.data.data);
              _this.ceshi();
            }

            console.log('输出的结果为？？？',_this.dataList);
            return _this.dataList;
          })
  );
},

将获取到的数据展示到地图上

ceshi(){

  var style = new Style({
    fill: new Fill({
      color: [255, 0, 0, 0.25]
    }),
    stroke: new Stroke({
      width: 1,
      color: [255, 0, 0, 1]
    }),
    stroke: new Stroke({
      width: 3, // 线宽
      color: "#fff", // 线的颜色
    }),
  })
  var style1 = new Style({
    fill: new Fill({
      color: [0, 0, 0, 0.25]
    }),
    stroke: new Stroke({
      width: 1,
      color: [0, 0, 0, 1]
    }),
    stroke: new Stroke({
      width: 3, // 线宽
      color: "red", // 线的颜色
    }),
  })
  //读取后台获取到的数据
  const lwjson=this.dataList
  var self = this
  //找到地图对象
  const map = this.$refs.olmap.getMap();
  //创建一个矢量图层
  let layer = new VectorLayer({
    // style: style,
    id: "ceshiid",
    visible: true,
    zIndex: 2,
  });
//将创建的矢量图层添加到地图上
  map.addLayer(layer);
  let features = new GeoJSON({
    featureProjection: "EPSG:3857",
  }).readFeatures(lwjson);
//这个个是给渲染上的图层添加上样式,有一个范围,范围内的都是什么颜色,,如果复杂的情况下需要图例
  features.forEach((ele)=>{
    if(ele.values_.Conc>=6.07e-7){
      ele.setStyle(style)
    }else{
      ele.setStyle(style1)
    }

  })
  var vectorSource = new VectorSource({
    features: features,
  });
  console.log(features,'featuresfeaturesfeatures')
  layer.setSource(vectorSource);
  //刷新页面,有的时候不刷新看不到效果
  this.$forceUpdate()
  console.log(vectorSource,'vectorSourcevectorSource')
},

openlayers6,跟5有些差别,最大的差别就是新手下不了手,但是记住一点(新手),例子是固定的一些都系都是死的,只要是按照openlayers6上固定的方法,写代码,一般情况下都可以出来,不要乱改代码,openlayers6他是一个整体,每个方法都没有那么多的变化,是死的.跟vue不太一样,不理解但是写上去可以出来