使用Openlayers 3 在地图增加天气预报

利用后台服务获取天气预报数据

说明：后台选取适合的后台程序返回JSON格式数据至前台展现，示例数据基本格式如下：

[
{
"SLEVEL": 2,
"ID": 58614,
"Y": 28.38,
"X": 116.27,
"DT": "2015-08-14 08:00",
"PIC1": "Showers.png"
},
{
"SLEVEL":1,
"ID": 58713,
"Y": 27.72,
"X": 117.07000000000001,
"DT": "2015-08-14 08:00",
"PIC1": "Thundershower.png"
}
]

说明： 创建天气预报图层显现于地图之中，此处因需根地图层级来控制显示不同的图层，例如zoom大于10才显示县级预报等等…

//创建天气预报图层方法
var layerlv1, layerlv2;
var CreateTQYB = function(obj) {
var layerlv1arry1 = [];
var layerlv1arry2 = [];
var features = new Array(obj.length);
for (i = 0; i < obj.length; i++) {
var coordinates = ol.proj.fromLonLat([parseFloat(obj[i].X), parseFloat(obj[i].Y)])
var feature = new ol.Feature(new ol.geom.Point(coordinates));
//设置地图图标
feature.setStyle(iconstyle(obj[i].PIC1));
feature.id = obj[i].ID;
feature.X = obj[i].X;
feature.Y = obj[i].Y;
/*此处可以设置feature的需要属性*/
if (obj[i].SLEVEL == "1") {
layerlv1arry1.push(feature)
} else {
layerlv1arry2.push(feature)
}
}
//建立市级图层
layerlv1 = new ol.layer.Vector({
source: new ol.source.Vector({
features: layerlv1arry1
})
});
map.addLayer(layerlv1)
//建立县级图层
layerlv2 = new ol.layer.Vector({
source: new ol.source.Vector({
features: layerlv1arry2
})
});
map.addLayer(layerlv2)
//县级图层默认不可见
layerlv2.setVisible(false);
}

说明：创建地图Icon的函数方法

var iconstyle = function(iconmc) {
return new ol.style.Style({
image: new ol.style.Icon({
src: "img/icon/" + iconmc
})
});
}

效果图如下：



其他说明：

1、Feature点击弹出层事件，在map上利用openlayers 3 的 ol.Overlay建立一个层，然后在map绑定click事件，设置overlay图层的内容呈现，图层内容数据来源于Feature所设定的值。

2、预报层级的控制，在map绑定mousewheel事件来实现zoom层级控制级别图层的呈现。