首先看实现效果:

实现要点:

1)树形标注实现

2)复杂标注样式定义

3)效率优化

1.树形标注实现

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

1)载入字体

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

3)设置TextStyle

2.复杂标注样式定义

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

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

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

3.效率优化

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

MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现的更多相关文章

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

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

  2. MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具

    图形编辑工具提供对要素图形进行增.删.改的功能,具体包括以下几种工具类型: 浏览工具 选择工具 创建要素工具 删除命令 分割工具 合并命令 节点编辑工具 修边工具 撤销命令 重做命令 工具的实现基本上 ...

  3. MAPZONE GIS SDK接入Openlayers3之三——瓦片数据集接入

    瓦片数据集接入实现思路: 1.构造ol.source.TileImage数据源,构造该数据源需要以下几项: 1)空间参考,通过如下代码构造 2)TileGrid,构造需要以下几项: a)原点 b)分辨 ...

  4. MAPZONE GIS SDK接入Openlayers3之二——空间参考扩展

    Openlayers默认了两种空间参考,一个是EPSG4326,一个是EPSG3857,其它的空间参考需要进行扩展才能使用.所以我们初始化时进行了如下操作: 1.将配置数据库中所有的空间参考读取出来, ...

  5. 手机游戏渠道SDK接入工具项目分享(二)万事开头难

    一般接到任务后程序员们通常都开始着手进行技术调研了,但我这活是项目负责人.还有一大堆事情要先期准备,没人能帮忙. 一.人力配置 考虑的之前已经有一波人搞了大半年,但没有起色,先期也没有太大人力需求,所 ...

  6. SDK接入(3)之iOS内支付(In-App Purchase)接入

    SDK接入(3)之iOS内支付(In-App Purchase)接入 继整理了Android平台的SDK接入过程.再来分享下iOS平台的内支付(In-App Purchase)接入,作为笔者在游戏开发 ...

  7. SDK接入(2)之Android Google Play内支付(in-app Billing)接入

    SDK接入(2)之Android Google Play内支付(in-app Billing)接入 继上篇SDK接入(1)之Android Facebook SDK接入整理完Facebook接入流程之 ...

  8. SDK接入(1)之Android Facebook SDK接入

    SDK接入(1)之Android Facebook SDK接入 由于游戏已上线,且处于维护阶段,所以有空写写各种SDK接入过程和遇到的问题,也当作一种工作总结.SDK接入主流分为这么几类,登录.支付. ...

  9. 手机游戏渠道SDK接入工具项目分享(三)拨开云雾是个坑

    一直在纠结是先写框架设计还是先写掉过的坑,最后本这娱乐大众的态度先写掉过的坑让大家乐呵下. 项目开发过程中遇问题无数,回顾下8个大坑照成了项目一定程度上延期甚至返工. 项目一开始几个人把现有3家主流的 ...

随机推荐

  1. 题解报告:hdu 1686 Oulipo(裸KMP)

    Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...

  2. 关于.Net中Process的使用方法和各种用途汇总(一):Process用法简介

    简介: .Net中Process类功能十分强大.它可以接受程序路径启动程序,接受文件路径使用默认程序打开文件,接受超链接自动使用默认浏览器打开链接,或者打开指定文件夹等等功能. 想要使用Process ...

  3. LN : leetcode 53 Maximum Subarray

    lc 53 Maximum Subarray 53 Maximum Subarray Find the contiguous subarray within an array (containing ...

  4. tensorboard在windows系统浏览器显示空白的解决

    一个简单的using_tensorboard.py程序,如下: #using_tensorboard.py import tensorflow as tf a = tf.constant(10,nam ...

  5. Windows sever 2003 IIS6.0 搭建DVWA

    DVWA 环境: Windows Sever 2003 IIS 6.0+MYSQL+PHP5.4+FASFCGI 详细教程: http://files.cnblogs.com/files/yyx001 ...

  6. [JavaScript] Uncaught TypeError: Method get Set.prototype.size called on incompatible receiver

    在对Set进行方法扩展的时候,无法覆盖size属性 情景:定义一个SingletonSet,继承自Set,size只能为1,并且不能add和remove //首先是extend函数 var exten ...

  7. HDU多校Round 1

    Solved:5 rank:172 A.Maximum Multiple #include <stdio.h> #include <algorithm> #include &l ...

  8. Python isdigit() 方法检测字符串是否只由数字组成

    Python isdigit() 方法检测字符串是否只由数字组成

  9. 如何在MONO 3D寻找最短路路径

    前段时间有个客户说他们想在我们的3D的机房中找从A点到B点的最短路径,然而在2D中确实有很多成熟的寻路算法,其中A*是最为常见的,而这个Demo也是用的A*算法,以下计算的是从左上角到右下角的最短路径 ...

  10. python_ 学习笔记(基础语法)

    python的注释 使用(#)对单行注释 使用('''或者""")多行注释,下面的代码肯定了python的牛逼 print("python是世界上最好的语言吗? ...