MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现
首先看实现效果:
实现要点:
1)树形标注实现
2)复杂标注样式定义
3)效率优化
1.树形标注实现
树形标注采用字体符号来实现,包括以下几个步骤
1)载入字体
2)设置标注值与字体对照关系
3)设置TextStyle
2.复杂标注样式定义
1)使用格网来定义每个标注部分所占单元格跨度
2)将每个部分的标注内容带入,测量标注内容所占大小,动态调整格网大小
3)根据标注中心点、旋转角度等信息,计算每部分标注位置,最后达到效果
3.效率优化
刚开始的实现思路是所有标注内容都使用Canvas绘制,但是这样效率太低,尤其是在地图浏览期间,如果发生卡顿,体验特别糟糕。后来我们发现文字部分仍然可以使用TextStyle由Openlayers来绘制,只需要用Canvas绘制分数线即可,绘制之后的分数线构造成Style加到Style组中返给Openlayers,实现代码片断如下:
MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现的更多相关文章
- MAPZONE GIS SDK接入Openlayers3之一——矢量数据集接入
在选择开源前端GIS框架的时候,定下来MapBox和Openlayers3.起初被MapBox美观的地图显示效果所吸引,研究后发现其实现机制与MAPZONE GIS SDK相差深远,不如Openlay ...
- MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具
图形编辑工具提供对要素图形进行增.删.改的功能,具体包括以下几种工具类型: 浏览工具 选择工具 创建要素工具 删除命令 分割工具 合并命令 节点编辑工具 修边工具 撤销命令 重做命令 工具的实现基本上 ...
- MAPZONE GIS SDK接入Openlayers3之三——瓦片数据集接入
瓦片数据集接入实现思路: 1.构造ol.source.TileImage数据源,构造该数据源需要以下几项: 1)空间参考,通过如下代码构造 2)TileGrid,构造需要以下几项: a)原点 b)分辨 ...
- MAPZONE GIS SDK接入Openlayers3之二——空间参考扩展
Openlayers默认了两种空间参考,一个是EPSG4326,一个是EPSG3857,其它的空间参考需要进行扩展才能使用.所以我们初始化时进行了如下操作: 1.将配置数据库中所有的空间参考读取出来, ...
- 手机游戏渠道SDK接入工具项目分享(二)万事开头难
一般接到任务后程序员们通常都开始着手进行技术调研了,但我这活是项目负责人.还有一大堆事情要先期准备,没人能帮忙. 一.人力配置 考虑的之前已经有一波人搞了大半年,但没有起色,先期也没有太大人力需求,所 ...
- SDK接入(3)之iOS内支付(In-App Purchase)接入
SDK接入(3)之iOS内支付(In-App Purchase)接入 继整理了Android平台的SDK接入过程.再来分享下iOS平台的内支付(In-App Purchase)接入,作为笔者在游戏开发 ...
- SDK接入(2)之Android Google Play内支付(in-app Billing)接入
SDK接入(2)之Android Google Play内支付(in-app Billing)接入 继上篇SDK接入(1)之Android Facebook SDK接入整理完Facebook接入流程之 ...
- SDK接入(1)之Android Facebook SDK接入
SDK接入(1)之Android Facebook SDK接入 由于游戏已上线,且处于维护阶段,所以有空写写各种SDK接入过程和遇到的问题,也当作一种工作总结.SDK接入主流分为这么几类,登录.支付. ...
- 手机游戏渠道SDK接入工具项目分享(三)拨开云雾是个坑
一直在纠结是先写框架设计还是先写掉过的坑,最后本这娱乐大众的态度先写掉过的坑让大家乐呵下. 项目开发过程中遇问题无数,回顾下8个大坑照成了项目一定程度上延期甚至返工. 项目一开始几个人把现有3家主流的 ...
随机推荐
- 题解报告:hdu 1686 Oulipo(裸KMP)
Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...
- 关于.Net中Process的使用方法和各种用途汇总(一):Process用法简介
简介: .Net中Process类功能十分强大.它可以接受程序路径启动程序,接受文件路径使用默认程序打开文件,接受超链接自动使用默认浏览器打开链接,或者打开指定文件夹等等功能. 想要使用Process ...
- LN : leetcode 53 Maximum Subarray
lc 53 Maximum Subarray 53 Maximum Subarray Find the contiguous subarray within an array (containing ...
- tensorboard在windows系统浏览器显示空白的解决
一个简单的using_tensorboard.py程序,如下: #using_tensorboard.py import tensorflow as tf a = tf.constant(10,nam ...
- Windows sever 2003 IIS6.0 搭建DVWA
DVWA 环境: Windows Sever 2003 IIS 6.0+MYSQL+PHP5.4+FASFCGI 详细教程: http://files.cnblogs.com/files/yyx001 ...
- [JavaScript] Uncaught TypeError: Method get Set.prototype.size called on incompatible receiver
在对Set进行方法扩展的时候,无法覆盖size属性 情景:定义一个SingletonSet,继承自Set,size只能为1,并且不能add和remove //首先是extend函数 var exten ...
- HDU多校Round 1
Solved:5 rank:172 A.Maximum Multiple #include <stdio.h> #include <algorithm> #include &l ...
- Python isdigit() 方法检测字符串是否只由数字组成
Python isdigit() 方法检测字符串是否只由数字组成
- 如何在MONO 3D寻找最短路路径
前段时间有个客户说他们想在我们的3D的机房中找从A点到B点的最短路径,然而在2D中确实有很多成熟的寻路算法,其中A*是最为常见的,而这个Demo也是用的A*算法,以下计算的是从左上角到右下角的最短路径 ...
- python_ 学习笔记(基础语法)
python的注释 使用(#)对单行注释 使用('''或者""")多行注释,下面的代码肯定了python的牛逼 print("python是世界上最好的语言吗? ...