一种自定义地图渲染的方法及系统与流程

1.本发明公开一种方法及系统，涉及图像处理技术领域，具体地说是一种自定义地图渲染的方法及系统。


背景技术：

2.地图是在空间维度上进行数据可视化的一种传统方式，目前结合地图进行数据展示通常结合开源地图和echarts等可视化组件实现，基本可以满足大部分的效果展示需求。
3.但随着可视化技术日渐广泛的应用，传统的地图展示方式受多方因素的限制，首先，部分企业和机构由于安全性的要求，用于办公的网络环境禁止连接互联网；其次，需求侧重不仅仅局限在数据展示方面，整体的个性化效果和交互也成为了较为重要的需求点；另外，开源地图在使用时由于版权问题不可以对底图logo进行遮挡和删除，这在一定程度上影响整体观感。


技术实现要素：

4.本发明针对现有技术的问题，提供一种自定义地图渲染的方法及系统，基于svg结合自建坐标系实现自定义地图渲染，同时实现更优的交互效果。
5.本发明提出的具体方案是：
6.本发明提供一种自定义地图渲染的方法，根据需求绘制自定义地图并将所述自定义地图导出为svg格式文件，将所述svg格式文件处理为可受程序控制的dom元素，通过js工具组装所述svg格式文件内数组，并运用settimeout方法控制元素改变样式的时间，形成渲染动画，
7.定位所述svg格式文件的坐标原点及所述自定义地图的四角对应的经纬度坐标，利用现有地图坐标系换算所述自定义地图的坐标系，
8.根据所述自定义地图的数据中对应的坐标展示渲染效果。
9.进一步，所述的一种自定义地图渲染的方法中所述根据需求绘制自定义地图并将所述自定义地图导出为svg格式文件，包括：
10.使用photoshop、illustrator或sketch根据需求绘制自定义地图，导出为svg格式文件。
11.进一步，所述的一种自定义地图渲染的方法中所述利用现有地图坐标系换算所述自定义地图的坐标系，包括：
12.定位所述svg格式文件的左上角定位坐标原点，缩放至现有地图坐标系对应区域的同比大小，选取所述svg格式文件中地图四角对应的经纬度坐标，调整所述svg格式文件的宽度和高度与现有地图坐标系重合，根据现有地图坐标系减去所述svg格式文件的坐标原点获得相对位置，再利用缩放比例实现所述svg格式文件与现有地图坐标系同步。
13.进一步，所述的一种自定义地图渲染的方法中通过添加touchend事件，根据scale的值结合css变量控制所述svg格式文件中地图边框的宽度。
14.本发明还一种自定义地图渲染的系统，包括渲染模块、坐标计算模块和展示模块，
15.渲染模块根据需求绘制自定义地图并将所述自定义地图导出为svg格式文件，将所述svg格式文件处理为可受程序控制的dom元素，通过js工具组装所述svg格式文件内数组，并运用settimeout方法控制元素改变样式的时间，形成渲染动画，
16.坐标计算模块定位所述svg格式文件的坐标原点及所述自定义地图的四角对应的经纬度坐标，利用现有地图坐标系换算所述自定义地图的坐标系，
17.展示模块根据所述自定义地图的数据中对应的坐标展示渲染效果。
18.进一步，所述的一种自定义地图渲染的系统中所述渲染模块根据需求绘制自定义地图并将所述自定义地图导出为svg格式文件，包括：
19.使用photoshop、illustrator或sketch根据需求绘制自定义地图，导出为svg格式文件。
20.进一步，所述的一种自定义地图渲染的系统中所述坐标计算模块利用现有地图坐标系换算所述自定义地图的坐标系，包括：
21.定位所述svg格式文件的左上角定位坐标原点，缩放至现有地图坐标系对应区域的同比大小，选取所述svg格式文件中地图四角对应的经纬度坐标，调整所述svg格式文件的宽度和高度与现有地图坐标系重合，根据现有地图坐标系减去所述svg格式文件的坐标原点获得相对位置，再利用缩放比例实现所述svg格式文件与现有地图坐标系同步。
22.进一步，所述的一种自定义地图渲染的系统中所述渲染模块通过添加touchend事件，根据scale的值结合css变量控制所述svg格式文件中地图边框的宽度。
23.本发明的有益之处是：
24.本发明提供一种自定义地图渲染的方法，解决自定义需求效果难以实现问题。在个性化需求的情况下，依靠传统库单纯靠代码有时难以满足样式和动画的实现，或者实现起来成本过高，而本发明方法绘制静态svg格式图片再结合js交互实现需求，且成本较低，展现效果更灵活。
25.同时本发明方法解决动画渲染卡顿问题，在服务器加载gif、png等格式的文件对服务器有一定的要求，再配合动画渲染很容易出现白条，而用svg文件利用坐标点显隐来渲染的动画基本不会出现卡顿问题。
26.本发明方法可以避免echarts在触摸屏缩放弊端，echarts地图是靠识别鼠标滚轮来控制地图缩放的，在触摸屏上进行缩放没有效果，当需求是类似于在手机上操作地图那样用双指缩放的情况时，确实有现成的库来强行实现，但存在放大后图层失真的问题，而且通过参照echarts源码发现靠鼠标滚轮进行缩放的逻辑在其依赖的zrender里面，这样echarts地图一层一层进行调试过于复杂，而本发明方法中通过svg文件配合模拟出来的坐标系可以轻松实现双指缩放效果。除此之外，本发明方法解决地图放大后模糊失真问题，用现成的库达到双指缩放的效果实现起来面临一个问题：echarts地图进行放大后会模糊，因为echarts底层是靠canvas来绘制的，并不是矢量图，所以导致强行放大会失真。而本发明方法中svg文件则是矢量图，任意放大也不会出现低像素情况。
附图说明
27.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现
有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
28.图1是本发明方法流程示意图。
具体实施方式
29.下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。
30.本发明提供一种自定义地图渲染的方法，根据需求绘制自定义地图并将所述自定义地图导出为svg格式文件，将所述svg格式文件处理为可受程序控制的dom元素，通过js工具组装所述svg格式文件内数组，并运用settimeout方法控制元素改变样式的时间，形成渲染动画，
31.定位所述svg格式文件的坐标原点及所述自定义地图的四角对应的经纬度坐标，利用现有地图坐标系换算所述自定义地图的坐标系，
32.根据所述自定义地图的数据中对应的坐标展示渲染效果。
33.本发明可避免echarts库结合百度地图或geojson进行渲染时，受限于互联网和移动端的情况，并基于svg结合自建坐标系实现自定义地图渲染。
34.具体应用中，在本发明方法的一些实施例中，按照客户需求设计地图样式并导出为svg，用js代码控制动态渲染动画，根据世界地图中心模拟坐标系，展示数据所指坐标点。
35.其中按照需求设计地图样式并导出为svg格式文件，可以使用photoshop、illustrator、sketch等工具按照客户需求绘制自定义地图，导出为svg格式文件，用于后续js代码动态控制渲染动画，
36.利用js工具动态控制渲染动画，通过js程序与svg进行交互，实现渲染动画效果，其中设定svg格式文件高度和宽度，添加选择器，处理为可受程序控制的dom元素，用js代码控制图片的渲染方式，可采用动态描边动画方式。将svg格式文件内的ref和class遍历组装为数组，运用settimeout方法控制元素改变样式的时间，形成渲染动画，
37.根据世界地图中心模拟坐标系，可选择百度地图坐标对自定义地图进行坐标换算处理。打开百度地图，将svg格式文件浮动在地图上方，调整svg格式文件宽度和高度使其与地图重合。将svg文件的左上角定位坐标原点，拾取svg文件坐标原点处的坐标，缩放至与百度地图对应区域同比大小，取自定义地图四角对应的经纬度坐标，将后台返回的百度地图坐标点x轴、y轴坐标减去自定义地图坐标原点再乘以缩放比例获取相对坐标点，比如算法则可为：[(x
–
109.81)*624,(37.1356-y)*536.22]。
[0038]
结合后台传过来的数据，在地图上标记数据中对应的坐标，按需求处理显示效果。
[0039]
进一步地，所述的一种自定义地图渲染的方法中通过添加touchend事件，根据scale的值结合css变量控制所述svg格式文件中地图边框的宽度。其中svg是矢量图层，放大缩小后都不会失真，但发现再放大后地图边界也加粗了，本案例的处理方式是给svg添加了一个touchend事件，根据scale的值结合css变量控制边框的宽度。可以解决地图边框随地图放大加粗问题。
[0040]
本发明还一种自定义地图渲染的系统，包括渲染模块、坐标计算模块和展示模块，
[0041]
渲染模块根据需求绘制自定义地图并将所述自定义地图导出为svg格式文件，将所述svg格式文件处理为可受程序控制的dom元素，通过js工具组装所述svg格式文件内数组，并运用settimeout方法控制元素改变样式的时间，形成渲染动画，
[0042]
坐标计算模块定位所述svg格式文件的坐标原点及所述自定义地图的四角对应的经纬度坐标，利用现有地图坐标系换算所述自定义地图的坐标系，
[0043]
展示模块根据所述自定义地图的数据中对应的坐标展示渲染效果。
[0044]
上述系统内的各模块之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。
[0045]
同样地，本发明系统解决自定义需求效果难以实现问题。在个性化需求的情况下，依靠传统库单纯靠代码有时难以满足样式和动画的实现，或者实现起来成本过高，而本发明系统绘制静态svg格式图片再结合js交互实现需求，且成本较低，展现效果更灵活。
[0046]
同时本发明系统解决动画渲染卡顿问题，在服务器加载gif、png等格式的文件对服务器有一定的要求，再配合动画渲染很容易出现白条，而用svg文件利用坐标点显隐来渲染的动画基本不会出现卡顿问题。
[0047]
本发明系统可以避免echarts在触摸屏缩放弊端，echarts地图是靠识别鼠标滚轮来控制地图缩放的，在触摸屏上进行缩放没有效果，当需求是类似于在手机上操作地图那样用双指缩放的情况时，确实有现成的库来强行实现，但存在放大后图层失真的问题，而且通过参照echarts源码发现靠鼠标滚轮进行缩放的逻辑在其依赖的zrender里面，这样echarts地图一层一层进行调试过于复杂，而本发明系统中通过svg文件配合模拟出来的坐标系可以轻松实现双指缩放效果。除此之外，本发明系统解决地图放大后模糊失真问题，用现成的库达到双指缩放的效果实现起来面临一个问题：echarts地图进行放大后会模糊，因为echarts底层是靠canvas来绘制的，并不是矢量图，所以导致强行放大会失真。而本发明系统中svg文件则是矢量图，任意放大也不会出现低像素情况。
[0048]
需要说明的是，上述各流程和各系统结构中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。上述各实施例中描述的系统结构可以是物理结构，也可以是逻辑结构，即，有些模块可能由同一物理实体实现，或者，有些模块可能分由多个物理实体实现，或者，可以由多个独立设备中的某些部件共同实现。
[0049]
以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。