第四章: 标注
一. 概述
1 什么是标注
标注可以是图标或者文字. 主要作用是用来对某个地物信息进行说明, 注解
2 开发流程
1创建style对象(设置image或text属性)
2创建一个点要素, 并设置style为创建的对象
3添加到失量数据源source
4添加到失量图层layer
5添加到地图map
3 主要涉及的类
1) Icon图标类
2) Text文字类
二. 简单标注案例
1 图片标注
图片标注的核心
-
添加一个点要素
-
给点要素设置style
步骤
-
加载底图
-
定义style对象
-
创建点要素, 并设置style
-
创建失量数据源, 加载点要素
-
创建失量图层, 加载失量数据源
-
在map中加载失量图层
2 文字标注
文字标注除了style设置的属性不同外, 其他同上
示例
3 图文标注
示例
4 综合练习
添加一个按钮->激活标注. 点击时激活标注功能
添加一个按钮->退出标注. 点击时退出激活功能
提示
-
激活: 绑定map的click事件
-
退出: 解绑map的click事件
-
编写同一个事件处理函数, 获取点击的坐标点, 创建点要素, 添加到数据源
5 交互式绘制实现图文标注
三. Popup弹窗
1 什么是Popup弹窗
当点击某个元素时, 显示一个弹窗, 在弹窗中显示详细信息
2 为什么需要pop弹窗
当详细信息很多时, 不可能一次性全部展示出来, 当用户需要查看时显示
3 如何实现
pop弹窗在技术上主要是借助overlay遮罩
1) 开发流程
-
创建一个dom元素, 并设置样式
-
将dom转换成overlay
-
监听点击事件, 判断如果点击的区域内存在点要素, 就显示overlay
2) 涉及的类
4 案例
1) 构造dom元素
html部分
样式部分
2) 创建overlay层
overlay是地图上的一个透明层
3) 监听点击事件
示例
四. 作业
需求
-
通过交互式控件添加标注
-
点击标注时, 弹出pop弹窗显示数据
思路
一. 实现交互式点要素
二. 设置点要素的样式