CN110008294A - 一种高级地图符号化处理中的颜色填充方法 - Google Patents

Abstract

本发明公开一种高级地图符号化处理中的颜色填充方法，该高级地图符号化处理为openlayers的高级地图符号化处理，其特征在于，包括以下步骤：1）在设置面的填充色时采用Pattern代替rgb颜色；2)采用HTML5 canvas createPattern()方法将步骤1）中所述的Pattern返回；该高级地图符号化处理中的颜色填充方法基于openlayers这个开源WebGIS引擎结合html5的canvas技术，实现浏览器端的高级地图符号化。可以实现矢量数据的动态高级符号化显示。现有的瓦片地图方法虽然能显示复杂的地图样式，但是瓦片数据是静态的，不能根据实时矢量数据动态绘制。针对需要变化的矢量数据，现有的动态渲染只能简单设置面的填充色，样式单一。将本发明运用在WebGIS系统中，可以动态绘制复杂的专题图，提高整个地图的美观性，专业性。

Description

一种高级地图符号化处理中的颜色填充方法

技术领域

本发明涉及一种高级地图符号化处理中的颜色填充方法。

背景技术

现有的WebGIS系统在渲染面的时候只能设置面的填充色或者用瓦片服务来展示复杂的样式，浏览器从后台请求png图片并显示在屏幕上，不是动态绘制面，在普通在线地图在动态绘制面的时候不能实现专业的符号化功能，只能设置面的边框，面的填充色，填充色的透明度，不能实现有复杂纹理的面的渲染。为了满足地图的渲染多样性和对专题数据的展示要求，一个能实现地图的复杂样式渲染的高级地图符号化的实现是十分必要的。

发明内容

本发明要解决的技术问题是提供一种能实现地图的复杂样式渲染的高级地图符号化处理中的颜色填充方法。

为解决上述问题，本发明采用如下技术方案：

一种高级地图符号化处理中的颜色填充方法，该高级地图符号化处理为openlayers的高级地图符号化处理，其特征在于，包括以下步骤：

1）在设置面的填充色时采用Pattern代替rgb颜色；

2)采用HTML5 canvas createPattern() 方法将步骤1）中所述的Pattern返回。

作为优选，所述HTML5 canvas方法具体为HTML5 canvas createPattern()方法。

现有的WebGIS系统在渲染面的时候只能设置面的填充色或者用瓦片服务来展示复杂的样式，浏览器从后台请求png图片并显示在屏幕上，不是动态绘制面。

因此为了解决上述的情况，在设置面的填充色的时候不用rgb颜色，而是用Pattern代替。这个Pattern由HTML5 canvas createPattern() 方法返回。具体代码是：

<div style='display:none;'>

<img src="img/127.png" id="img127" />

</div>

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

var fillPattern=context.createPattern(

document.getElementById('img127'),'repeat');

这里的图片是面的填充图案的最小显示单元，即整个面是由这个图片在水平和垂直方向重复平铺构成的。这样就能解决面的单一填充色问题了，同时又可以通过制作png图片来自定义填充样式，从而实现地图的复杂样式渲染。

本发明的有益效果为：基于openlayers这个开源WebGIS引擎结合html5的canvas技术，实现浏览器端的高级地图符号化。可以实现矢量数据的动态高级符号化显示。现有的瓦片地图方法虽然能显示复杂的地图样式，但是瓦片数据是静态的，不能根据实时矢量数据动态绘制。针对需要变化的矢量数据，现有的动态渲染只能简单设置面的填充色，样式单一。将本发明运用在WebGIS系统中，可以动态绘制复杂的专题图，提高整个地图的美观性，专业性。

附图说明

图1为本发明的一种高级地图符号化处理中的颜色填充方法的流程图。

具体实施方式

下面对本发明的技术方案进行描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例，对于本领域的技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些实施例获得其他的实施方式。

实施例

一种高级地图符号化处理中的颜色填充方法，该高级地图符号化处理为openlayers的高级地图符号化处理，其特征在于，包括以下步骤：

1）在设置面的填充色时采用Pattern代替rgb颜色；

2)采用HTML5 canvas createPattern() 方法将步骤1）中所述的Pattern返回。

作为优选，所述HTML5 canvas方法具体为HTML5 canvas createPattern()方法。

现有的WebGIS系统在渲染面的时候只能设置面的填充色或者用瓦片服务来展示复杂的样式，浏览器从后台请求png图片并显示在屏幕上，不是动态绘制面。

因此为了解决上述的情况，在设置面的填充色的时候不用rgb颜色，而是用Pattern代替。这个Pattern由HTML5 canvas createPattern() 方法返回。具体代码是：

<div style='display:none;'>

<img src="img/127.png" id="img127" />

</div>

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

var fillPattern=context.createPattern(document.getElementById('img127'),'repeat');

这里的图片是面的填充图案的最小显示单元，即整个面是由这个图片在水平和垂直方向重复平铺构成的。这样就能解决面的单一填充色问题了，同时又可以通过制作png图片来自定义填充样式，从而实现地图的复杂样式渲染。

本发明的有益效果为：基于openlayers这个开源WebGIS引擎结合html5的canvas技术，实现浏览器端的高级地图符号化。可以实现矢量数据的动态高级符号化显示。现有的瓦片地图方法虽然能显示复杂的地图样式，但是瓦片数据是静态的，不能根据实时矢量数据动态绘制。针对需要变化的矢量数据，现有的动态渲染只能简单设置面的填充色，样式单一。将本发明运用在WebGIS系统中，可以动态绘制复杂的专题图，提高整个地图的美观性，专业性。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何不经过创造性劳动想到的变化或替换，都应涵盖在本发明的保护范围之内。

Claims (2)

1.一种高级地图符号化处理中的颜色填充方法，该高级地图符号化处理为openlayers的高级地图符号化处理，其特征在于，包括以下步骤：

1）在设置面的填充色时采用Pattern代替rgb颜色；

2)采用HTML5 canvas处理方法将步骤1）中所述的Pattern返回。

2.根据权利要求1所述的一种高级地图符号化处理中的颜色填充方法，其特征在于：所述HTML5 canvas方法具体为HTML5 canvas createPattern()方法。