第四章: 标注

一. 概述

1 什么是标注

标注可以是图标或者文字. 主要作用是用来对某个地物信息进行说明, 注解

2 开发流程

1创建style对象(设置image或text属性)
2创建一个点要素, 并设置style为创建的对象
3添加到失量数据源source
4添加到失量图层layer
5添加到地图map

3 主要涉及的类

1) Icon图标类

2) Text文字类

二. 简单标注案例

1 图片标注

图片标注的核心

1. 添加一个点要素

2. 给点要素设置style

步骤

1. 加载底图

2. 定义style对象

3. 创建点要素, 并设置style

4. 创建失量数据源, 加载点要素

5. 创建失量图层, 加载失量数据源

6. 在map中加载失量图层

2 文字标注

文字标注除了style设置的属性不同外, 其他同上

示例

3 图文标注

示例

4 综合练习

添加一个按钮->激活标注. 点击时激活标注功能

添加一个按钮->退出标注. 点击时退出激活功能

提示

1. 激活: 绑定map的click事件

2. 退出: 解绑map的click事件

3. 编写同一个事件处理函数, 获取点击的坐标点, 创建点要素, 添加到数据源

5 交互式绘制实现图文标注

三. Popup弹窗

1 什么是Popup弹窗

当点击某个元素时, 显示一个弹窗, 在弹窗中显示详细信息

2 为什么需要pop弹窗

当详细信息很多时, 不可能一次性全部展示出来, 当用户需要查看时显示

3 如何实现

pop弹窗在技术上主要是借助overlay遮罩

1) 开发流程

1. 创建一个dom元素, 并设置样式

2. 将dom转换成overlay

3. 监听点击事件, 判断如果点击的区域内存在点要素, 就显示overlay

2) 涉及的类

4 案例

1) 构造dom元素

html部分

样式部分

2) 创建overlay层

overlay是地图上的一个透明层

3) 监听点击事件

示例

四. 作业

需求

1. 通过交互式控件添加标注

2. 点击标注时, 弹出pop弹窗显示数据

思路

一. 实现交互式点要素

二. 设置点要素的样式