你好,欢迎来到电脑编程技巧与维护杂志社! [免费注册][请登录 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:杂志经典 / 图形图象处理与游戏编程
基于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)建筑定位:根据建筑在园区中的坐标值,在地图上用锚点标出建筑位置,当鼠标移动锚点时锚点颜色由红色变电蓝色,同时显示建筑名称提示信息,点击锚点可以弹出建筑信息窗口,显示该建筑的一些能耗监测信息。

  推荐精品文章

·黑客频频攻击区块链安全软肋,如何保证区…
·阿里、商汤在香港设立人工智能实验室 本月…
·云端的竞争:巨头纷纷加码云市场
·中国云体系联盟主办未来科技独角兽与行业…
·Gartner:企业首席信息官们可能没有注意到…
·微软开源Azure云服务AI引擎Infer.NET
·创新指纹读取器出炉:平均准确率最高可达…
·微软投资东南亚出行公司Grab 将进行AI等技…
·Facebook开发AI系统:看美食图片能自动生…
·工信部:促进区块链与实体经济深度融合
·谷歌首度证实了重返中国的Dragonfly计划的…
·Java 11正式发布,告诉你到底应不应该升级…
·Stack Overflow 10 周年了,作为程序员你…
·新手初学Python最常犯的十个错误,其中有…

  联系方式
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