你好,欢迎来到电脑编程技巧与维护杂志社! [免费注册][请登录 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:杂志经典 / 图形图象处理与游戏编程
基于HTML5 Canvas技术实现园区电子地图(一)
 

  要:本文提出一种基于HTML5 Canvas技术实现园区电子地图的方法,该方法通过运用Canvas绘制图片方法绘制预处理过的图片矩阵,实现园区电子地图的缩放、平移、定位功能,该方法克服了对第三方电子地图的依赖性,实现简单,操作便捷,实用性强。目前,该方法已经在某园区可再生能源监测系统中使用,运行效果良好。

关键词:HTML5Canvas;园区电子地图


0 引言

电子地图(英语:Electronic map),即数字地图,是利用计算机技术,以数字方式存储和查阅的地图[1]。现在流行的百度地图和Google地图都提供了API应用接口,人们可以通过JavaScript语言调用这些API接口在电子地图上实现自己需要的应用。然而对于园区来说,只有几十平方公里甚至几平方公里的面积,使用上述的电子地图,无法满足它的分辩率要求,显得大材小用;另外,最重要的是实时性无法保证,很多新建的园区在电子地图上定位不到。鉴于上述原因,本文提出一种基于HTML5 Canvas技术实现园区电子地图的方法。该方法首先对园区鸟瞰图进行缩放分割预处理,然后通过缩放比例和平移参数计算需要绘制的图片矩阵,最后运用Canvas绘制图片方法将这些图片矩阵绘制到画布上。该方法地图内容由用户提供,不需要连接第三方电子地图服务器,能够实现园区地图的缩放、移动、定位功能,实现简单,操作便捷,具有较强的实用性。

1 HTML5Canvas简介

HTML5是指万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。20141029日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),SafariOpera等;国内的遨游浏览器(Maxthon),以及基于IEChromiumChrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力[2]

CanvasHTML5中新增的元素,它是通过 JavaScript 来绘制 2D图形。画布是个矩形区域,可以控制其每一像素,逐像素进行渲染。可以通过多种方法使用Canvas 元素绘制路径、矩形、圆形、字符以及添加图像[3]Canvas元素给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离FlashSilverlight,直接在浏览器中显示图形或动画。

2系统功能需求

1)缩放功能:园区电子地图具有5级缩放功能,可以通过鼠标滚轮实现地图缩放,也可以通过操作缩放标尺实现地图缩放;

2)平移功能:运用鼠标可以拖动地图上下左右平移地图,也可以通过点击平移方向盘实现地图移动;

3)建筑定位:根据建筑在园区中的坐标值,在地图上用锚点标出建筑位置,当鼠标移动锚点时锚点颜色由红色变电蓝色,同时显示建筑名称提示信息,点击锚点可以弹出建筑信息窗口,显示该建筑的一些能耗监测信息。

  推荐精品文章

·一文解读:工程师常用的接口大全
·谷歌在深圳设立办公室 或专注硬件业务
·甲骨文发布关键补丁 修复英特尔芯片漏洞
·容器圈2017年回顾及2018年技术热点预测
·外媒速递:Web开发者与用户界面开发者之间…
·在2018年最值得去学习的编程语言
·共享医疗来了!温州全民健康信息化“十三…
·百度 CES 发布会:重磅推出 Apollo 2.0,…
·数据科学热到爆,如何让数据成为运维的大…
·芯片涨价潮再度来袭,2018芯片国产化迫在…
·美团云+AI,打造最开放人工智能平台,带来…
·京东京麦:微服务架构下的高可用网关与容…
·阿里云计算公司总部效果图曝光 预计2021年…
·东进:加密将成为中国企业数据安全的标配…

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备06048724号,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区长春桥路5号6号楼1209室,邮编:100089