自己动手做地图:Dojo中的Map控件详解

2023-12-19 09:30

本文主要是介绍自己动手做地图:Dojo中的Map控件详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

随着Web成为软件系统交付的主流平台,企业级应用前端纷纷落户浏览器,对各种富客户端开发库提出了越来越高的要求,Dojo作为其中的佼佼者,对企业级Web开发提供了强大的支持。

在企业信息系统中,图表是数据分析的最终图形化结果,地位举足轻重,直接影响数据分析的效果好坏。美观实用的图表绝对会给应用系统加分不少!

 

Dojo控件库里有丰富的图表控件,除了常见的直方图、饼图、折线图等等,也有为更专业的需求而开发的甘特图、散点图、地图等控件。更难能可贵的是Dojo的图表控件支持了动画效果以及众多的UI响应事件。下图是一个包含了dojo中的地图、直方图、饼图和折线图等图表控件的Dashboard示例:

 

 

 

接下来我们以dojo1.5版本中新加入的地图控件(dojox.geo.charting.Map)为例,来认识一下dojo中的图表控件特点(这里默认读者有一定的dojo开发基础,如果没有...也没问题!)


1.简单快捷的创建过程


首先你得下载dojo1.5的开发包 ,然后在html开发页面中引入必要的css文件和dojo.js;


然后新建一张美国地图(dojo中自带的地图就是美国地图)。构造函数接受两个参数:地图div容器以及地图的地理数据。地理数据默认存放在dojox.geo.charting模块下的resources/data目录下;




 

OK, 一张最简单的地图就生成了,而且支持 高亮, 放大,复位和Tip功能:


点击后高亮显示:

再点击,地图放大;在放大状态下点击的话,地图就会复位:

 

可以看到Map图表控件的创建过程非常简单,不过到现在为止,Map还没有跟数据进行绑定,所以不能称为严格意义上的图表,下面介绍Map如何展示数据。


 

2.一目了然的数据展示

 

比如说,现在的需求是显示A产品在美国各州的销售情况,用深蓝色表示销售情况火爆,用浅蓝色代表销售情况惨淡;

销售数据使用dojo.data.ItemFileReadStore数据格式(关于ItemFileReadStore的介绍可以读读《利用 Dojo Data 开发统一的数据访问模型》)

 

 

接下来,就需要为数据设置颜色区间了。我将销售值在6.0到9.0之间设置为销售火爆的地区,用深蓝色表示。佛罗里达州的A产品销售额为7.2,那么佛罗里达州的颜色就是深蓝色;


 

好了,Map的数据展示功能也介绍完了。别忙,还有更cool的呢,那就是dojo图表中的事件扩展接口!



3.强大丰富的扩展接口

 

在基于控件库的开发中,开发者经常需要定制化的功能,所以控件必须提供一些扩展接口满足这部分需要。以Map控件为例,开发者希望能够定制Tip的内容,或者在点击地图的时候触发新的事件等等。在Map控件里一共提供了三个扩展接口,参数都是当前地图上取得焦点的地区。

  1. onFeatureOver:在鼠标移到地区上方时触发
  2. onFeatureClick:在鼠标点击地区时触发;
  3. onZoomEnd:在地区完成放大行为时触发;

下面是自定义的提示内容,只要你愿意,你甚至可以在加州的提示内容里添加湖人队的夺冠新闻。

 

至此,Map控件已经介绍完了,不过dojo图表控件中还有许多优秀的成员等待你去发掘。

 

 

另附示例代码:http://download.csdn.net/source/2544819

 


 






这篇关于自己动手做地图:Dojo中的Map控件详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/511692

相关文章

Redis实现延迟任务的三种方法详解

《Redis实现延迟任务的三种方法详解》延迟任务(DelayedTask)是指在未来的某个时间点,执行相应的任务,本文为大家整理了三种常见的实现方法,感兴趣的小伙伴可以参考一下... 目录1.前言2.Redis如何实现延迟任务3.代码实现3.1. 过期键通知事件实现3.2. 使用ZSet实现延迟任务3.3

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印

Python Faker库基本用法详解

《PythonFaker库基本用法详解》Faker是一个非常强大的库,适用于生成各种类型的伪随机数据,可以帮助开发者在测试、数据生成、或其他需要随机数据的场景中提高效率,本文给大家介绍PythonF... 目录安装基本用法主要功能示例代码语言和地区生成多条假数据自定义字段小结Faker 是一个 python

Java Predicate接口定义详解

《JavaPredicate接口定义详解》Predicate是Java中的一个函数式接口,它代表一个判断逻辑,接收一个输入参数,返回一个布尔值,:本文主要介绍JavaPredicate接口的定义... 目录Java Predicate接口Java lamda表达式 Predicate<T>、BiFuncti

详解如何通过Python批量转换图片为PDF

《详解如何通过Python批量转换图片为PDF》:本文主要介绍如何基于Python+Tkinter开发的图片批量转PDF工具,可以支持批量添加图片,拖拽等操作,感兴趣的小伙伴可以参考一下... 目录1. 概述2. 功能亮点2.1 主要功能2.2 界面设计3. 使用指南3.1 运行环境3.2 使用步骤4. 核

一文详解JavaScript中的fetch方法

《一文详解JavaScript中的fetch方法》fetch函数是一个用于在JavaScript中执行HTTP请求的现代API,它提供了一种更简洁、更强大的方式来处理网络请求,:本文主要介绍Jav... 目录前言什么是 fetch 方法基本语法简单的 GET 请求示例代码解释发送 POST 请求示例代码解释

详解nginx 中location和 proxy_pass的匹配规则

《详解nginx中location和proxy_pass的匹配规则》location是Nginx中用来匹配客户端请求URI的指令,决定如何处理特定路径的请求,它定义了请求的路由规则,后续的配置(如... 目录location 的作用语法示例:location /www.chinasem.cntestproxy

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,:本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.

详解C++中类的大小决定因数

《详解C++中类的大小决定因数》类的大小受多个因素影响,主要包括成员变量、对齐方式、继承关系、虚函数表等,下面就来介绍一下,具有一定的参考价值,感兴趣的可以了解一下... 目录1. 非静态数据成员示例:2. 数据对齐(Padding)示例:3. 虚函数(vtable 指针)示例:4. 继承普通继承虚继承5.