安装

npm install vis-w

使用

import v from 'vis-w'
import css from 'vis-w/dist/leaflet.css'  //引入leaflet样式

地图

let vMap = new v.Map('map-container');  //map-container为地图容器div的id

properties

legendStyle：图例的样式

vMap.legendStyle = {
    bottom: '60px',
    right: '10px'
};

mapClickListener：地图点击事件

vMap.mapClickListener = (e)=>{
  console.log(e)
}

moveEndListener：地图停止移动事件

vMap.moveEndListener = (e)=>{
  console.log(e)
}

• 其余地图事件见leaflet文档 https://leafletjs.com/reference-1.7.1.html#map-event

methods

getLeafletMapObject()

返回leaflet的map对象。

getBounds()

获取屏幕可视区域的地图边界。
返回类型：Bounds：{leftTop: [lat, lon], rightBottom: [lat, lon]}

add(layer)

添加图层，layer为图层对象。

removeLayer(layer)

移除图层，layer为图层对象。

hasLayer(layer)

是否存在图层layer。

图层

温度

TemperatureSurface: 地面温度

参数：
startTime: 起报时间, yyyyMMddHHmm
endTime: 预报时间, yyyyMMddHHmm
datasource: 数据源，可选'ecmwf'、'gfs'，默认为'ecmwf'

methods:
    setTime(startTime, endTime): 更新起报时间和预报时间

示例：
let temp_surface = new v.TemperatureSurface('202009031200', '202009031200', 'gfs');
temp_surface.addTo(vMap);  //vMap.add(temp_surface);

temp_surface.setTime('202009031200', '202009031800');  //更新时间

TemperatureIsobaric: 高空温度

参数、方法及示例参考TemperatureSurface

*SkinTemperature: 体感温度

参数、方法及示例参考TemperatureSurface，此图层datasource只有'ecmwf'

DewpointTemperatureSurface: 露点温度

参数、方法及示例参考TemperatureSurface

降水

TotalPrecipitation: 总降水

参数、方法及示例参考TemperatureSurface

云量

LowCloud: 低云量

参数、方法及示例参考TemperatureSurface

TotalCloud: 总云量

参数、方法及示例参考TemperatureSurface，此图层datasource只有'ecmwf'

相对湿度

RelativeHumiditySurface: 地面相对湿度

参数、方法及示例参考TemperatureSurface，此图层datasource只有'gfs'

RelativeHumidityIsobaric: 高空相对湿度

参数、方法及示例参考TemperatureSurface，此图层datasource只有'ecmwf'

能见度

VisibilitySurface: 地面能见度，单位：km

参数、方法及示例参考TemperatureSurface

风

Wind: 风速色斑图层

参数：
startTime: 起报时间, yyyyMMddHHmm
endTime: 预报时间, yyyyMMddHHmm
windLevel: 高度层
    当datasource为'ecmwf'时可选：'10m', '100m', 10, 20, 50, 70, 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 850, 900, 925, 950, 1000.
    当datasource为'gfs'时可选：'10m'.
    (windLevel为数字时，表示气压，单位为hPa)
datasource: 数据源，可选'ecmwf'、'gfs'，默认为'ecmwf'.

methods:
    setTime(startTime, endTime): 更新起报时间和预报时间

示例：
let wind = new v.Wind('202009031200', '202009031200', '10m', 'gfs');
//let wind = new v.Wind('202009031200', '202009031200', 1000, 'ecmwf');
wind.addTo(vMap)

WindVelocity: 风场粒子

参数及示例参考Wind.

methods:
    show(): 显示风场粒子
    hide(): 隐藏风场粒子
    setTime(startTime, endTime): 更新起报时间和预报时间