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

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

【技术实现步骤摘要】

本专利技术属于图片处理
，更具体地涉及一种图片叠加的方法和系统。
技术介绍
在图片处理
，特别是在网页制作时，经常性地会碰到需要将图片叠加的情况，以满足不同行业的不同需求。比如需要将一张图片B叠加在另外一张图片A之上，以图片A为背景，图片B在图片A的位置固定，且当更换屏幕分辨率时，图片B(可以是多张图片)的位置仍然处于图片A原有位置不变。这种场景非常常见的应用如在电子地图上加载一些图标，这些图标可能是文字或者特殊的标记。 针对以上技术问题，现有技术中一般情况下采用的方式是用javascript浏览器脚本语言记录需要叠加的图标在底图对应的像素点位置(Χ，γ)从而实现图片的叠加，但是，这种技术的缺点主要在于I、底图A不可移动、放大、缩小，查看叠加后的图片或者地图必须依赖于浏览器的滚动条，操作不方便。2、由于软件不可能永远只在一台机器上面运行，所以记录图片的像素坐标，肯定会因为不同的显示器分辨率带来问题，使得图片B偏离其本来位置。
技术实现思路
本专利技术的特征和优点在下文的描述中部分地陈述，或者可从该描述显而易见，或者可通过实践本专利技术而学习。为解决现有技术中将图片叠加在一起之后在改变显示器分辨率的情况下会发生位置偏移的问题，本专利技术提供一种图片叠加的方法，该方法包括通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；将至少一第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置上。优选地，第一图片为电子地图，第二图片为图标。进一步地，该方法还包括创建一个HTML,引入基于地图的应用程序接口对应的javascript脚本库；通过基于地图的应用程序接口对应的javascript脚本库提供的脚本方法,实例化电子地图容器对象MAP ;定义图标对象，将地图容器对象MAP的底图的源地址，设置成第一图片所在的位置；通过基于地图的应用程序接口提供的添加覆盖物的方法将图标添加到电子地图中。本专利技术还提供了一种图片叠加系统，该系统包括第一图片加载模块，用于通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；第二图片添加模块，用于将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置。通过以上图片叠加方法和系统，由于图片叠加时绑定了地理坐标，所以在改变显示器分辨率的情况下不会偏离原来位置的问题。通过阅读说明书，本领域普通技术人员将更好地了解这些技术方案的特征和内容。附图说明 下面通过参考附图并结合实例具体地描述本专利技术，本专利技术的优点和实现方式将会更加明显，其中附图所示内容仅用于对本专利技术的解释说明，而不构成对本专利技术的任何意义上的限制，在附图中图I为本专利技术图片叠加方法流程图。图2为本专利技术图片叠加系统结构图。具体实施例方式如图I所示，本专利技术公开一种图片叠加方法，主要应用于网页制作，具体包括如下步骤步骤101:通过基于地图的应用程序接口加载第一图片作为底图，底图上的每一个点，都对应一个地理坐标；步骤102 :将至少一第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置上。作为优选的实施例，上文所说的第一图片通常为电子地图，可以是百度地图，谷歌地图等，而第二图片一般是图标，这些图标有着特殊的含义，用来标示地图上某个位置的特性。作为在安防领域，所说的第一图片一般为防区设计图，其用途是安防服务公司的工作人员根据此防区设计图，在需要安防服务的客户要求的区域，根据此图在对应的位置进行设备安装和维护，而所说的图标，一般为前端设备，如摄像头、探测器等。为了方便理解，下面以在安防领域在防区设计图中叠加前端设备图标的场景对本专利技术的技术方案作进一步的描述。I.通过百度地图、google 地图、openlayers 等地图 API (ApplicationProgrammingInterface，即基于地图的应用程序接口 )创建一个地图对象，创建及设置的步骤如下创建一个 HTML (超文本标记语言，HypertextMarkup Language),引入 API 对应的 javascript脚本库。I. I通过API脚本库提供的脚本方法，实例化一个电子地图容器对象MAP。I. 2定义图片(图标)对象，将地图容器对象MAP的底图的源地址，设置成第一图片所在的位置，可以是网络图片，或者本地图片。(这个位置指的是电子地图网络地址，或者电子地图在本地的存储地址)I. 3通过API提供的添加覆盖物的方法，将图片(图标)对象添加到地图容器对象MAP中，具体实现如下,此处以Openlayers为例子,Openlayer为地图前端开发框架,有提供API。创建底图容器varmap=new OpenLayers. Map (’map’)；创建一张图片(底图)Var image = new OpenLayers. Layer. Image (〃 image 〃，〃testlmage.jpg〃，bounds, size, null)； 参数依次表示image表示对象在地图控件中显示的名字testlmage. 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，用于将第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置。作为优选的实施例，第一图片通常为电子地图，可以是百度地图，谷歌地图等，而第二图片一般是图标，这些图标有着特殊的含义，用来标示地图上某个位置的特性。作为在安防领域，所说的第一图片一般为防区设计图，其用途是安防服务公司的工作人员根据此防区设计图，在需要安防服务的客户要求的区域，根据此图在对应的位置进行设备安装和维护，而所说的图标，一般为前端设备，如摄像头、探测器等。通过以上技术方案，特本文档来自技高网...

【技术保护点】
一种图片叠加的方法，其特征在于，包括：通过基于地图的应用程序接口加载第一图片作为底图，所述底图上的每一个点，都对应一个地理坐标；将至少一第二图片以标注的形式添加到所需要放置的底图所对应的地理坐标位置上。

【技术特征摘要】

【专利技术属性】
技术研发人员：王志维，杨正平，田志勇，
申请(专利权)人：安科智慧城市技术中国有限公司，武汉恒亿电子科技发展有限公司，
类型：发明
国别省市：