openlayer3之高级标注实现

首先看实现效果：

实现要点：

1）树形标注实现

2）复杂标注样式定义

3）效率优化

 

1.树形标注实现

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

1）载入字体

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

3）设置TextStyle

2.复杂标注样式定义

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

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

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

3.效率优化

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