实现地图天气预报的显示

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

实现后,效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源项目

码云推荐 | 高德地图位置选择器

bootstrap.AMapPositionPicker 是一款基于高德地图的位置选择插件,使用jQuery开发。 ? 概述 bootstrap.AMapPos...

35750
来自专栏Android干货

Android开发常用的一些功能列表

32650
来自专栏Web 开发

Deploy WordPress On SAE

也没怎么刻意去选择,从各种cPanel主机,到VPS,再到AppFog等Pass,基本上都玩了一遍了。

10200
来自专栏程序员互动联盟

【编程入门】互联网的本质技术

首先要知道网站访问大概是什么个过程: 假设你在浏览器地址栏输入这个问题的地址 http://www.zhihu.com/question/22689579 访问...

487110
来自专栏Dawnzhang的开发者手册

你真的了解博客园的目录么。。

非常感谢这位盆友能发现这个问题,奖励鸡腿,这是那篇博文:要嫁就嫁程序员,因为。。。

20640
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

13430
来自专栏coding for love

浏览器为契机贯穿前端知识点-大纲参考

ps:动画不连贯,因为浏览器渲染有一个最小时间间隔(这块之前搜藏了) 涉及如下部分:

9210
来自专栏腾讯Bugly的专栏

【特斯拉组件】iOS高性能PageController

1.组件介绍 Page是企鹅FM研发的分页组件,包括支持分页非交互切换(通过方法调用导航切换)和交互切换(屏幕的手势滑动),多个分页Controller和Vie...

55650
来自专栏游戏杂谈

libjpeg的问题

游戏项目是基于cocos2d-x开发的,但线上发现一个bug就是玩家在设置完自定义头像后直接闪退。凡是在设置该玩家头像的地方,游戏就直接闪退。最终定位到的问题是...

17040
来自专栏FD的专栏

React 中引入 Angular 组件

为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent,而在这个微前端架构的...

11030

扫码关注云+社区

领取腾讯云代金券