CN110399580B - 浏览器中显示目标样式的方法及装置 - Google Patents

Abstract

本发明提供了一种浏览器中显示目标样式的方法及装置。包括：获取层叠样式表第一CSS，其中，第一CSS中包括第一属性和第一目标控件中的目标函数，目标函数用于在目标函数的输入为第一属性时形成具有第一属性的第一目标样式；在浏览器支持第一目标控件的情况下，调用第一目标控件中的目标函数，其中，第一属性作为目标函数的输入；在浏览器中显示第一目标样式，其中，第一目标样式是调用目标函数所形成的具有第一属性的样式。通过本发明，解决了CSS属性与浏览器的不兼容，导致在浏览器中无法渲染出CSS样式的问题，进而达到了丰富浏览器渲染样式的效果。

Description

浏览器中显示目标样式的方法及装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种浏览器中显示目标样式的方法及装置。

背景技术

层叠样式表(Cascading Style Sheets，简称CSS)，是一种用来为结构化文档(如HTML，超文本标记语言)添加样式的计算机语言。软件开发者可以通过CSS属性在浏览器中设计出多种网页样式。

每一个可以在浏览器中渲染的CSS属性都要符合相应的CSS标准。目前存在一种现象，软件开发者通过CSS设计出新颖的样式。但是，由于浏览器并不兼容新的CSS属性，导致在浏览器中无法渲染出这些新颖的样式。然而，纵观CSS历史，每个新的CSS属性被写入CSS标准需要经过一整套的标准制定流程，需要很长的时间。

因此，针对相关技术中，由于CSS属性与浏览器的不兼容，导致在浏览器中无法渲染出CSS样式的问题，目前尚未存在一种有效的解决方案。

发明内容

本发明实施例提供了一种浏览器中显示目标样式的方法及装置，以至少解决相关技术中CSS属性与浏览器的不兼容，导致在浏览器中无法渲染出CSS样式的问题。

根据本发明的一个方面，提供了一种浏览器中显示目标样式的方法，包括：获取层叠样式表第一CSS，其中，第一CSS中包括第一属性和第一目标控件中的目标函数，目标函数用于在目标函数的输入为第一属性时形成具有第一属性的第一目标样式；在浏览器支持第一目标控件的情况下，调用第一目标控件中的目标函数，其中，第一属性作为目标函数的输入；在浏览器中显示第一目标样式，其中，第一目标样式是调用目标函数所形成的具有第一属性的样式。

根据本发明的另一个方面，提供了一种浏览器中显示目标样式的装置，包括：获取模块，用于获取层叠样式表第一CSS，其中，第一CSS中包括第一属性和第一目标控件中的目标函数，目标函数用于在目标函数的输入为第一属性时形成具有第一属性的第一目标样式；调用模块，用于在浏览器支持第一目标控件的情况下，调用第一目标控件中的目标函数，其中，第一属性作为目标函数的输入；显示模块，用于在浏览器中显示第一目标样式，其中，第一目标样式是调用目标函数所形成的具有第一属性的样式。

根据本发明的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

根据本发明的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。

通过本发明，由于在浏览器支持第一目标控件的情况下，通过调用第一目标控件中的目标函数，将第一属性作为目标函数的输入，形成具有第一属性的第一目标样式在浏览器中进行显示。对于浏览器不支持的CSS属性通过第一目标控件中的目标函数实现，由此避免了CSS属性与浏览器的不兼容问题。因此，可以解决CSS属性与浏览器的不兼容，导致在浏览器中无法渲染出CSS样式的问题，达到可以通过第一目标控件在浏览器中渲染出CSS无法实现的样式，丰富浏览器渲染样式的技术效果。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的浏览器中显示目标样式的方法的硬件环境的示意图；

图2是根据本发明实施例的浏览器中显示目标样式的流程图；

图3是根据本发明可选实施例的单个渲染图层示意图；

图4是根据本发明可选实施例的多个渲染图层叠加示意图；

图5是根据本发明可选实施例的渲染在瓦片上示意图；

图6是根据本发明可选实施例的事件绑定在渲染层的示意图；

图7是根据本发明可选实施例的事件绑定在最上层图层的示意图；

图8是根据本发明可选实施例的通过Houdini技术渲染地理要素的流程图；

图9是根据本发明实施例的浏览器中显示目标样式的装置的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明实施例，提供了一种浏览器中显示目标样式的方法实施例。

可选地，在本实施例中，上述浏览器中显示目标样式的方法可以应用于如图1所示的由服务器102和终端104所构成的硬件环境中。如图1所示，服务器102通过网络与终端104进行连接，上述网络包括但不限于：广域网、城域网或局域网，终端104并不限定于PC、手机、平板电脑等。本发明实施例的事浏览器中显示目标样式的方法可以由服务器102来执行，也可以由终端104来执行，还可以是由服务器102和终端104共同执行。其中，终端104执行本发明实施例的浏览器中显示目标样式的方法也可以是由安装在其上的客户端来执行。

图2是根据本发明实施例的浏览器中显示目标样式的流程图，如图2所示，该方法可以包括以下步骤：

步骤S202，获取层叠样式表第一CSS，其中，第一CSS中包括第一属性和第一目标控件中的目标函数，目标函数用于在目标函数的输入为第一属性时形成具有第一属性的第一目标样式；

其中，第一目标控件是一种图形渲染工具，包括但不限定为Houdini，Houdini是一款三维计算机图形软件，可运行于Linux、Windows、Mac OS等操作系统，其自带的渲染器是Mantra，Houdini提供了一系列第三方渲染器的接口(API)，以使开发者能够介入浏览器的CSS engine(引擎)操作。

步骤S204，在浏览器支持第一目标控件的情况下，调用第一目标控件中的目标函数，其中，第一属性作为目标函数的输入；

其中，由第一控件中的目标函数绘制出形状及动画效果。

步骤S206，在浏览器中显示第一目标样式，其中，第一目标样式是调用目标函数所形成的具有第一属性的样式。

其中，现有技术中若仅使用CSS在浏览器中绘制第一目标样式，那么所有第一目标样式中所包含的所有属性均需要通过脚本语言在CSS中实现，但是，CSS中的某些属性与浏览器是不兼容的，此时会出现错误，甚至无法在浏览器中显示出具体样式。例如，若在CSS中绘制圆形的属性与浏览器不兼容，那么在浏览器中是无法显示出该圆形样式的。而本申请将圆形的属性在第一目标控件(如Houdini)中绘制，可以避免CSS中的圆形属性与浏览器的不兼容问题，仅需要通过CSS对第一目标控件Houdini中的圆形属性进行赋值，即可得到填充为蓝色的圆形样式。

通过本发明，由于在浏览器支持第一目标控件的情况下，通过调用第一目标控件中的目标函数，将第一属性作为目标函数的输入，形成具有第一属性的第一目标样式在浏览器中进行显示。对于浏览器不支持的CSS属性通过第一目标控件中的目标函数实现，由此避免了CSS属性与浏览器的不兼容问题。因此，可以解决CSS属性与浏览器的不兼容，导致在浏览器中无法渲染出CSS样式的问题，达到可以通过第一目标控件在浏览器中渲染出CSS无法实现的样式，丰富浏览器渲染样式的技术效果。

可选地，上述步骤的执行主体可以为计算机终端等，但不限于此。

作为一种可选的实施例，在调用第一目标控件中的目标函数之前，上述方法包括：在第一目标控件中注册目标函数，其中，注册后的目标函数用于允许被CSS调用。在本实施例中，在调用目标函数之前，需要在第一目标控件中注册目标函数，以使在浏览器中无法显示的某些CSS属性，通过第一目标控件中的目标函数实现。具体地，以第一目标控件为Houdini为例，Houdini提供了一系列的API接口，使得开发者能够介入浏览器的CSS引擎操作，从而可以解决CSS长久以来存在的跨浏览器兼容问题。如果浏览器支持Houdini，使用Houdini的paint接口注册目标函数，如在下列程序代码中，“registerPaint”，即在Houdini中通过paint注册了名称为“circle”的目标函数。注册后的目标函数允许被CSS调用。

作为一种可选的实施例，上述方法还包括：根据第一CSS中的第二属性确定第一目标样式的形成位置，其中，形成位置包括第一目标样式所在的目标图层，以及第一目标样式在目标图层中的目标位置。在本实施例中，浏览器中所显示的样式是通过图层渲染出来的，将第一目标样式渲染在多个图层中以使浏览器呈现出的第一目标样式更加形象逼真。第一CSS中的第二属性指示第一目标样式的在图层中的形成位置，该形成位置包括渲染的所在目标图层，以及在目标图层中的目标位置。

作为一种可选的实施例，根据第一CSS中的第二属性确定所述第一目标样式的形成位置包括：将第二属性中的图层标识表示的用于形成所述第一目标样式的图层确定为目标图层；将第二属性中的位置标识表示的用于形成第一目标样式的位置确定为目标位置。在上述实施例中，根据第一CSS中的第二属性确定第一目标样式的形成位置包括：将第二属性中的图层标识表示的用于形成第一目标样式的图层确定为目标图层；将第二属性中的位置标识表示的用于形成第一目标样式的位置确定为目标位置。

作为一种可选的实施例，在浏览器中显示第一目标样式，包括：在第一渲染图层中渲染第一目标样式，得到第二渲染图层；在浏览器中显示第二渲染图层。第一渲染图层包括：单个图层，多个图层及瓦片图层，其中，在目标图层中渲染第一目标样式，包括：在第一渲染图层为单个图层的情况下，根据第二属性中的位置标识确定在单个图层中形成第一目标样式的第一目标位置，在第一目标位置上，渲染第一目标样式；在第一渲染图层为多个图层的情况下，根据第二属性中的图层标识，确定形成第一目标样式的目标图层，并根据第二属性中的目标位置确定在目标图层中形成第一目标样式的第二目标位置，在目标图层的第二目标位置上渲染第一目标样式；在第一渲染图层为瓦片图层的情况下，根据第二属性中的图层标识，确定形成第一目标样式的目标瓦片，并根据第二属性中的目标位置确定在目标瓦片中形成第一目标样式的第三目标位置，在目标瓦片的第三目标位置上渲染第一目标样式，其中，瓦片图层为将单个图层划分为多个瓦片形成的。在本实施例中，渲染图层的种类包括：单个渲染图层，多个渲染图层，以及渲染在瓦片上，其中，图3是根据本发明可选实施例的单个渲染图层示意图，即用一个图层渲染全部的地理要素。这种形式最为简单，适用于静态数据。对于动态数据，或数据须及时响应用户交互，此种方案性能较差，可用多个渲染图层，以及渲染在瓦片上代替。图4是根据本发明可选实施例的多个渲染图层叠加示意图，在多个图层中对目标样式进行渲染可以拆分静态数据和动态数据。动态数据变化造成重新渲染时，不会对静态数据层造成影响，从而提高性能。图5是根据本发明可选实施例的渲染在瓦片上示意图，例如，在对地理要素进行渲染时，如网页地图，多包含瓦片系统。由于本申请是通过CSS属性作为输入，通过第一目标控件实现在浏览器中渲染样式，可以插件式地渲染到已有瓦片上，从而可以利用瓦片本身的性能优势。且由于没有图层叠加，浏览器在渲染时减少了耗时，提高了渲染的效率，使得性能得以进一步提升。其中，图层标识用于标识在哪个图层中渲染目标样式，如在图4所示的多个渲染图层中，图层标识可以指示在交互层、路网层或居民楼层进行绘制。而位置标识用于表示在目标图层的哪个位置上进行渲染，在背景上渲染、在蒙层上渲染或者是在边框上渲染，其中在背景上渲染可以通过：background-image：paint(paintworklet)实现；在蒙层上渲染通过：mask-image：paint(paintworklet)实现；在边框上渲染通过border-image：paint(paintworklet)实现；其中，paintworklet是在第一目标控件(例如，Houdini)中注册的目标函数。

作为一种可选的实施例，上述方法还包括：在第一目标样式中绑定目标事件，包括：在第一渲染图层为单个图层和/或瓦片图层的情况下，将目标事件绑定在触发信号所指示的第一绑定位置上；在第一渲染图层为多个图层的情况下，将目标事件绑定在最上层图层中触发信号所指示的第二绑定位置上。在本实施例中，本方案依附的标签只是普通的HTML元素，因而可以在其上绑定任何事件，但如果要将事件绑定到单个的地理要素上，需要根据触发信号所指示的位置进行事件绑定，以触发信号是通过鼠标所触发的为例，通过鼠标的具体位置查找所有落在该位置上的所有地理要素，此部分通过Javascript脚本语言实现，当使用单个图层进行渲染时，图6是根据本发明可选实施例的事件绑定在渲染层的示意图。当使用多个图层渲染时，事件应该且只须绑定在最上层图层上，图7是根据本发明可选实施例的事件绑定在最上层图层的示意图。

作为一种可选的实施例，在浏览器中显示第一目标样式之后，上述方法还包括：获取第二CSS，其中，第二CSS中包括第三属性和目标函数，目标函数用于在目标函数的输入为第三属性时形成具有第三属性的第二目标样式，第三属性与所述第一属性不同；调用第一目标控件中的目标函数，其中，第三属性作为目标函数的输入；在浏览器中显示调用目标函数所形成的具有第三属性的所述第二目标样式。在本实施例中，由于第一目标控件(例如，Houdini)的数据来源是CSS属性，所以第一目标控件可以通过CSS遍历地切换渲染的样式，且能够支持插件式地附着在任意HTML上。目标样式的切换可以通过修改CSS中的属性或者使用同一CSS中不同属性分别对目标函数进行赋值，或者调用不同的CSS中的属性对CSS样式进行切换。

获取到的第二CSS所包含的第三属性，第三属性可以是对第一属性进行修改后的属性，也可以是在同一个CSS中除了第一属性之外的其它属性，还可以是不同CSS中的属性。通过第三属性对目标函数进行赋值，得到第二目标样式，由此通过属性的改变实现样式的切换。例如，在下列程序代码中，circle-color：blue是第一属性，调用注册的registerPaitn的circle目标函数后，在浏览器中显示的是填充为蓝色的圆形。

样式的切换可以通过修改第一属性，如将第一属性circle-color：blue修改为第三属性circle-color：red；调用注册的registerPaitn的circle目标函数后，在浏览器中显示的是填充为红色的圆形。

或者第一属性circle-color：blue和第三属性circle-color：red在同一个CSS中，通过第一属性对目标函数赋值后，通过第三属性对目标函数再次赋值，此时，通过两次赋值实现填充为蓝色的圆形与填充为红色的圆形的样式切换。

或者，第一属性circle-color：blue和第三属性circle-color：red分别在两个不同的第一CSS和第二CSS中，第一CSS中的第一属性circle-color：blue对目标函数赋值后，在浏览器中显示的是填充为蓝色的圆形，第二CSS中的第三属性circle-color：red对目标函数赋值后，在浏览器中显示的是填充为红色的圆形，由此实现样式的切换。在本实施例中，红色、蓝色、圆形均是为了举例说明第一目标样式和第二目标样式的切换过程。以此并不造成对本申请的限定，具体的样式可以根据实际情况进行设置。

作为一种可选的实施例，在浏览器中显示调用目标函数所形成的具有第三属性的第二目标样式包括：在第二目标样式的显示区域与第一目标样式的显示区域重合的情况下，在浏览器中取消显示第一目标样式，并显示第二目标样式；在第二目标样式的显示区域与第一目标样式的显示区域不重合的情况下，在浏览器中取消显示第一目标样式，并显示第二目标样式；或者，在浏览器中显示第一目标样式和第二目标样式。在本实施例中，样式的切换可以是在同一区域中实现，也可以是在不同的区域中实现。具体地，第一样式和第二样式的显示区域可以是重合的也可以是不重合的。在同一区域中实现样式的切换，在浏览器中显示完第一样式之后，取消显示第一样式，并显示第二样式。在不同区域中实现样式的切换，第一样式和第二样式可以同时分别在对应的显示区域进行显示，也可以在第一样式显示之后显示第二样式。

下面以通过Houdini技术渲染地理要素为例，通过一个具体实施例说明本申请。

Houdini技术，原本是用以解决CSS领域诟病已久的浏览器兼容性问题，但由于该技术具有极佳的渲染性能、易用的API接口、适用于矢量地理数据渲染的天然特性，本方案使用Houdini实现高效的渲染矢量地理数据，此方案支持交互，能够通过CSS遍历地切换渲染样式，且能够支持插件式地附着在任意HTML(超文本标记语言)元素上。图8是根据本发明可选实施例的通过Houdini技术渲染地理要素的流程图。具体实现步骤如下：

步骤1：判断浏览器是否支持第一目标控件Houdini。具体地，可通过判断CSS全局变量中，是否具有paintWorklet属性，该属性是可以Houdini中注册的，paintWorklet是属性名称，可以任意设置。

步骤2：如果浏览器不支持Houdini，使用canvas技术作为降级方案。其中，canvas是一个使用脚本语言绘制图形的HTML元素。须将调用canvas api接口进行地理矢量数据渲染的功能，封装为一个可复用的接口。

步骤3：如果浏览器支持Houdini，使用Houdini的paint api接口，注册一个包含paintWorklet属性的目标函数，paintWorklet是任意设置的属性名称。该目标函数与上述canvas具有相同的api，唯一的差别是数据来源不同，canvas的数据来源是脚本语言提供的，Houdini的数据来源是CSS属性，如第一属性。

步骤4：设置渲染地理矢量数据相关的CSS样式。

该部分样式由两部分组成：全局样式和局部样式。其中，全局样式是默认的渲染样式，通过CSS自定义样式实现，属性名和值可以灵活配置，只须与目标函数保持一致。局部样式使用classname标记局部样式，该样式将覆盖全局样式，以实现渲染不同类型的地理要素。在标记局部样式中，最复杂的属性是标记地理要素对应的几何数据的CSS属性，由于地理要素数据量巨大，该属性的解析会成为本发明渲染性能的瓶颈，可以以json格式和编码格式实现。其中，json格式，该格式配置灵活，且在编译和解译时有原生的Javascript api支持，具有较好的性能。编码格式，将绘制过程抽象为指令、执行次数、参数的组合。这种格式的好处是大大减小了数据量，编译和解译较为简单，能够保证较好的性能。假设指令移动到(MoveTo)对应1，连接到(LineTo)对应2，json格式的数据将转变为如下编码：

1 1 115 233 2 1 117 254 1 1 116 243

步骤5：判断是否需要绘制文字。在需要绘制文字的情况下，文字部分由由canvas渲染。

Houdini暂不支持文字渲染，而部分地理要素包含文字信息，如注记。所以文字的渲染应回退到canvas技术方案，交由canvas渲染。

步骤6：为需要渲染地理要素的目标标签设置CSS样式。目前可通过以下几个CSS属性实现：

background-image:paint(paintworklet)；在背景上渲染

mask-image:paint(paintworklet)；在蒙层上渲染

border-image:paint(paintworklet)；在边框上渲染

任何拥有上述属性的便签，都将获得渲染地理要素的能力。由于CSS对于浏览器网页应用是全局的、插入式的，因而本方案可以在修改当前页面任何结构的情况下，完成渲染。另外，如何组织标签以渲染全部的地理要素也会影响应用本发明时的性能，布局和结构会影响渲染次数及用户体验，可以按照图3至图5中的单个渲染图层、多个渲染图层和渲染在瓦片上，渲染全部的地理要素。

步骤7：绑定事件。本方案依附的标签只是普通的HTML元素，因而可以在其上绑定任何事件，但如果要将事件绑定到单个的地理要素上，需要根据鼠标的具体位置查找所有落在该位置上的所有地理要素，此部分通过Javascript脚本语言实现，当使用单个图层进行渲染时，图6是根据本发明可选实施例的事件绑定在渲染层的示意图。当使用多个图层渲染时，事件应该且只须绑定在最上层图层上，图7是根据本发明可选实施例的事件绑定在最上层图层的示意图。

本方案本质上只是一个CSS样式，而CSS对于浏览器网页应用而言，本就是插入式，全局影响的，故该方案对于已有的应用入侵极小，能够和业内所有的浏览器端web地图引擎完美契合，能够大大缩减开发周期。

在本实施例中还提供了一种浏览器中显示目标样式的装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图9是根据本发明实施例的浏览器中显示目标样式的装置的结构框图，如图9所示，该装置包括：获取模块902，用于获取层叠样式表第一CSS，其中，第一CSS中包括第一属性和第一目标控件中的目标函数，目标函数用于在目标函数的输入为第一属性时形成具有第一属性的第一目标样式；调用模块904，用于在浏览器支持第一目标控件的情况下，调用第一目标控件中的目标函数，其中，第一属性作为目标函数的输入；显示模块906，用于在所述浏览器中显示所述第一目标样式，其中，所述第一目标样式是调用所述目标函数所形成的具有所述第一属性的样式。

在一个可选实施例，上述装置还包括：确定模块，用于根据所述第一CSS中的第二属性确定所述第一目标样式的形成位置，其中，所述形成位置包括所述第一目标样式所在的目标图层，以及所述第一目标样式在所述目标图层中的目标位置。

在一个可选实施例，上述装置还用于，在调用第一目标控件中的目标函数之前，在第一目标控件中注册目标函数，其中，注册后的目标函数用于允许被CSS调用。

在一个可选实施例，上述装置还用于，根据第一CSS中的第二属性确定第一目标样式的形成位置，其中，形成位置包括第一目标样式所在的目标图层，以及第一目标样式在目标图层中的目标位置。

在一个可选实施例，上述装置通过如下方式实现根据第一CSS中的第二属性确定第一目标样式的形成位置：将第二属性中的图层标识表示的用于形成第一目标样式的图层确定为目标图层；将第二属性中的位置标识表示的用于形成第一目标样式的位置确定为目标位置。

在一个可选实施例，上述显示模块906用于通过如下方式实现在所述浏览器中显示所述第一目标样式，在第一渲染图层中渲染所述第一目标样式，得到第二渲染图层；在所述浏览器中显示所述第二渲染图层。

在一个可选实施例，第一渲染图层包括：单个图层，多个图层及瓦片图层，其中，上述显示模块用于通过如下方式实现在目标图层中渲染第一目标样式，在第一渲染图层为单个图层的情况下，根据第二属性中的位置标识确定在单个图层中形成第一目标样式的第一目标位置，在第一目标位置上，渲染第一目标样式；在第一渲染图层为多个图层的情况下，根据第二属性中的图层标识，确定形成第一目标样式的目标图层，并根据第二属性中的目标位置确定在目标图层中形成第一目标样式的第二目标位置，在目标图层的第二目标位置上渲染第一目标样式；在第一渲染图层为瓦片图层的情况下，根据第二属性中的图层标识，确定形成第一目标样式的目标瓦片，并根据第二属性中的目标位置确定在目标瓦片中形成第一目标样式的第三目标位置，在目标瓦片的第三目标位置上渲染第一目标样式，其中，瓦片图层为将单个图层划分为多个瓦片形成的。

在一个可选实施例，上述装置还用于，在所述第一目标样式中绑定目标事件，在所述第一渲染图层为所述单个图层和/或所述瓦片图层的情况下，将所述目标事件绑定在触发信号所指示的第一绑定位置上；在所述第一渲染图层为所述多个图层的情况下，将所述目标事件绑定在最上层图层中触发信号所指示的第二绑定位置上。

在一个可选实施例，上述装置还用于，在所述浏览器中显示所述第一目标样式，其中，所述第一目标样式是调用所述目标函数所形成的具有所述第一属性的样式之后，获取第二CSS，其中，第二CSS中包括第三属性和目标函数，目标函数用于在目标函数的输入为第三属性时形成具有第三属性的第二目标样式，第三属性与第一属性不同；调用第一目标控件中的目标函数，其中，第三属性作为目标函数的输入；在浏览器中显示调用目标函数所形成的具有第三属性的第二目标样式。

在一个可选实施例，上述装置还用于通过如下方式实现在浏览器中显示调用目标函数所形成的具有第三属性的第二目标样式：在第二目标样式的显示区域与第一目标样式的显示区域重合的情况下，在浏览器中取消显示第一目标样式，并显示第二目标样式；在第二目标样式的显示区域与第一目标样式的显示区域不重合的情况下，在浏览器中取消显示第一目标样式，并显示第二目标样式；或者，在浏览器中显示第一目标样式和第二目标样式。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

本发明的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，获取层叠样式表第一CSS，其中，所述第一CSS中包括第一属性和第一目标控件中的目标函数，所述目标函数用于在所述目标函数的输入为所述第一属性时形成具有所述第一属性的第一目标样式；

S2，在浏览器支持所述第一目标控件的情况下，调用所述第一目标控件中的所述目标函数，其中，所述第一属性作为所述目标函数的输入；

S3，在所述浏览器中显示所述第一目标样式，其中，所述第一目标样式是调用所述目标函数所形成的具有所述第一属性的样式。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，获取层叠样式表第一CSS，其中，所述第一CSS中包括第一属性和第一目标控件中的目标函数，所述目标函数用于在所述目标函数的输入为所述第一属性时形成具有所述第一属性的第一目标样式；

S2，在浏览器支持所述第一目标控件的情况下，调用所述第一目标控件中的所述目标函数，其中，所述第一属性作为所述目标函数的输入；

S3，在所述浏览器中显示所述第一目标样式，其中，所述第一目标样式是调用所述目标函数所形成的具有所述第一属性的样式。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (11)

1.一种浏览器中显示目标样式的方法，其特征在于，包括：

获取层叠样式表第一CSS，其中，所述第一CSS中包括第一属性和第一目标控件中的目标函数，所述第一目标控件包括三维计算机图形软件Houdini，所述Houdini用于渲染矢量地理要素，所述目标函数用于在所述目标函数的输入为所述第一属性时形成具有所述第一属性的第一目标样式，其中，所述目标函数用于绘制形状及动画效果，所述第一目标样式包括全局样式和局部样式，所述全局样式是默认的渲染样式，通过CSS自定义样式实现，所述全局样式的属性名和值与所述目标函数保持一致，所述局部样式用于渲染不同类型的地理要素，在标记所述局部样式中通过json格式和编码格式标记所述地理要素对应的几何数据的CSS属性；

在浏览器支持所述第一目标控件的情况下，调用所述第一目标控件中的所述目标函数，其中，所述第一属性作为所述目标函数的输入；

在第一渲染图层中渲染所述第一目标样式，得到第二渲染图层，所述第一目标样式是调用所述目标函数所形成的具有所述第一属性的样式；在所述浏览器中显示所述第二渲染图层；

其中，在所述第一渲染图层包括多个图层的情况下，静态数据和动态数据被分别渲染在所述多个图层中的不同图层中，所述动态数据变化造成重新渲染时，不会对静态数据层造成影响；在所述第一渲染图层包括瓦片图层的情况下，将所述地理要素插入式地渲染到已有瓦片上，所述瓦片图层为将单个图层划分为多个瓦片形成的；

在将事件绑定到单个的地理要素，且所述第一渲染图层为所述单个图层和/或所述瓦片图层的情况下，将目标事件绑定在触发信号所指示的第一绑定位置上，所述事件用于查看事件对应的位置上的所有地理要素；在将事件绑定到单个的地理要素，且所述第一渲染图层为所述多个图层的情况下，将所述目标事件绑定在最上层图层中触发信号所指示的第二绑定位置上。

2.根据权利要求1所述的方法，其特征在于，在调用所述第一目标控件中的所述目标函数之前，所述方法包括：

在所述第一目标控件中注册所述目标函数，其中，注册后的所述目标函数用于允许被CSS调用。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

根据所述第一CSS中的第二属性确定所述第一目标样式的形成位置，其中，所述形成位置包括所述第一目标样式所在的目标图层，以及所述第一目标样式在所述目标图层中的目标位置，所述目标图层为所述第一渲染图层。

4.根据权利要求3所述的方法，其特征在于，所述根据所述第一CSS中的第二属性确定所述第一目标样式的形成位置包括：

将所述第二属性中的图层标识表示的用于形成所述第一目标样式的图层确定为所述目标图层；

将所述第二属性中的位置标识表示的用于形成所述第一目标样式的位置确定为所述目标位置。

5.根据权利要求4所述的方法，其特征在于，所述第一渲染图层包括：单个图层，所述多个图层及瓦片图层，其中，在所述第一渲染图层中渲染所述第一目标样式，包括：

在所述第一渲染图层为所述单个图层的情况下，根据所述第二属性中的所述位置标识确定在所述单个图层中形成所述第一目标样式的第一目标位置，在所述第一目标位置上，渲染所述第一目标样式；

在所述第一渲染图层为所述多个图层的情况下，根据所述第二属性中的图层标识，确定形成所述第一目标样式的目标图层，并根据所述第二属性中的所述目标位置确定在所述目标图层中形成所述第一目标样式的第二目标位置，在所述目标图层的所述第二目标位置上渲染所述第一目标样式；

在所述第一渲染图层为所述瓦片图层的情况下，根据所述第二属性中的图层标识，确定形成所述第一目标样式的目标瓦片，并根据所述第二属性中的所述目标位置确定在所述目标瓦片中形成所述第一目标样式的第三目标位置，在所述目标瓦片的所述第三目标位置上渲染所述第一目标样式。

6.根据权利要求1所述的方法，其特征在于，在所述浏览器中显示所述第一目标样式之后，所述方法还包括：

获取第二CSS，其中，所述第二CSS中包括第三属性和所述目标函数，所述目标函数用于在所述目标函数的输入为所述第三属性时形成具有所述第三属性的第二目标样式，所述第三属性与所述第一属性不同；

调用所述第一目标控件中的所述目标函数，其中，所述第三属性作为所述目标函数的输入；

在所述浏览器中显示调用所述目标函数所形成的具有所述第三属性的所述第二目标样式。

7.根据权利要求6所述的方法，其特征在于，所述在所述浏览器中显示调用所述目标函数所形成的具有所述第三属性的所述第二目标样式包括：

在所述第二目标样式的显示区域与所述第一目标样式的显示区域重合的情况下，在所述浏览器中取消显示所述第一目标样式，并显示所述第二目标样式；

在所述第二目标样式的显示区域与所述第一目标样式的显示区域不重合的情况下，在所述浏览器中取消显示所述第一目标样式，并显示所述第二目标样式；或者，在所述浏览器中显示所述第一目标样式和所述第二目标样式。

8.一种浏览器中显示目标样式的装置，其特征在于，包括：

获取模块，用于获取层叠样式表第一CSS，其中，所述第一CSS中包括第一属性和第一目标控件中的目标函数，所述第一目标控件包括三维计算机图形软件Houdini，所述Houdini用于渲染矢量地理要素，所述目标函数用于在所述目标函数的输入为所述第一属性时形成具有所述第一属性的第一目标样式，其中，所述目标函数用于绘制形状及动画效果，所述第一目标样式包括全局样式和局部样式，所述全局样式是默认的渲染样式，通过CSS自定义样式实现，所述全局样式的属性名和值与所述目标函数保持一致，所述局部样式用于渲染不同类型的地理要素，在标记所述局部样式中通过json格式和编码格式标记所述地理要素对应的几何数据的CSS属性；

调用模块，用于在浏览器支持所述第一目标控件的情况下，调用所述第一目标控件中的所述目标函数，其中，所述第一属性作为所述目标函数的输入；

显示模块，用于在第一渲染图层中渲染所述第一目标样式，得到第二渲染图层，所述第一目标样式是调用所述目标函数所形成的具有所述第一属性的样式；在所述浏览器中显示所述第二渲染图层，其中，在所述第一渲染图层包括多个图层的情况下，静态数据和动态数据被分别渲染在所述多个图层中的不同图层中，所述动态数据变化造成重新渲染时，不会对静态数据层造成影响；在所述第一渲染图层包括瓦片图层的情况下，将所述地理要素插入式地渲染到已有瓦片上，所述瓦片图层为将单个图层划分为多个瓦片形成的；

用于执行以下步骤的模块：在将事件绑定到单个的地理要素，且所述第一渲染图层为所述单个图层和/或所述瓦片图层的情况下，将目标事件绑定在触发信号所指示的第一绑定位置上，所述事件用于查看事件对应的位置上的所有地理要素；在将事件绑定到单个的地理要素，且所述第一渲染图层为所述多个图层的情况下，将所述目标事件绑定在最上层图层中触发信号所指示的第二绑定位置上。

9.根据权利要求8所述的装置，其特征在于，所述装置还包括：

确定模块，用于根据所述第一CSS中的第二属性确定所述第一目标样式的形成位置，其中，所述形成位置包括所述第一目标样式所在的目标图层，以及所述第一目标样式在所述目标图层中的目标位置，所述目标图层为所述第一渲染图层。

10.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行所述权利要求1至7任一项中所述的方法。

11.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述权利要求1至7任一项中所述的方法。

Images