实现地图天气预报的显示
实现地图天气预报的显示
lzugis
发布于 2018-10-23 15:21:37
发布于 2018-10-23 15:21:37
概述：很多时候，会用到地图与天气预报的相结合显示，本文结合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);
});实现后，效果如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年03月23日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读