openlayers萤火图实现

直接贴效果图和代码了，相关功能代码有注释。

// 萤火图
let ChinaBlue, fireData;

export function initFirefly(viewMap) {
  let map = viewMap;  // 地图对象
  fireFly()
}

function fireFly() {
  // 防止重复添加
  if(ChinaBlue) map.removeLayer(ChinaBlue);
  if(fireData) map.removeLayer(fireData);
  ChinaBlue =new TileLayer({  //中国蓝地图图层
    title:"fireFlyMap",
    layerName:"baseMap",
    source: new XYZ({
      url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
    })
  });
  // map.addLayer(ChinaBlue);
  map.getLayers().insertAt(0, ChinaBlue);
  fireData = new VectorLayer({  // 萤火图图层
    title:"fireFlyMap",
    layerName:"baseMap",
    source: new VectorSource({
      format: new GeoJSON(),
      url:'../static/data/data.json'  //需要加载的点图元数据
    }),
    //修改图标样式
    style:function(feature,res){  // 根据水质等级数据判断图标大小
      var attributes = feature.getProperties();
      var level = attributes.水质;
      var scale;
      if( level >=60 && level <66 )
        scale = 10.0/50;
      else if(level >=66 && level <73)
        scale = 14.5/50;
      else if(level >=73 && level <82)
        scale = 19.0/50;
      else if(level >=82 && level <91)
        scale = 23.5/50;
      else if(level >=91 && level <100)
        scale = 28/50;
      var style = new Style({
        image: new Icon({
          crossOrigin: 'anonymous',
          scale:scale,
          src:'../static/images/blue.png'  // 萤火图标
        })
      });
      return [style];
    }
  })
  // map.addLayer(fireData);
  map.getLayers().insertAt(1, fireData);
}