首先看实现效果:

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

实现要点:

1)树形标注实现

2)复杂标注样式定义

3)效率优化

 

1.树形标注实现

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

1)载入字体

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

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

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

3)设置TextStyle

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

2.复杂标注样式定义

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

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

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

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

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

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

3.效率优化

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

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

相关文章:

  • 2022-12-23
  • 2021-08-17
  • 2022-12-23
  • 2021-09-20
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-01
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-07-29
  • 2022-02-07
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案