自己动手做地图: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

相关文章

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos