扩展graphiclayer实现多城市天气情况的展示
时间:2022-06-13
本文章向大家介绍扩展graphiclayer实现多城市天气情况的展示,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
概述:
在上一节,实现了点击展示城市天气的效果,在本节,讲述通过扩展graphiclayer实现同时显示多个城市天气的展示。
效果:
重庆市天地图天气展示效果
实现后的效果
详细天气信息
实现:
1、实现思路
通过个城市的地图位置,通过map.toScreen()函数转换为屏幕坐标,在每个城市的位置创建一个div用来显示概要天气信息。那么,该如何控制每一个div的位置呢,可以通过div的属性position,left,top值来控制,其中,position为绝对(absolute)位置,left为screenPoint.x,top为screenPoint.y。
2、实现代码
a、封装graphiclayer WeatherGraphicLayer.js
define([
"dojo/_base/declare",
"esri/layers/GraphicsLayer"
], function (
declare,
GraphicsLayer
) {
return declare([GraphicsLayer], {
constructor: function(options) {
this._id = options.id || "";
this._divId = options.divId || "chart";
this._bindGraphicLayer = options.bindGraphicLayer || null;
},
// 重构esri/layers/GraphicsLayer方法
_setMap: function(map, surface) {
// GraphicsLayer will add its own listener here
var div = this.inherited(arguments);
return div;
},
_unsetMap: function() {
this.inherited(arguments);
},
hide: function() {
var _graphics = this.graphics;
console.log(_graphics);
for(var i= 0,dl =_graphics.length;i<dl;i++){
var graphic = _graphics[i].graphic;
var py =graphic.attributes.pinyin;
$("#div_"+py).hide();
$("#div_"+py).remove();
}
},
show: function() {
var _graphics = this.graphics;
for(var i= 0,dl =_graphics.length;i<dl;i++){
var graphic = _graphics[i].graphic;
var py =graphic.attributes.pinyin;
$("#div_"+py).show();
}
},
//拖拽
_onPanStartHandler: function() {
this.hide();
},
//缩放
_onZoomStartHandler:function(){
this.hide();
},
_onExtentChangeHandler: function(delta, extent, levelChange, lod) {
this._refresh(true, true);
},
_refresh: function(redrawFlag, zoomFlag) {
var gs = this.graphics,
_draw = this._draw;
for (i = 0; i < gs.length; i++) {
_draw(gs[i], redrawFlag, zoomFlag);
}
this.show();
},
_draw:function(addGraphic, redrawFlag, zoomFlag){
if (!this._map) {
return;
}
var py = addGraphic.graphic.attributes.pinyin;
if (zoomFlag) {
$("#div_"+py).remove();
}
var mapPt = addGraphic.graphic.geometry;
var srcPt = map.toScreen(mapPt);
var url = "http://i.tianqi.com/index.php?c=code&id=30&color=%23FF0000&py="+py;
var showDiv = $("<div />").attr("id","div_"+py)
.css("position","absolute")
.css("top",(srcPt.y+15)+"px")
.css("left",(srcPt.x-45)+"px")
.addClass("weather-box")
.appendTo($("#map"));
var weatherIframe = $("<iframe />").attr("width","120")
.attr("id","ifm_"+py)
.attr("height","14")
.attr("frameborder","0")
.attr("scrolling","no")
.attr("margin","0px")
.attr("overflow","hidden")
.attr("src",url);
var upArrow = $("<div />").addClass("entry-trangle-top").appendTo(showDiv);
showDiv.append(weatherIframe);
}
});
});
b、前端实现
新建一个WeatherGraphicLayer,并添加到map。
var weather = new WeatherGraphicLayer({"id":"weather",displayOnPan:false});
map.addLayer(weather);
添加城市图层的graphic-add事件
city.on("graphic-add",function(addGraphic){
weather.add(addGraphic);
});
这样,多城市的天气信息展示已完成,点击显示详细信息在上一节中已说明,代码如下:
city.on("click",function(evt){
var url = "http://i.tianqi.com/index.php?c=code&id=27&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","400")
.attr("height","270")
.attr("frameborder","0")
.attr("scrolling","no")
.attr("src",url);
content.append(weatherIframe);
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content[0]);
map.infoWindow.resize(420,275);
map.infoWindow.show(evt.graphic.geometry);
});
- Tomcat就是这么简单
- Servlet第三篇【request和response介绍、response的常见应用】
- 通过java来格式化sql语句(r4笔记第61天)
- Servlet第四篇【request对象常用方法、应用】
- Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】
- Java类加载器(用户自定义类加载器实现)
- Servlet第六篇【Session介绍、API、生命周期、应用、与Cookie区别】
- 一个oracle蠕虫病毒 (r4笔记第60天)
- 提高效率,eclipse上你可能不知道的技巧
- AJAX入门这一篇就够了
- 014 Java的反射机制
- XML+JSON面试题都在这里
- 客户关系管理系统
- 016 Java中的动态代理
- 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 数组属性和方法
- 229. 求众数 II Krains 2020-08-04 16:03:03 数学
- 部署 Consul服务实现Docker容器跨主机通信
- 【测试】 Java如何优雅的生成测试数据
- Spring事物的传播行为案例分析
- Ingress-nginx灰度发布功能详解
- [885]Tensorflow设置CUDA_VISIBLE_DEVICES来控制GPU的使用
- Windows10:启用或禁用休眠、保留的存储
- 基于Vue SEO的四种方案
- 一道SQL问题,你来试试的?
- 利用DNSLOG测试Fastjson远程命令执行漏洞
- goldengate classic模式在空闲数据库上抽取和应用数据延迟问题
- gorm jion查询映射(扫描scan)到新的结构体,必须使用select规定字段,与xorm的jion对比
- Spark UDF1 返回复杂结构
- Docker 部署Registry私有仓库+Harbor私有仓库
- goldengate同步无主键无唯一索引表的问题以及解决方案