OpenLayers и основы HTML

[Mavka]

Один мой приятель спросил как для OpenLayers сделать свой LayerSwitcher на подобии "Тематических слоев" в Geosample. Очень простой и без всяких хитростей.

Полный пример:

list.zip

полный файл с кодом

(634 байт) 525 скачиваний

можно открыть в интернет-браузере, но реально он ничего делать не будет т.к. вся начинка от карты в нем отсутствует (см. здесь и здесь). Тем не менее в отладчике (Firebug) можно убедиться, что происходит вызов функции и вся нужная информация передается.

Первое что нам нужно сделать, это составить список слоев. Слева от названия будет стоять checkbox:

внешний вид

img1.png (2.2 КБ) 4733 просмотра

Checkbox создаетеся с помощью тэга <input>:

Код: Выделить всё

<input type="checkbox" value="city" onclick="myLayers(this);" checked="checked" />города</br> 

Значение атрибутов:

• type="checkbox" - это будет "квадрат с галочкой", в geosample использовано "radio";
• value="city" - значение, в нашем случае это будут имена слоев карты, те что указывались при их создании:

  Код: Выделить всё

  wms1 = new OpenLayers.Layer.WMS('city',
      "http://server:8080/geoserver/wms?",
      {layers: 'goroda'}
  ); 

• onclick="myLayers(this);" - при щелчке мышкой на checkbox'е будет вызвана функция myLayers с аргументом this (т.е. сам элемент <input>);
• checked="checked" - это значит что галочка будет включена уже при загрузке страницы.

Осталось создать функцию myLayers(), которая будет включать/выключать слои:

Код: Выделить всё

function myLayers(lay) {
    layers = map.getLayersByName(lay.value);    //1
    layer = layers[0];                          //2
    layer.setVisibility(lay.checked);           //3
} 

На вход функции поступает аргумент "lay". Ранее я говорил что мы будем использовать для этого "this". В данном контексте this будет представлять весь элемент <input> и мы сможем посмотреть все его атрибуты. А конкретно, нужны:

• lay.value - где содержится имя слоя;
• lay.checked - означает включен слой (true) или выключен (false).

Строка 1. Для поиска слоя по имени воспользуемся стандартной функцией OpenLayers - getLayersByName ("имя слоя").
Строка 2. Слоев с одинаковым именем может быть несколько, поэтому функция возвращается массив найденных слоев. Он может быть пустым, если ничего не найдено. Т.к. мы гарантируем что все слои у нас называются по-разному, поэтому результат поиска будет массив с одним элементом (считая от нуля - layers[0]).
Строка 3. У найденного слоя вызываем стандартную функцию setVisibility - включить/выключить. Аргумент должен быть true или false (см. выше lay.checked).

Все.