Vis-w NPM | npm.io

安装

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)