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

  推荐精品文章

·“物链网”的正确打开姿势:区块链如何拯…
·Facebook利用人工智能的六种方式,有些你…
·微软推出Visual Studio Kubernetes工具包…
·Facebook 正在重构 React Native,将重写…
·Facebook 正在重构 React Native,将重写…
·GitLab发布Web IDE 在Web端为你提供集成开…
·5G第一阶段标准发布 中国厂商标准占三成
·微软Windows 10的上下文菜单引入Fluent D…
·蚂蚁金服完成新一轮100亿美元融资 估值15…
·搭搭云发布3.0平台上线暨品牌升级 让SaaS…
·京东推出京点智慧办公方案 一体化服务平台…
·Java 流(Stream)、文件(File)和IO
·Java 异常处理
·Java 基础语法

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