实现地图天气预报的显示

概述：很多时候，会用到地图与天气预报的相结合显示，本文结合web天气插件，实现地图天气预报的结合现实。

1、天气预报插件

搜了半天，终于找到了比较好的天气预报插件，网址为：http://www.tianqi.com/dingzhi/，调用形式为：

<iframe width="1000"
        scrolling="no"
        height="500"
        frameborder="0"
        src="http://i.tianqi.com/index.php?c=code&id=22&icon=1&py=haerbin">

参数说明：

width：宽度

scrolling：是否出现滚动条

height：高度

frameborder：是否显示边框

src：网址，其中，id为样式，icon为图标样式，py为城市代码。

2、发布服务

在发布服务之前，需要对图层做一定的处理，在上一篇博文中讲解了通过汉字提取拼音的方法，提取各城市的拼音，并添加到shp文件的字段中，具体操作：

a、将shp属性表导出

b、提取拼音

c、给shp数据添加py字段，字段类型为text，长度为100

d、在arcmap中加载excel；

e、水平与excel做join连接，并给py字段赋值

3、调用，并实现，

在地图中添加featurelayer，并添加click事件，代码如下：

            var pro = new FeatureLayer("http://localhost:6080/arcgis/rest/services/city/MapServer/0",{
                outFields: ["*"]
            });
            map.addLayer(pro);

            pro.on("click",function(evt){
                console.log(evt);
                var url = "http://i.tianqi.com/index.php?c=code&id=19&color=%23&bgc=%23&icon=2&py="+evt.graphic.attributes.pinyin+"&temp=1&num=1";
                var title = evt.graphic.attributes.name;
                var content = $("<div />");
                var weatherIframe = $("<iframe />").attr("width","320")
                    .attr("height","120")
                    .attr("frameborder","0")
                    .attr("scrolling","no")
                    .attr("src",url);
                content.append(weatherIframe);
                map.infoWindow.setTitle(title);
                map.infoWindow.setContent(content[0]);
                map.infoWindow.resize(340,125);
                map.infoWindow.show(evt.graphic.geometry);
            });

实现后，效果如下：