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);
}