首先看实现效果:

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

实现要点:

1)树形标注实现

2)复杂标注样式定义

3)效率优化

1.树形标注实现

树形标注采用字体符号来实现,包括以下几个步骤

1)载入字体

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

2)设置标注值与字体对照关系

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

3)设置TextStyle

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

2.复杂标注样式定义

1)使用格网来定义每个标注部分所占单元格跨度

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

2)将每个部分的标注内容带入,测量标注内容所占大小,动态调整格网大小

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

3)根据标注中心点、旋转角度等信息,计算每部分标注位置,最后达到效果

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

3.效率优化

刚开始的实现思路是所有标注内容都使用Canvas绘制,但是这样效率太低,尤其是在地图浏览期间,如果发生卡顿,体验特别糟糕。后来我们发现文字部分仍然可以使用TextStyle由Openlayers来绘制,只需要用Canvas绘制分数线即可,绘制之后的分数线构造成Style加到Style组中返给Openlayers,实现代码片断如下:

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现-LMLPHP

05-17 11:04