OpenLayers 3 之 切換圖層控制元件
在 openlayers 2中，是預設有切換圖層控制元件的，但是由於某種原因，openlayers 3中並沒有預設實現，但卻給我們很容易擴充套件的基類（ol.control.Control），我們可以自定義實現，並不是很難，這我會在其他文章中講解。這篇文章中，我利用一個 GitHub 中的一個開源專案（這個專案就是擴充套件了ol.control.Control，自定義了切換圖層控制元件），新增切換圖層控制元件，並探索其用法。
具體的原理及其實現在這篇文章中我就不講了，想看怎麼具體實現的，可以期待一下我的下一篇文章，主要分析怎麼繼承 ol.control.Control
GitHub已有的“輪子”
在發現 openlayers 3中並沒有預設的圖層切換控制元件時，首先想到看看有沒有人實現過呢？自己造輪子，雖然有成就感，但是會投入更多的時間成本和精力，在生產環境中，這往往不允許。如果有人實現過，我就可以借鑑一下，不必自己實現，但是並不一定符合自己的應用環境，對此我們瞭解其實現，按照自己的需求進行修改，當然我們要注意其遵守的開源協議。
搜尋 GitHub ，已經有一個專案實現了我們需要的控制元件，地址在這裡： ol3-layerswitcher 。下載好最新的版本，解壓，src子資料夾中有其 javascript 和 css 檔案，分別在網頁中相應位置新增引用。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ol3-layers-witcher</title>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<link rel="stylesheet" href="css/common-setting.css" type="text/css" 使用方法
圖層title屬性
要使用該方法，必須在每個圖層新增一個 title 屬性，ol3-layerswitcher 會根據圖層的 title 屬性的值，顯示在 layerswitcher 控制元件中。如下示例，“天地圖路網”這幾個字會顯示到 layer-switcher 中：
var tian_di_tu_road_layer = new ol.layer.Tile({
title: "天地圖路網",
source: new ol.source.XYZ({
url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
})
});
tipLabel 屬性
layer-switcher 相對於 ol.control.Control基類，只添加了一個屬性 – tipLabel，這個屬性是一個字串，預設是 Legend，當滑鼠位於控制元件之上時，會有提示文字，就是這裡的 tipLabel的值，其實這個值是通過設定 html button元素的title 屬性實現的。如我把 tipLabel設定為 切換圖層，那麼在滑鼠置於圖示時會有下面的效果：
調整控制元件樣式
控制元件沒有展開的時候，預設圖示是 openlayers 3 的圖示，如果我們想換一個，就要修改其在 CSS 檔案中（ol3-layerswitcher.css）的 background-image 定義，如下圖：
指定的值是 base64 格式的圖片 url，我們可以使用 HTML5 的 canvas API 將普通圖片轉換成 base64 表示形式，如下的我寫的函式就是轉換普通的圖片為 base64 格式的表示，並返回。使用時，將待轉換的圖片的url路徑，想要輸出的圖片尺寸，傳遞給函式作為引數：
function convertImageToBase64(url, height, width){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = height;
canvas.width = width;
ctx.drawImage(this, 0, 0, height, width);
dataURL = canvas.toDataURL('image/png');
return dataURL;
};
img.src = url;
}還有一些其它的屬性，比如控制元件預設放置的位置，也在 ol3-layerswitcher.css 中定義，控制元件使用的 CSS 絕對定位，預設離右邊 0.5 em，離頂部 3.5 em，我們可以修改 top、right，或者增加 bottom、left 等屬性來修改放置的位置。
.layer-switcher {
position: absolute;
top: 3.5em;
right: 0.5em;
text-align: left;
}總結
講到這裡，你已經基本會用了吧！當然，如果你想要進一步修改其樣式，就要深入的瞭解其 CSS 檔案（你應該有一點CSS基礎知識），對其進行更深入的定製化；如果你想擴充套件或自定義這個控制元件的功能或者增加其監聽的事件，那麼你需要研究其實現：ol3-layerswitcher.js。使用一個開源專案，不是說，你就不必關心怎麼去實現了，而是應該瞭解其實現原理，否則，慢慢就變成了‘井底之蛙’，別人有，你會用，別人沒有，你就沒辦法了。
好的，就寫到這裡，有什麼問題，可以在文章下面留言或者給我發郵件。