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

相关文章

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

K8S(Kubernetes)开源的容器编排平台安装步骤详解

K8S(Kubernetes)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述: 安装步骤: 安装Docker:K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master:在集群中选择一台主机作为Master节点,安装K8S的控制平面组件,如AP

嵌入式Openharmony系统构建与启动详解

大家好,今天主要给大家分享一下,如何构建Openharmony子系统以及系统的启动过程分解。 第一:OpenHarmony系统构建      首先熟悉一下,构建系统是一种自动化处理工具的集合,通过将源代码文件进行一系列处理,最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor

LabVIEW FIFO详解

在LabVIEW的FPGA开发中,FIFO(先入先出队列)是常用的数据传输机制。通过配置FIFO的属性,工程师可以在FPGA和主机之间,或不同FPGA VIs之间进行高效的数据传输。根据具体需求,FIFO有多种类型与实现方式,包括目标范围内FIFO(Target-Scoped)、DMA FIFO以及点对点流(Peer-to-Peer)。 FIFO类型 **目标范围FIFO(Target-Sc

019、JOptionPane类的常用静态方法详解

目录 JOptionPane类的常用静态方法详解 1. showInputDialog()方法 1.1基本用法 1.2带有默认值的输入框 1.3带有选项的输入对话框 1.4自定义图标的输入对话框 2. showConfirmDialog()方法 2.1基本用法 2.2自定义按钮和图标 2.3带有自定义组件的确认对话框 3. showMessageDialog()方法 3.1

脏页的标记方式详解

脏页的标记方式 一、引言 在数据库系统中,脏页是指那些被修改过但还未写入磁盘的数据页。为了有效地管理这些脏页并确保数据的一致性,数据库需要对脏页进行标记。了解脏页的标记方式对于理解数据库的内部工作机制和优化性能至关重要。 二、脏页产生的过程 当数据库中的数据被修改时,这些修改首先会在内存中的缓冲池(Buffer Pool)中进行。例如,执行一条 UPDATE 语句修改了某一行数据,对应的缓

Collection List Set Map的区别和联系

Collection List Set Map的区别和联系 这些都代表了Java中的集合,这里主要从其元素是否有序,是否可重复来进行区别记忆,以便恰当地使用,当然还存在同步方面的差异,见上一篇相关文章。 有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否