实现地图天气预报的显示
时间:2022-06-13
本文章向大家介绍实现地图天气预报的显示,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
概述:很多时候,会用到地图与天气预报的相结合显示,本文结合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);
});
实现后,效果如下:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法