@cssc-ment/vector-scalar

地图强度场、风场绘制

用法

const map = L.map('map', {
  // crs: CRS_4326,
  crs: L.CRS.EPSG3857,
  // 不添加属性说明控件
  attributionControl: false,
  //显示中心
  center: [29.169907662611103, 122.30475884137897],
  //最小显示等级
  // minZoom: 3,
  // //最大显示等级
  // maxZoom: 18,
  //当前显示等级
  zoom: 11,
  zoomControl: false,
  doubleClickZoom: false,
  renderer: L.canvas(),
  // //限制显示地理范围
  // maxBounds: [[-90, -180], [90, 180]],
  preferCanvas: true,
});
L.tileLayer(mapConfig.baseLayer).addTo(this.map);
const tagLayer = new L.FeatureGroup().addTo(this.map);
map.setView([28.357778, 121.656389], 11);


// 强度场、风场的数据是一致的
// 数据格式
import {windData} from 'mock/windDta.ts'
// 色卡 用于强度场的色系
let colorScale: Array<[number, number[]]> = [
      [-22.7, [0, 2, 205]],
      [-14.2, [95, 180, 255]],
      [-5.6, [169, 243, 255]],
      [-1.8, [222, 253, 255]],
      [2.9, [255, 235, 1]],
      [11.5, [255, 54, 0]],
      [20, [147, 0, 0]],
    ];

const vectorScalar=new VectorScalar(this.map,colorScale)
vectorScalar.loadVelocityLayer(windData)

//强度场点击事件，需要包裹一层setTimeout
const clickFun=(e)=>{
 const content = e.split('|');
          setTimeout(() => {
            L.tooltip()
              .setLatLng([content[2] * 1, content[1] * 1])
              .setContent(
                `海温：${Math.abs(content[0]).toFixed(6)} ℃<br />经度：${(content[1] * 1).toFixed(
                  6,
                )}<br />纬度：${(content[2] * 1).toFixed(6)}`,
              )
              .addTo(this.map);
          }, 10);
}
vectorScalar.loadScalarLayer(windData,clickFun)

//动态化显示当前强度场的强度色卡
const currentColor=vectorScalar.getColorScale()

 <div v-if="currentColor.length > 0" style=" position: absolute;z-index: 500;">
    <div
      v-for="(i, index) in currentColor"
      :key="index"
      class="color-block"
      :style="{ background: `linear-gradient(to right, ${i[1]}, ${i[2]}` }"
    >
      <span>{{ i[0] }}</span>
    </div>
  </div>

API

Class vectorScalar

构造函数

| 参数 | 类型 | 说明 | 是否必填 | | ---------- | ------------------------- | ------------------ | -------- | | map | leafletjs.Map | leafletjs Map 对象 | 是 | | colorScale | Array<[number, number[]]> | 色卡 | 否 |

loadScalarLayer

| 参数 | 类型 | 说明 | 是否必填 | | ---- | -------- | -------- | -------- | | data | gribJson | 强度数据 | 是 |

loadVelocityLayer

| 参数 | 类型 | 说明 | 是否必填 | | ---- | -------- | -------- | -------- | | data | gribJson | 矢量数据 | 是 |

type gribJson = {
  data: number[];
  header: Record<string, any>;
};

风场(矢量场)是有俩个方向的数据  数据格式：
const windData=[
  {
    header: {
        parameterCategory: 1, //固定写死
        parameterNumber: 2, //固定写死
        refTime: 1514908800, ////写死
        nx: 101, //x轴划分多少段
        ny: 101,//y轴划分多少段
        lo1: 105.0,//起始点经纬度
        la1: 16.0,//起始点经纬度
        lo2: 130.0,//终点经纬度
        la2: 41.0,//终点经纬度
        dx: 0.25,//x轴每段距离
        dy: -0.25,//y轴每段距离
      },
      data:[]    //从左上角开始绘制到右下角，数据就是x轴的强度
  }，
  {
    header: {
        parameterCategory: 1, //固定写死
        parameterNumber: 2, //固定写死
        refTime: 1514908800, ////写死
        nx: 101, //x轴划分多少段
        ny: 101,//y轴划分多少段
        lo1: 105.0,//起始点经纬度
        la1: 16.0,//起始点经纬度
        lo2: 130.0,//终点经纬度
        la2: 41.0,//终点经纬度
        dx: 0.25,//x轴每段距离
        dy: -0.25,//y轴每段距离
      },
      data:[]    //从左上角开始绘制到右下角，数据就是y轴的强度
  }
]

盐度、温度等等(强度场)是只有一个方向的数据 数据格式：
const scalarData=[

  {
    header: {
        parameterCategory: 1, //固定写死
        parameterNumber: 2, //固定写死
        refTime: 1514908800, ////写死
        nx: 101, //x轴划分多少段
        ny: 101,//y轴划分多少段
        lo1: 105.0,//起始点经纬度
        la1: 16.0,//起始点经纬度
        lo2: 130.0,//终点经纬度
        la2: 41.0,//终点经纬度
        dx: 0.25,//x轴每段距离
        dy: -0.25,//y轴每段距离
      },
      data:[]    //从左上角开始绘制到右下角，数据就是每个点的强度
  }
]

type MarkerTag = Pick<Rect, 'lng' | 'lat' | 'mmsi'> & { name: string };