{"id":5392,"date":"2016-05-25T07:08:51","date_gmt":"2016-05-25T10:08:51","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5392"},"modified":"2016-08-12T16:33:17","modified_gmt":"2016-08-12T19:33:17","slug":"introducao-ao-openlayers-3-controles","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/25\/introducao-ao-openlayers-3-controles\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: Controles"},"content":{"rendered":"<p>Uma ferramenta t\u00edpica para exibir em seu mapa \u00e9 a barra de escala, e o <a class=\"zem_slink\" href=\"http:\/\/en.wikipedia.org\/wiki\/OpenLayers\" title=\"OpenLayers\" rel=\"wikipedia\" target=\"_blank\">OpenLayers<\/a> 3 fornece a classe ol.control.ScaleLine para esta finalidade.<\/p>\n<p>Vamos adicionar a escala no nosso mapa, para isso abra o arquivo map.html em seu editor de texto, e adicione o seguinte c\u00f3digo para criar este novo controle em seu mapa:<\/p>\n<pre>controls:&nbsp;ol.control.defaults().extend([\r\n&nbsp;&nbsp;new&nbsp;ol.control.ScaleLine()\r\n]),<\/pre>\n<p>Veja como ficou: <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/scaleline1.png\" alt=\"scaleline1\" width=\"510\" height=\"254\" class=\"aligncenter size-full wp-image-5453\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/scaleline1.png 510w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/scaleline1-300x149.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/p>\n<p>Voc\u00ea pode encontrar dificuldades para ler as informa\u00e7\u00f5es sobre a barra de escala. Existem algumas atitudes que podem ser tomadas a fim de melhorar a visibilidade da escala. Se voc\u00ea quiser manter o controle dentro do mapa de exibi\u00e7\u00e3o, voc\u00ea pode adicionar algumas declara\u00e7\u00f5es de estilo dentro do CSS do seu documento. <\/p>\n<p>Para testar isso, voc\u00ea pode incluir uma cor de fundo e preenchimento para a barra de escala com algo parecido com o seguinte:<\/p>\n<pre>.ol-scale-line,&nbsp;.ol-scale-line:not([ie8andbelow])&nbsp;{\r\n&nbsp;&nbsp;&nbsp;background:&nbsp;black;\r\n&nbsp;&nbsp;&nbsp;padding:&nbsp;5px;\r\n&nbsp;}<\/pre>\n<p>No entanto, digamos que voc\u00ea acha que o mapa est\u00e1 ficando polu\u00eddo visualmente. Para evitar isso, voc\u00ea pode exibir a escala em um local diferente. Para isso, precisamos primeiro criar um elemento adicional na nossa p\u00e1gina e, em seguida, dizer ao controle de escala para criar-se dentro deste novo elemento.<\/p>\n<p>Vamos ent\u00e3o criar um novo elemento no &lt;body&gt; da sua p\u00e1gina HTML. Para que seja f\u00e1cil de referenciar este elemento, vamos dar-lhe um ID. Insira o seguinte c\u00f3digo em algum lugar do &lt;body&gt; do seu map.html. (Colocar o elemento escala logo ap\u00f3s o elemento do mapa &lt;div id = &#8220;map&#8221;&gt; &lt;\/ div&gt; faz sentido.):<\/p>\n<pre>&lt;div&nbsp;id=\"scale-line\"&nbsp;class=\"scale-line\"&gt;&lt;\/div&gt;<\/pre>\n<p>Agora altere o c\u00f3digo do controle de escala para fazer refer\u00eancia ao novo elemento:<\/p>\n<pre>controls:&nbsp;ol.control.defaults().extend([\r\n&nbsp;&nbsp;new&nbsp;ol.control.ScaleLine({className:&nbsp;'ol-scale-line',&nbsp;target:&nbsp;document.getElementById('scale-line')})\r\n]),<\/pre>\n<p>Adicione o c\u00f3digo abaixo no seu estilo CSS:<\/p>\n<pre>.scale-line&nbsp;{\r\n&nbsp;&nbsp;position:&nbsp;absolute;\r\n&nbsp;&nbsp;top:&nbsp;350px;\r\n}\r\n.ol-scale-line&nbsp;{\r\n&nbsp;&nbsp;position:&nbsp;relative;\r\n&nbsp;&nbsp;bottom:&nbsp;0px;\r\n&nbsp;&nbsp;left:&nbsp;0px;\r\n}<\/pre>\n<p>Salve as altera\u00e7\u00f5es e abra o arquivo map.html no seu browser: @servidor@\/map.html<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/scaleline2.png\" alt=\"scaleline2\" width=\"512\" height=\"289\" class=\"aligncenter size-full wp-image-5463\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/scaleline2.png 512w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/scaleline2-300x169.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>Como vimos no post Vetores, podemos utiliz\u00e1-los sobre um mapa base. Uma das vantagens de utilizarmos vetores \u00e9 que podemos interagir com os dados. Neste exemplo, criamos uma camada de vetor, onde os usu\u00e1rios podem selecionar e visualizar as informa\u00e7\u00f5es.<\/p>\n<p>O exemplo anterior demonstrou a utiliza\u00e7\u00e3o de controles no mapa. A classe ol.interaction.Interaction \u00e9 um controle respons\u00e1vel por manipular a intera\u00e7\u00e3o do usu\u00e1rio, mas normalmente n\u00e3o tem uma representa\u00e7\u00e3o visual. O exemplo abaixo demonstra o uso da classe ol.interaction.Select para interagir com uma camada vetorial. Veja:<\/p>\n<pre>&lt;!doctype&nbsp;html&gt;\r\n&lt;html&nbsp;lang=\"en\"&gt;\r\n&nbsp;&nbsp;&lt;head&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"ol3\/ol.css\"&nbsp;type=\"text\/css\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;#map&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;256px;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;512px;\r\n&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=\"ol3\/ol.js\"&nbsp;type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;OpenLayers&nbsp;3&nbsp;example&lt;\/title&gt;\r\n&nbsp;&nbsp;&lt;\/head&gt;\r\n&nbsp;&nbsp;&lt;body&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;My&nbsp;Map&lt;\/h1&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=\"map\"&gt;&lt;\/div&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=\"text\/javascript\"&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;map&nbsp;=&nbsp;new&nbsp;ol.Map({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interactions:&nbsp;ol.interaction.defaults().extend([\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;ol.interaction.Select({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style:&nbsp;new&nbsp;ol.style.Style({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image:&nbsp;new&nbsp;ol.style.Circle({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius:&nbsp;5,\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill:&nbsp;new&nbsp;ol.style.Fill({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'#FF0000'\r\n&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;&nbsp;&nbsp;&nbsp;stroke:&nbsp;new&nbsp;ol.style.Stroke({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'#000000'\r\n&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;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]),\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target:&nbsp;'map',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layers:&nbsp;[\r\n&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;title:&nbsp;\"Global&nbsp;Imagery\",\r\n&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;url:&nbsp;'http:\/\/maps.opengeo.org\/geowebcache\/service\/wms',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;params:&nbsp;{LAYERS:&nbsp;'bluemarble',&nbsp;VERSION:&nbsp;'1.1.1'}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),\r\n&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;title:&nbsp;'Earthquakes',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:&nbsp;new&nbsp;ol.source.GeoJSON({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'data\/layers\/7day-M2.5.json'\r\n&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;style:&nbsp;new&nbsp;ol.style.Style({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image:&nbsp;new&nbsp;ol.style.Circle({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius:&nbsp;5,\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill:&nbsp;new&nbsp;ol.style.Fill({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'#0000FF'\r\n&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;&nbsp;&nbsp;&nbsp;stroke:&nbsp;new&nbsp;ol.style.Stroke({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'#000000'\r\n&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;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view:&nbsp;new&nbsp;ol.View({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;projection:&nbsp;'EPSG:4326',\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;center:&nbsp;[0,&nbsp;0],\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom:&nbsp;1\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/script&gt;\r\n&nbsp;&nbsp;&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Salve as altera\u00e7\u00f5es, e para ver o recurso de sele\u00e7\u00e3o em a\u00e7\u00e3o, use o clique do mouse para selecionar um elemento:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/select1.png\" alt=\"select1\" width=\"512\" height=\"253\" class=\"aligncenter size-full wp-image-5469\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/select1.png 512w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2016\/05\/select1-300x148.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p><a href=\"http:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/31\/introducao-ao-openlayers-3-desenhando\/\" target=\"_blank\">No pr\u00f3ximo post<\/a> falaremos sobre como realizar desenhos (edi\u00e7\u00e3o) atrav\u00e9s da interface do OpenLayers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma ferramenta t\u00edpica para exibir em seu mapa \u00e9 a barra de escala, e o OpenLayers 3 fornece a classe ol.control.ScaleLine para esta finalidade. Vamos adicionar a escala no nosso mapa, para isso abra o arquivo map.html em seu editor&#8230; <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/25\/introducao-ao-openlayers-3-controles\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":5393,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,80,25],"tags":[223,250],"class_list":["post-5392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-programacao","category-software","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5392","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=5392"}],"version-history":[{"count":12,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5392\/revisions"}],"predecessor-version":[{"id":6218,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5392\/revisions\/6218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5393"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}