CN102968805A

CN102968805A - 一种图片叠加的方法和系统

Info

Publication number: CN102968805A
Application number: CN2012103873706A
Authority: CN
Inventors: 王志维; 杨正平; 田志勇
Original assignee: WUHAN HIGHEASY ELECTRONIC TECHNOLOGY Co Ltd; China Security and Surveillance Technology PRC Inc
Current assignee: WUHAN HIGHEASY ELECTRONIC TECHNOLOGY Co Ltd; China Security and Surveillance Technology PRC Inc
Priority date: 2012-10-14
Filing date: 2012-10-14
Publication date: 2013-03-13

Abstract

本发明适用于图片处理技术领域，公开了一种图片叠加的方法和系统，该方法包括：通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标，将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置；该图片叠加系统包括第一图片加载模块，用于通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；第二图片添加模块，用于将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置，通过以上图片叠加方法和系统，由于图片叠加时绑定了地理坐标，所以在改变显示器分辨率的情况下不会偏离原来位置的问题。

Description

一种图片叠加的方法和系统

技术领域

本发明属于图片处理技术领域，更具体地涉及一种图片叠加的方法和系统。

背景技术

在图片处理技术领域，特别是在网页制作时，经常性地会碰到需要将图片叠加的情况，以满足不同行业的不同需求。比如需要将一张图片B叠加在另外一张图片A之上，以图片A为背景，图片B在图片A的位置固定，且当更换屏幕分辨率时，图片B（可以是多张图片）的位置仍然处于图片A原有位置不变。这种场景非常常见的应用如：在电子地图上加载一些图标，这些图标可能是文字或者特殊的标记。

针对以上技术问题，现有技术中一般情况下采用的方式是：用javascript浏览器脚本语言记录需要叠加的图标在底图对应的像素点位置（X，Y）从而实现图片的叠加，但是，这种技术的缺点主要在于：

1、底图A不可移动、放大、缩小，查看叠加后的图片或者地图必须依赖于浏览器的滚动条，操作不方便。

2、由于软件不可能永远只在一台机器上面运行，所以记录图片的像素坐标，肯定会因为不同的显示器分辨率带来问题，使得图片B偏离其本来位置。

发明内容

本发明的特征和优点在下文的描述中部分地陈述，或者可从该描述显而易见，或者可通过实践本发明而学习。

为解决现有技术中将图片叠加在一起之后在改变显示器分辨率的情况下会发生位置偏移的问题，本发明提供一种图片叠加的方法，该方法包括：

通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；

将至少一第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置上。

优选地，第一图片为电子地图，第二图片为图标。

进一步地，该方法还包括：

创建一个HTML，引入基于地图的应用程序接口对应的javascript脚本库；

通过基于地图的应用程序接口对应的javascript脚本库提供的脚本方法，实例化电子地图容器对象MAP；

定义图标对象，将地图容器对象MAP的底图的源地址，设置成第一图片所在的位置；

通过基于地图的应用程序接口提供的添加覆盖物的方法将图标添加到电子地图中。

本发明还提供了一种图片叠加系统，该系统包括：

第一图片加载模块，用于通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；

第二图片添加模块，用于将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置。

通过以上图片叠加方法和系统，由于图片叠加时绑定了地理坐标，所以在改变显示器分辨率的情况下不会偏离原来位置的问题。

通过阅读说明书，本领域普通技术人员将更好地了解这些技术方案的特征和内容。

附图说明

下面通过参考附图并结合实例具体地描述本发明，本发明的优点和实现方式将会更加明显，其中附图所示内容仅用于对本发明的解释说明，而不构成对本发明的任何意义上的限制，在附图中：

图1为本发明图片叠加方法流程图。

图2为本发明图片叠加系统结构图。

具体实施方式

如图1所示，本发明公开一种图片叠加方法，主要应用于网页制作，具体包括如下步骤：

步骤101:通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；

步骤102：将至少一第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置上。

作为优选的实施例，上文所说的第一图片通常为电子地图，可以是百度地图，谷歌地图等，而第二图片一般是图标，这些图标有着特殊的含义，用来标示地图上某个位置的特性。作为在安防领域，所说的第一图片一般为防区设计图，其用途是安防服务公司的工作人员根据此防区设计图，在需要安防服务的客户要求的区域，根据此图在对应的位置进行设备安装和维护，而所说的图标，一般为前端设备，如摄像头、探测器等。

为了方便理解，下面以在安防领域在防区设计图中叠加前端设备图标的场景对本发明的技术方案作进一步的描述。

1.通过百度地图、google地图、openlayers等地图API(ApplicationProgramming Interface，即基于地图的应用程序接口)创建一个地图对象，创建及设置的步骤如下：创建一个HTML（超文本标记语言，HypertextMarkup Language），引入API对应的javascript脚本库。

1.1通过API脚本库提供的脚本方法，实例化一个电子地图容器对象MAP。

1.2定义图片（图标）对象，将地图容器对象MAP的底图的源地址，设置成第一图片所在的位置，可以是网络图片，或者本地图片。（这个位置指的是电子地图网络地址，或者电子地图在本地的存储地址）

1.3通过API提供的添加覆盖物的方法，将图片（图标）对象添加到地图容器对象MAP中，具体实现如下，此处以Openlayers为例子，Openlayer为地图前端开发框架，有提供API。

创建底图容器：var map=new OpenLayers.Map('map');

创建一张图片（底图）：

Var image=new OpenLayers.Layer.Image("image","testImage.jpg",bounds,size,null）；

参数依次表示：

image表示对象在地图控件中显示的名字

testImage.jpg表示底图图片的来源（可以理解成图片的URL属性）

bounds表示底图容器的视窗的精度、纬度范围。

Size表示图片初始化的时候在底图容器中的大小，单位是像素（px）；添加覆盖物方法：map.addLayer(image)，表示将底图添加到底图容器中。

2、将需要叠加到电子地图上的图标，定义成一个或者多个地图标注Marker，在安防领域，电子地图为防区设计图时，这里的Marker可是前端设备如摄像头、探测器等，标注Marker包含的属性：摄像头、探测器所对应的图标、经纬度坐标POINT，POINT为防区设计图范围内的一个坐标。

需要说明的是：用电子地图API提供的覆盖物的方法是指将标注Marker添加到防区设计图的POINT位置。

定义Marker的尺寸大小

var size=new OpenLayers.Size(21,25)；

定义偏移量

var offset=new OpenLayers.Pixel(-(size.w/2),-size.h);

定义Marker的图标

var icon=new OpenLayers.Icon('A.png',size,offset)；

markers.addMarker(newOpenLayers.Marker(newOpenLayers.LonLat(0,0),icon))；

如图2所述，本发明还公开一种图片叠加系统，该系统包括：

第一图片加载模块201，用于通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；

至少一第二图片添加模块202，用于将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置。

作为优选的实施例，第一图片通常为电子地图，可以是百度地图，谷歌地图等，而第二图片一般是图标，这些图标有着特殊的含义，用来标示地图上某个位置的特性。作为在安防领域，所说的第一图片一般为防区设计图，其用途是安防服务公司的工作人员根据此防区设计图，在需要安防服务的客户要求的区域，根据此图在对应的位置进行设备安装和维护，而所说的图标，一般为前端设备，如摄像头、探测器等。

通过以上技术方案，特别是在安防技术领域，能够实现以地图坐标的方式确定每个前端设备在防区设计图上的位置，不受显示器分辨率的影响，同时，叠加后的图片可以进行放大、缩小、拖拽、不必使用浏览器自身的滚动条，使得操作非常方便。

以上参照附图说明了本发明的优选实施例，本领域技术人员不脱离本发明的范围和实质，可以有多种变型方案实现本发明。举例而言，作为一个实施例的部分示出或描述的特征可用于另一实施例以得到又一实施例。以上仅为本发明较佳可行的实施例而已，并非因此局限本发明的权利范围，凡运用本发明说明书及附图内容所作的等效变化，均包含于本发明的权利范围之内。

Claims

1.一种图片叠加的方法，其特征在于，包括：

通过基于地图的应用程序接口加载第一图片作为底图，所述底图上的每一个点，都对应一个地理坐标；

2.根据权利要求1所述的图片叠加的方法，其特征在于，所述的第一图片为电子地图，所述第二图片为图标。

3.根据权利要求2所述的图片叠加的方法，其特征在于，所述的方法进一步包括：

通过基于地图的应用程序接口对应的javascript脚本库提供的脚本方法，实例化地图容器对象MAP；

通过基于地图的应用程序接口提供的添加覆盖物的方法将图标添加到地图容器中。

4.根据权利要求2所述的图片叠加方法，其特征在于，所述电子地图为防区设计图，所述图标为摄像头或者探测器的图标。

5.一种图片叠加系统，其特征在于，包括：

第一图片加载模块，用于通过基于地图的应用程序接口加载第一图片作为底图，所述底图上的每一个点，都对应一个地理坐标；

至少一第二图片添加模块，用于将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置上。

6.根据权利要求5所述的图片叠加系统，其特征在于，所述的第一图片为电子地图，所述第二图片为图标。

7.根据权利要求6所述的图片叠加系统，其特征在于，所述电子地图为防区设计图，所述图标为摄像头或者探测器的图标。