{"id":7180,"date":"2018-04-25T07:30:30","date_gmt":"2018-04-25T10:30:30","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=7180"},"modified":"2018-04-27T19:27:12","modified_gmt":"2018-04-27T22:27:12","slug":"adicionando-layer-switcher-no-openlayers-3","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2018\/04\/25\/adicionando-layer-switcher-no-openlayers-3\/","title":{"rendered":"Adicionando layer switcher no OpenLayers 3"},"content":{"rendered":"<p>O OpenLayers 2 costumava ter um controle chamado LayerSwitcher. Com ele voc\u00ea podia escolher diferentes camadas para mostrar no mapa. Por\u00e9m, este controle desapareceu no OpenLayers 3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL2_01.png\" alt=\"\" width=\"699\" height=\"297\" class=\"aligncenter size-full wp-image-7200\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL2_01.png 699w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL2_01-300x127.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL2_01-600x255.png 600w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><br \/>\nLayerSwitcher em OpenLayers 2<\/p>\n<p>No OpenLayers 3+, existem atualmente duas maneiras de ter um alternador de camadas; o mais f\u00e1cil \u00e9 usar um de terceiros; e o mais vers\u00e1til \u00e9 fazer voc\u00ea mesmo. Nesta postagem, usaremos um de terceiros.<\/p>\n<p>O controle de troca de camadas atualmente em moda \u00e9 o LayerSwitcher de <a href=\"https:\/\/github.com\/walkermatt\/ol3-layerswitcher\" rel=\"noopener\" target=\"_blank\">Matt Walker<\/a>. Para us\u00e1-lo voc\u00ea inclui seu CSS e JavaScript no HTML e, em seguida, pode us\u00e1-lo da seguinte maneira:<\/p>\n<pre>\r\n  map.addControl (new ol.control.LayerSwitcher ());\r\n<\/pre>\n<p>Se voc\u00ea adicionar a linha acima ao c\u00f3digo, aqui est\u00e1 o resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_01.png\" alt=\"\" width=\"272\" height=\"228\" class=\"aligncenter size-full wp-image-7201\" \/><\/p>\n<p>A raz\u00e3o pela qual o plano de fundo do mapa n\u00e3o est\u00e1 listada \u00e9 que a camada n\u00e3o tem t\u00edtulo; se voc\u00ea adicionar um, ele ser\u00e1 exibido assim:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_02.png\" alt=\"\" width=\"233\" height=\"196\" class=\"aligncenter size-full wp-image-7202\" \/><\/p>\n<p>O OpenLayers 2 fazia distin\u00e7\u00e3o entre camadas base e camadas de sobreposi\u00e7\u00e3o. As camadas base eram o plano de fundo do mapa; apenas uma camada base podia ser apresentada por vez. As camadas de sobreposi\u00e7\u00e3o eram camadas que poderiam ser sobrepostas ao plano de fundo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_03.png\" alt=\"\" width=\"735\" height=\"374\" class=\"aligncenter size-full wp-image-7203\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_03.png 735w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_03-300x153.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_03-600x305.png 600w\" sizes=\"auto, (max-width: 735px) 100vw, 735px\" \/><\/p>\n<p>Aqui, o Open Cycle Map \u00e9 usado como plano de fundo, com duas das cinco poss\u00edveis camadas de sobreposi\u00e7\u00e3o vis\u00edveis. <\/p>\n<p>O OpenLayers 3+ n\u00e3o tem essa distin\u00e7\u00e3o. Apenas desenha camadas uma em cima da outra. Se uma camada \u00e9 opaca, ela oculta as camadas por tr\u00e1s dela. \u00c9 por isso que, definimos primeiro o Open Street Map, depois adicionamos duas camadas WFS para mostrar em cima dele.<\/p>\n<p>No contexto de um comutador de camadas, no entanto, a distin\u00e7\u00e3o entre camadas base e de sobreposi\u00e7\u00e3o \u00e9 \u00fatil, porque ajuda a tornar o comutador mais seguro. Por esta raz\u00e3o, o LayerSwitcher de Matt Walker requer que voc\u00ea adicione type: &#8216;base&#8217; a qualquer camada que voc\u00ea queira que atue como camada base. Ent\u00e3o, veja este exemplo, onde temos duas camadas &#8220;base&#8221; e duas camadas de sobreposi\u00e7\u00e3o (overlay):<\/p>\n<pre>\r\nvar&nbsp;corineUrl&nbsp;=&nbsp;'http:\/\/filotis.itia.ntua.gr\/mapserver?SERVICE=WFS&'&nbsp;+\r\n&nbsp;&nbsp;&nbsp;&nbsp;'VERSION=1.1.0&REQUEST=GetFeature&TYPENAME=biotopes_corine&'&nbsp;+\r\n&nbsp;&nbsp;&nbsp;&nbsp;'SRSNAME=EPSG:4326&OUTPUTFORMAT=gml3';\r\nvar&nbsp;naturaUrl&nbsp;=&nbsp;'http:\/\/filotis.itia.ntua.gr\/mapserver?SERVICE=WFS&'&nbsp;+\r\n&nbsp;&nbsp;&nbsp;&nbsp;'VERSION=1.1.0&REQUEST=GetFeature&TYPENAME=biotopes_natura&'&nbsp;+\r\n&nbsp;&nbsp;&nbsp;&nbsp;'SRSNAME=EPSG:4326&OUTPUTFORMAT=gml3';\r\nvar&nbsp;cadastreUrl&nbsp;=&nbsp;'http:\/\/gis.ktimanet.gr\/wms\/wmsopen\/wmsserver.aspx';\r\nvar&nbsp;map&nbsp;=&nbsp;new&nbsp;ol.Map({\r\n&nbsp;&nbsp;&nbsp;&nbsp;target:&nbsp;'map',\r\n&nbsp;&nbsp;&nbsp;&nbsp;layers:&nbsp;[new&nbsp;ol.layer.Tile({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'Open&nbsp;Street&nbsp;Map',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:&nbsp;new&nbsp;ol.source.OSM(),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'base'\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;ol.layer.Tile({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'Greek&nbsp;Cadastre',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'base',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:&nbsp;false,\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:&nbsp;new&nbsp;ol.source.TileWMS({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;cadastreUrl\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;ol.layer.Vector({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'Corine&nbsp;biotopes',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:&nbsp;new&nbsp;ol.source.Vector({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format:&nbsp;new&nbsp;ol.format.WFS(),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;corineUrl\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;ol.layer.Vector({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'Natura&nbsp;biotopes',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:&nbsp;new&nbsp;ol.source.Vector({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format:&nbsp;new&nbsp;ol.format.WFS(),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;naturaUrl\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})],\r\n&nbsp;&nbsp;&nbsp;&nbsp;view:&nbsp;new&nbsp;ol.View({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;projection:&nbsp;'EPSG:4326',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;center:&nbsp;[24,&nbsp;38],&nbsp;zoom:&nbsp;6\r\n&nbsp;&nbsp;&nbsp;&nbsp;})\r\n});\r\nmap.addControl(new&nbsp;ol.control.LayerSwitcher()); \r\n<\/pre>\n<p>Aqui est\u00e1 o resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_04.png\" alt=\"\" width=\"260\" height=\"233\" class=\"aligncenter size-full wp-image-7204\" \/><\/p>\n<p>Voc\u00ea deve ter notado que, no c\u00f3digo, foi especificado <em>visible: false<\/em> para tornar invis\u00edvel o mapa de fundo do cadastro. Se n\u00e3o especificar, o Open Street Map aparecer\u00e1 brevemente e ser\u00e1 gradualmente coberto pelo mapa de Cadastro. N\u00e3o faz sentido que mais de um mapa base seja vis\u00edvel, por isso \u00e9 uma boa pr\u00e1tica cuidar da visibilidade inicial no c\u00f3digo. O comutador de camadas cuidar\u00e1 do resto.<\/p>\n<p>O ajuste final que vamos fazer \u00e9 agrupar as camadas para obter um layout mais elegante no alternador de camadas:<\/p>\n<pre>\r\n&lt;!DOCTYPE&nbsp;html&gt;\r\n&lt;html&gt;\r\n&nbsp;&nbsp;&lt;head&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;charset=\"utf-8\"&nbsp;\/&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;OpenLayers&nbsp;3&nbsp;-&nbsp;LayerSwitcher&nbsp;&amp;&nbsp;Popup&lt;\/title&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=\"viewport\"&nbsp;content=\"initial-scale=1.0,&nbsp;user-scalable=no,&nbsp;width=device-width\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"https:\/\/openlayers.org\/en\/v4.6.5\/css\/ol.css\"&nbsp;type=\"text\/css\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"https:\/\/rawgit.com\/walkermatt\/ol3-layerswitcher\/master\/src\/ol3-layerswitcher.css\"&nbsp;\/&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"https:\/\/rawgit.com\/walkermatt\/ol3-layerswitcher\/master\/examples\/layerswitcher.css\"&nbsp;\/&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"https:\/\/rawgit.com\/walkermatt\/ol3-popup\/master\/src\/ol3-popup.css\"&nbsp;\/&gt;\r\n&nbsp;&nbsp;&lt;\/head&gt;\r\n&nbsp;&nbsp;&lt;body&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=\"map\"&gt;&lt;\/div&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;The&nbsp;line&nbsp;below&nbsp;is&nbsp;only&nbsp;needed&nbsp;for&nbsp;old&nbsp;environments&nbsp;like&nbsp;Internet&nbsp;Explorer&nbsp;and&nbsp;Android&nbsp;4.x&nbsp;--&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=\",Element.prototype.classList,URL\"&gt;&lt;\/script&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=\"https:\/\/openlayers.org\/en\/v4.6.5\/build\/ol.js\"&gt;&lt;\/script&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=\"https:\/\/rawgit.com\/walkermatt\/ol3-layerswitcher\/master\/src\/ol3-layerswitcher.js\"&gt;&lt;\/script&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=\"https:\/\/rawgit.com\/walkermatt\/ol3-popup\/master\/src\/ol3-popup.js\"&gt;&lt;\/script&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r\n\tvar&nbsp;corineUrl&nbsp;=&nbsp;'http:\/\/filotis.itia.ntua.gr\/mapserver?SERVICE=WFS&'&nbsp;+\r\n&nbsp;&nbsp;&nbsp;&nbsp;'VERSION=1.1.0&REQUEST=GetFeature&TYPENAME=biotopes_corine&'&nbsp;+\r\n&nbsp;&nbsp;&nbsp;&nbsp;'SRSNAME=EPSG:4326&OUTPUTFORMAT=gml3';\r\n\tvar&nbsp;naturaUrl&nbsp;=&nbsp;'http:\/\/filotis.itia.ntua.gr\/mapserver?SERVICE=WFS&'&nbsp;+\r\n\t\t'VERSION=1.1.0&REQUEST=GetFeature&TYPENAME=biotopes_natura&'&nbsp;+\r\n\t\t'SRSNAME=EPSG:4326&OUTPUTFORMAT=gml3';\r\n\tvar&nbsp;cadastreUrl&nbsp;=&nbsp;'http:\/\/gis.ktimanet.gr\/wms\/wmsopen\/wmsserver.aspx';\r\n\tvar&nbsp;map&nbsp;=&nbsp;new&nbsp;ol.Map({\r\n\t\ttarget:&nbsp;'map',\r\n\t\tlayers:&nbsp;[new&nbsp;ol.layer.Tile({\r\n\t\t\t\t\t&nbsp;title:&nbsp;'Open&nbsp;Street&nbsp;Map',\r\n\t\t\t\t\t&nbsp;source:&nbsp;new&nbsp;ol.source.OSM(),\r\n\t\t\t\t\t&nbsp;type:&nbsp;'base'\r\n\t\t\t\t&nbsp;}),\r\n\t\t\t\t&nbsp;new&nbsp;ol.layer.Tile({\r\n\t\t\t\t\t&nbsp;title:&nbsp;'Greek&nbsp;Cadastre',\r\n\t\t\t\t\t&nbsp;type:&nbsp;'base',\r\n\t\t\t\t\t&nbsp;visible:&nbsp;false,\r\n\t\t\t\t\t&nbsp;source:&nbsp;new&nbsp;ol.source.TileWMS({\r\n\t\t\t\t\t\t&nbsp;url:&nbsp;cadastreUrl\r\n\t\t\t\t\t&nbsp;})\r\n\t\t\t\t&nbsp;}),\r\n\t\t\t\t&nbsp;new&nbsp;ol.layer.Vector({\r\n\t\t\t\t\t&nbsp;title:&nbsp;'Corine&nbsp;biotopes',\r\n\t\t\t\t\t&nbsp;source:&nbsp;new&nbsp;ol.source.Vector({\r\n\t\t\t\t\t\t&nbsp;format:&nbsp;new&nbsp;ol.format.WFS(),\r\n\t\t\t\t\t\t&nbsp;url:&nbsp;corineUrl\r\n\t\t\t\t\t&nbsp;})\r\n\t\t\t\t&nbsp;}),\r\n\t\t\t\t&nbsp;new&nbsp;ol.layer.Vector({\r\n\t\t\t\t\t&nbsp;title:&nbsp;'Natura&nbsp;biotopes',\r\n\t\t\t\t\t&nbsp;source:&nbsp;new&nbsp;ol.source.Vector({\r\n\t\t\t\t\t\t&nbsp;format:&nbsp;new&nbsp;ol.format.WFS(),\r\n\t\t\t\t\t\t&nbsp;url:&nbsp;naturaUrl\r\n\t\t\t\t\t&nbsp;})\r\n\t\t\t\t&nbsp;})],\r\n\t\tview:&nbsp;new&nbsp;ol.View({\r\n\t\t\tprojection:&nbsp;'EPSG:4326',\r\n\t\t\tcenter:&nbsp;[24,&nbsp;38],&nbsp;zoom:&nbsp;6\r\n\t\t})\r\n\t});\r\n\tmap.addControl(new&nbsp;ol.control.LayerSwitcher());\r\n\t&lt;\/script&gt;\r\n&nbsp;&nbsp;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Este \u00e9 o resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2018\/04\/OL3_05.png\" alt=\"\" width=\"284\" height=\"274\" class=\"aligncenter size-full wp-image-7205\" \/><\/p>\n<p>Espero que este post tenha sido \u00fatil e ajudado principalmente quem est\u00e1 migrando do OpenLayers 2 para as novas vers\u00f5es (3 ou 4).<\/p>\n<p>Fonte: <a href=\"https:\/\/medium.com\/gis-tips\/openlayers-3-adding-a-layer-switcher-9b63ae9e5253\" rel=\"noopener\" target=\"_blank\">Antonis Christofides<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>O OpenLayers 2 costumava ter um controle chamado LayerSwitcher. Com ele voc\u00ea podia escolher diferentes camadas para mostrar no mapa. Por\u00e9m, este controle desapareceu no OpenLayers 3. LayerSwitcher em OpenLayers 2 No OpenLayers 3+, existem atualmente duas maneiras de ter&#8230; <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2018\/04\/25\/adicionando-layer-switcher-no-openlayers-3\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":7182,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[250],"class_list":["post-7180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/7180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/comments?post=7180"}],"version-history":[{"count":9,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/7180\/revisions"}],"predecessor-version":[{"id":7235,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/7180\/revisions\/7235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/7182"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=7180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=7180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=7180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}