首先看实现效果:

实现要点:

1)树形标注实现

2)复杂标注样式定义

3)效率优化

1.树形标注实现

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

1)载入字体

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

3)设置TextStyle

2.复杂标注样式定义

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

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

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

3.效率优化

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

openlayer3之高级标注实现的更多相关文章

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

    首先看实现效果: 实现要点: 1)树形标注实现 2)复杂标注样式定义 3)效率优化 1.树形标注实现 树形标注采用字体符号来实现,包括以下几个步骤 1)载入字体 2)设置标注值与字体对照关系 3)设置 ...

  2. (转)ArcGIS制图技巧

    ArcGIS制图技巧(转载自新浪博客)   1  引言 1.1  制图的目的 随着GIS在各行各业的深入应用,各信息化部门和生产单位都逐渐建立起自己的GIS的应用,同时积累了大量的地理数据.随着应用深 ...

  3. MAPZONE GIS SDK接入Openlayers3之一——矢量数据集接入

    在选择开源前端GIS框架的时候,定下来MapBox和Openlayers3.起初被MapBox美观的地图显示效果所吸引,研究后发现其实现机制与MAPZONE GIS SDK相差深远,不如Openlay ...

  4. 【 D3.js 高级系列 — 7.0 】 标注地点

    有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...

  5. [Java面经]干货整理, Java面试题(覆盖Java基础,Java高级,JavaEE,数据库,设计模式等)

    如若转载请注明出处: http://www.cnblogs.com/wang-meng/p/5898837.html   谢谢.上一篇发了一个找工作的面经, 找工作不宜, 希望这一篇的内容能够帮助到大 ...

  6. tn文本分析语言(三):高级语法

    标签(空格分隔): 未分类 高级操作 1.脚本表达式 用双引号包含的脚本被称为脚本表达式,目前支持嵌入Python. 脚本表达式只能在顺序表达式中使用.代码可以在三个位置存在: |位置|功能|例子| ...

  7. 在Eclipse中使用JUnit4进行单元测试(高级篇)

    通过前2篇文章,您一定对JUnit有了一个基本的了解,下面我们来探讨一下JUnit4中一些高级特性. 一.高级Fixture 上一篇文章中我们介绍了两个Fixture标注,分别是@Before和@Af ...

  8. 【英语魔法俱乐部——读书笔记】 3 高级句型-简化从句&倒装句(Reduced Clauses、Inverted Sentences) 【完结】

    [英语魔法俱乐部——读书笔记] 3 高级句型-简化从句&倒装句(Reduced Clauses.Inverted Sentences):(3.1)从属从句简化的通则.(3.2)形容词从句简化. ...

  9. Google高级搜索语法

    Google高级搜索语法   Google搜索果真是一个强悍的不得了的搜索引擎,今天转了一些 google的高级搜索语法 希望能帮助到大家. 一.allinanchor: anchor是一处说明性的文 ...

随机推荐

  1. redis 实现发布订阅的功能

    redis 除了作为缓存的功能外还可以用作消息中间件的功能,这片博客主要是介绍一下 redis 整合spring 实现消息的发布和订阅功能: 1:redis依赖,依赖两个包,redis 包, spri ...

  2. 【微服务】.netCore eShopOnContainers 部署实践《二》

    Docker 专业术语介绍 优点:轻量级.可伸缩(灵活性).可靠性.可移植  Container image A package with all of the dependencies and in ...

  3. DefaultServlet

    在web访问任何资源都是在访问Servlet 当你启动Tomcat,你在网址上输入http://localhost:8080.为什么会出现Tomcat小猫的页面? 这是由缺省Servlet为你服务的! ...

  4. 课程四(Convolutional Neural Networks),第二 周(Deep convolutional models: case studies) —— 2.Programming assignments : Keras Tutorial - The Happy House (not graded)

    Keras tutorial - the Happy House Welcome to the first assignment of week 2. In this assignment, you ...

  5. 在向一个ArrayList中添加大量元素前,可以使用ensureCapacity方法来增加ArrayList的容量

    参考http://www.jianshu.com/p/f174d49b391c ensureCapacity(),该方法就是 ArrayList 的扩容方法.在前面就提过 ArrayList 每次新增 ...

  6. QC内部分享ppt

    Quality Center是一个基于Web的测试管理工具,可以组织和管理应用程序测试流程的所有阶段,包括制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center还可以创建报 ...

  7. 远程连接服务器或云数据库上的mysql服务 - 赖大大

    主要问题有两种: 1.mysql的权限问题. 2.服务器的防火墙和数据库的安全组没设好的问题. 1.权限问题: 首先登录上mysql mysql> use mysql;      #使用mysq ...

  8. SQL 必知必会·笔记<14>更新和删除数据

    1. 更新数据 基本的UPDATE语句,由三部分组成: 要更新的表 列名和它们的新值 确定要更新那些行的过滤条件 更新单列示例: UPDATE Customers SET cust_email = ' ...

  9. 在centos上使用yum安装rabbitmq-server

    rabbitmq及其依赖环境 rabbitmq安装之前需要安装socat,否则直接安装rabbitmq可能会报错 如果没有找到,则先安装epel源 yum -y install epel-releas ...

  10. 认识Nginx,理解原理和功能

    前端工程师在理解Nginx之后,就能更好的与后端工程师沟通,为了能提高工作效率,这两天抽空读了<Nginx高性能Web服务器实战教程>. 一.Nginx Nginx是一款高性能的Web服务 ...