第四章: 標(biāo)注

一. 概述

1 什么是標(biāo)注

標(biāo)注可以是圖標(biāo)或者文字. 主要作用是用來對某個(gè)地物信息進(jìn)行說明, 注解

2 開發(fā)流程

1創(chuàng)建style對象(設(shè)置image或text屬性)
2創(chuàng)建一個(gè)點(diǎn)要素, 并設(shè)置style為創(chuàng)建的對象
3添加到失量數(shù)據(jù)源source
4添加到失量圖層layer
5添加到地圖map

3 主要涉及的類

1) Icon圖標(biāo)類

2) Text文字類

二. 簡單標(biāo)注案例

1 圖片標(biāo)注

圖片標(biāo)注的核心

1. 添加一個(gè)點(diǎn)要素

2. 給點(diǎn)要素設(shè)置style

步驟

1. 加載底圖

2. 定義style對象

3. 創(chuàng)建點(diǎn)要素, 并設(shè)置style

4. 創(chuàng)建失量數(shù)據(jù)源, 加載點(diǎn)要素

5. 創(chuàng)建失量圖層, 加載失量數(shù)據(jù)源

6. 在map中加載失量圖層

2 文字標(biāo)注

文字標(biāo)注除了style設(shè)置的屬性不同外, 其他同上

示例

3 圖文標(biāo)注

示例

4 綜合練習(xí)

添加一個(gè)按鈕->激活標(biāo)注. 點(diǎn)擊時(shí)激活標(biāo)注功能

添加一個(gè)按鈕->退出標(biāo)注. 點(diǎn)擊時(shí)退出激活功能

提示

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

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

3. 編寫同一個(gè)事件處理函數(shù), 獲取點(diǎn)擊的坐標(biāo)點(diǎn), 創(chuàng)建點(diǎn)要素, 添加到數(shù)據(jù)源

5 交互式繪制實(shí)現(xiàn)圖文標(biāo)注

三. Popup彈窗

1 什么是Popup彈窗

當(dāng)點(diǎn)擊某個(gè)元素時(shí), 顯示一個(gè)彈窗, 在彈窗中顯示詳細(xì)信息

2 為什么需要pop彈窗

當(dāng)詳細(xì)信息很多時(shí), 不可能一次性全部展示出來, 當(dāng)用戶需要查看時(shí)顯示

3 如何實(shí)現(xiàn)

pop彈窗在技術(shù)上主要是借助overlay遮罩

1) 開發(fā)流程

1. 創(chuàng)建一個(gè)dom元素, 并設(shè)置樣式

2. 將dom轉(zhuǎn)換成overlay

3. 監(jiān)聽點(diǎn)擊事件, 判斷如果點(diǎn)擊的區(qū)域內(nèi)存在點(diǎn)要素, 就顯示overlay

2) 涉及的類

4 案例

1) 構(gòu)造dom元素

html部分

樣式部分

2) 創(chuàng)建overlay層

overlay是地圖上的一個(gè)透明層

3) 監(jiān)聽點(diǎn)擊事件

示例

四. 作業(yè)

需求

1. 通過交互式控件添加標(biāo)注

2. 點(diǎn)擊標(biāo)注時(shí), 彈出pop彈窗顯示數(shù)據(jù)

思路

一. 實(shí)現(xiàn)交互式點(diǎn)要素

二. 設(shè)置點(diǎn)要素的樣式