Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

实现地图天气预报的显示


概述:很多时候,会用到地图与天气预报的相结合显示,本文结合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);
            });

实现后,效果如下:

转载自:https://blog.csdn.net/GISShiXiSheng/article/details/44566531