sakitam-fdd / wind-layer

:flags: :rocket: wind-layer | a openlayers && maptalks && amap && bmap && leaflet && mapbox-gl && maplibre-gl extension like windy.com for weather visualization
https://sakitam-fdd.github.io/wind-layer/
Other
565 stars 154 forks source link

wind animation become mess after pan or zoom map #3

Open Longnt1208 opened 6 years ago

Longnt1208 commented 6 years ago

Hi sakitam-fdd,

Thanks for your great working, but I see a bug when view map in your link https://sakitam-fdd.github.io/wind-layer/ all animation of wind will become mess after I pan or zoom map. I tried to edit your example in jsfiddle.net but it still not working, just ok in first load.

sakitam-fdd commented 6 years ago

Hi, I guess you're talking about pan or zoom and re-rendering the map, Can you provide screenshots?

Longnt1208 commented 6 years ago

wind_before wind_after_pan

Hi sakitam,

I send you two image, first image is first time when map load and second image is after I move map and wind animation move very fast and become mess.

sakitam-fdd commented 6 years ago

I understand your meaning,this is indeed a bug,when this map re-rendering,windy layer also re-rendering. but now I still do not have a good solution.

wfmm1990 commented 6 years ago

大哥,求帮助啊~ 这个插件能够加载EPSG:4326的数据么,我看提供的测试数据(out.json)是EPSG:3857对的,我用国内的底图服务风场就全乱了。

icebound1 commented 6 years ago

请问见温度数据去掉如何使用呢? 绑定温度数据后,使用起来并不灵活,如果想让矢量变色,可以通过V分量大小来设置,希望能改进下,多谢

icebound1 commented 6 years ago

ol4中使用,数据为中国区域经纬度范围内的,跑偏严重啊

sceen1

sakitam-fdd commented 6 years ago

@icebound1 代码能贴一下吗,或者 JSFiddlecodepen在线 demo。

icebound1 commented 6 years ago

代码就是你的样例代码,投影采用EPSG:4326 ,只不过数据换成了中国区域的数据

数据在这里 http://59.46.127.110/out.json

var Maps = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ layerName: 'baseLayer', preload: 4,

  source: new ol.source.OSM({
    url: "http://{a-c}.sm.mapstack.stamen.com/" +
    "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
    "{z}/{x}/{y}.png"
  })

}),

], loadTilesWhileAnimating: true, pixelRatio: 1, view: new ol.View({ projection: 'EPSG:4326', center: [122.5,41.15], zoom: 8 }) }); var wind, data; axios.get('./out.json', { params: { time: Date.parse(new Date()) } }).then(function (res) { if (res.data) { data = res.data wind = new WindLayer(data, { layerName: data, minResolution: undefined, maxResolution: undefined, zIndex: 0, projection: 'EPSG:4326', ratio: 1 }) wind.appendTo(Maps) } });

function getData () { var _data = wind.getData(); console.log(_data) }

function setData () { wind.setData(data) }

function clearWind () { wind.clearWind() }

sakitam-fdd commented 6 years ago

@icebound1 你看下是不是数据有问题,中国区莫卡托投影下也不行,和你截图一样,看着像数据经纬度被压缩了。正常来说 EPSG:3857 投影下应该不会有问题,EPSG:4326 下确实是会有偏移。

全球 中国区

icebound1 commented 6 years ago

采用的GFS 0.25degree数据(数据本身是经纬度投影数据),下载下来后直接通过grib2json转换的json数据

我在前端使用3857投影下也出现偏移

sakitam-fdd commented 6 years ago

@icebound1 这个我需要再查一下,我是使用的 node 服务实时抓取转换的,添加数据范围限制后转换出来的数据就有问题(4326和3857都有问题),默认范围就可以。

icebound1 commented 6 years ago

在4326投影下,全球范围内的数据也会有问题,在地图缩小的清况下,风粒子明显偏离很多,希望能修复下

sakitam-fdd commented 6 years ago

@icebound1 好的,我周末抽空看看:flushed:

icebound1 commented 6 years ago

有时间的话帮忙改进下吧,经纬度范围那个,还是偏移

sakitam-fdd commented 6 years ago

@icebound1 嗯,过段时间吧,最近比较忙:joy:

ceverpack commented 4 years ago

I understand your meaning,this is indeed a bug,when this map re-rendering,windy layer also re-rendering. but now I still do not have a good solution.

Is this problem solved now?