{"id":5476,"date":"2016-06-01T07:07:54","date_gmt":"2016-06-01T10:07:54","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5476"},"modified":"2016-08-12T16:30:27","modified_gmt":"2016-08-12T19:30:27","slug":"introducao-ao-openlayers-3-estilo","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/06\/01\/introducao-ao-openlayers-3-estilo\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: Estilo"},"content":{"rendered":"

A classe ol.layer.Vector<\/strong> fornece um tipo de camada bastante flex\u00edvel. Por padr\u00e3o, quando voc\u00ea cria uma nova camada de vetor, n\u00e3o s\u00e3o feitas suposi\u00e7\u00f5es de onde os recursos para a camada vir\u00e3o, uma vez que este \u00e9 de dom\u00ednio da classe ol.source.Vector<\/strong>. <\/p>\n

A classe ol.format \u00e9 respons\u00e1vel \u200b\u200bpela an\u00e1lise de dados a partir do servidor que representa as caracter\u00edsticas do vetor. Na maioria das vezes voc\u00ea n\u00e3o ir\u00e1 us\u00e1-los diretamente, mas voc\u00ea estar\u00e1 usando sua fonte correspondente, por exemplo ol.source.KML<\/strong>. O ol.format<\/strong> transforma dados bruto em objetos da classe ol.Feature<\/strong>.<\/p>\n

Considere os dois blocos de dados abaixo. Ambos representam o mesmo objeto ol.Feature<\/strong> (um ponto em Barcelona, \u200b\u200bEspanha). O primeiro \u00e9 serializado como GeoJSON (usando ol.format.GeoJSON<\/strong>), e o segundo \u00e9 serializado como KML (usando ol.format.KML<\/strong>).<\/p>\n

GeoJSON:<\/p>\n

{ \r\n    \"type\" :  \"Feature\" , \r\n    \"id\" :  \"OpenLayers.Feature.Vector_107\" , \r\n    \"properties\" :  {}, \r\n    \"geometry\" :  { \r\n        \"type\" :  \"Point\" , \r\n        \"coordinates\" :  [ - 104.98 ,  39.76 ] \r\n    } \r\n}<\/pre>\n
KML:<\/p>\n
<? xml version = \"1.0\" encoding=\"utf-8\"?> \r\n<kml  xmlns= \"http:\/\/earth.google.com\/kml\/2.2\" > \r\n  <Placemark> \r\n    <Point> \r\n      <coordinates> -104.98,39.76 <\/coordinates> \r\n    <\/Point> \r\n  <\/Placemark> \r\n<\/kml><\/pre>\n
Ao denominar elementos HTML, voc\u00ea pode usar o seguinte CSS:<\/p>\n
.someClass {\r\n    background-color: blue;\r\n    border-width: 1px;\r\n    border-color: verde-oliva;\r\n}<\/pre>\n
O .someClass \u00e9 um selector (neste caso, ele seleciona todos os elementos que incluem o nome da classe “someClass” ) e o bloco que segue \u00e9 um grupo de propriedades e valores, tamb\u00e9m conhecido como declara\u00e7\u00e3o de estilo.<\/p>\n
A camada de vetor pode ter estilo. Mais especificamente, uma camada de vetor pode ser configurada com um objeto ol.style.Style<\/strong>, uma matriz de objetos ol.style.Style<\/strong>, ou uma inst\u00e2ncia ol.Feature<\/strong> que retorne uma matriz de objetos ol.style<\/strong>.<\/p>\n
Aqui est\u00e1 um exemplo de uma camada de vetor configurado com um estilo:<\/p>\n
var layer = new ol.layer.Vector({\r\n  source: new ol.source.Vector(),\r\n  style: new ol.style.Style({\r\n    \/\/ ...\r\n  })\r\n});<\/pre>\n
E aqui est\u00e1 um exemplo de uma camada de vetor configurada com uma fun\u00e7\u00e3o que aplica um estilo a todos os recursos que t\u00eam um atributo chamado class<\/strong> com um valor de ‘someClass’<\/strong> :<\/p>\n
var layer = new ol.layer.Vector({\r\n  source: new ol.source.Vector(),\r\n  style: function(feature, resolution) {\r\n    if (feature.get('class') === 'someClass') {\r\n      \/\/ create styles...\r\n      return styles;\r\n    }\r\n  },\r\n});<\/pre>\n
No OpenLayers 3 o equivalente a um bloco de declara\u00e7\u00e3o em CSS \u00e9 o Symbolizer. Para apresentar caracter\u00edsticas de pol\u00edgonos com um fundo azul e um 1 pixel de largura, voc\u00ea usaria dois symbolizers como mostrado a seguir:<\/p>\n
new ol.style.Style({\r\n  fill: new ol.style.Fill({\r\n    color: 'blue'\r\n  }),\r\n  stroke: new ol.style.Stroke({\r\n    color: 'olive',\r\n    width: 1\r\n  })\r\n});<\/pre>\n
Dependendo do tipo de geometria, symbolizers diferentes podem ser aplicados. Linhas funcionam como pol\u00edgonos, mas eles n\u00e3o podem ter um preenchimento. Os pontos podem ser decorados com ol.style.Circle<\/strong> ou ol.style.Icon<\/strong>. O primeiro \u00e9 usado para processar formas de c\u00edrculo, e este \u00faltimo usa arquivos (por exemplo, png). Aqui est\u00e1 um exemplo de um estilo com um c\u00edrculo:<\/p>\n
new ol.style.Circle({\r\n  radius: 20,\r\n  fill: new ol.style.Fill({\r\n    color: '#ff9900',\r\n    opacity: 0.6\r\n  }),\r\n  stroke: new ol.style.Stroke({\r\n    color: '#ffcc00',\r\n    opacity: 0.4\r\n  })\r\n});<\/pre>\n
Um objeto ol.style.Style<\/strong> tem 4 propriedades: fill, image, stroke and text. Ele tamb\u00e9m tem uma propriedade opcional zIndex<\/strong>. A fun\u00e7\u00e3o de estilo vai retornar um array de objetos ol.style.Style.<\/p>\n
Se voc\u00ea quiser que todos os recursos sejam representados pela cor vermelha, exceto aqueles que t\u00eam uma classe de atributo com o valor de “someClass” (e voc\u00ea quer que essas tenham caracter\u00edsticas de cor azul), voc\u00ea pode criar uma fun\u00e7\u00e3o estilo parecida com a seguinte:<\/p>\n
style :  ( function ()  { \r\n  var  someStyle  =  [ new  ol . style . Style ({ \r\n    fill :  new  ol . style . Fill ({ \r\n      color :  'blue' \r\n    }), \r\n    stroke :  new  ol . style . Stroke ({ \r\n      color :  'olive' , \r\n      width :  1 \r\n    }) \r\n  })]; \r\n  var  otherStyle  =  [ new  ol . style . Style ({ \r\n    fill :  new  ol . style . Fill ({ \r\n      color :  'red' \r\n    }) \r\n  })]; \r\n  return  function ( feature ,  resolution )  { \r\n    if  ( feature . get ( 'class' )  ===  \"someClass\" )  { \r\n      return  someStyle ; \r\n    }  else  { \r\n      return  otherStyle ; \r\n    } \r\n  }; \r\n}())<\/pre>\n
Um arquivo CSS permite a cria\u00e7\u00e3o de pseudo-classes em seletores. Estes basicamente limitam a aplica\u00e7\u00e3o das declara\u00e7\u00f5es de estilo baseado em contextos que n\u00e3o s\u00e3o facilmente representados no selector, como a posi\u00e7\u00e3o do mouse, elementos vizinhos, ou o hist\u00f3rico do navegador. <\/p>\n
No OpenLayers 3, voc\u00ea pode usar um conceito um pouco semelhante como op\u00e7\u00e3o de configura\u00e7\u00e3o de estilo em um ol.interaction.Select. Veja o seguinte exemplo:<\/p>\n
var select = new ol.interaction.Select({\r\n  style: new ol.style.Style({\r\n    fill: new ol.style.Fill({\r\n      color: 'rgba(255,255,255,0.5)'\r\n    })\r\n  })\r\n});<\/pre>\n
Agora vamos aplicar os conceitos acima no nosso mapa. <\/p>\n
<!doctype html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <link rel=\"stylesheet\" href=\"ol3\/ol.css\" type=\"text\/css\">\r\n    <style>\r\n    #map {\r\n      background-color: gray;\r\n      height: 256px;\r\n      width: 512px;\r\n    }\r\n    <\/style>\r\n    <title>OpenLayers 3 example<\/title>\r\n    <script src=\"ol3\/ol.js\" type=\"text\/javascript\"><\/script>\r\n  <\/head>\r\n  <body>\r\n    <h1>My Map<\/h1>\r\n    <div id=\"map\"><\/div>\r\n    <script type=\"text\/javascript\">\r\n      var map = new ol.Map({\r\n        target: 'map',\r\n        layers: [\r\n          new ol.layer.Vector({\r\n            title: 'Buildings',\r\n            source: new ol.source.KML({\r\n              url: 'data\/layers\/buildings.kml',\r\n              extractStyles: false\r\n            }),\r\n            style: new ol.style.Style({\r\n              stroke: new ol.style.Stroke({color: 'red', width: 2})\r\n            })\r\n          })\r\n        ],\r\n        view: new ol.View({\r\n          projection: 'EPSG:4326',\r\n          center: [-122.791859392, 42.3099154789],\r\n          zoom: 16\r\n        })\r\n      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
Salve o seu arquivo map.html, e abra seu mapa no navegador para ver o resultado.<\/p>\n
Ap\u00f3s nossa compreens\u00e3o b\u00e1sica de estilo no OpenLayers, podemos criar uma fun\u00e7\u00e3o que exibe Buildings<\/em> em cores diferentes com base no seu tamanho. No seu c\u00f3digo de inicializa\u00e7\u00e3o mapa, substitua a op\u00e7\u00e3o de estilo de configura\u00e7\u00e3o como o seguinte:<\/p>\n
style: (function() {\r\n  var defaultStyle = [new ol.style.Style({\r\n    fill: new ol.style.Fill({color: 'navy'}),\r\n    stroke: new ol.style.Stroke({color: 'black', width: 1})\r\n  })];\r\n  var ruleStyle = [new ol.style.Style({\r\n    fill: new ol.style.Fill({color: 'olive'}),\r\n    stroke: new ol.style.Stroke({color: 'black', width: 1})\r\n  })];\r\n  return function(feature, resolution) {\r\n    if (feature.get('shape_area') < 3000) {\r\n      return ruleStyle;\r\n    } else {\r\n      return defaultStyle;\r\n    }\r\n  };\r\n})()<\/pre>\n
Veja o resultado:<\/p>\n
\"style1\"<\/p>\n
Agora, para finalizar, vamos adicionar um r\u00f3tulo. Por simplicidade, estamos apenas usando um r\u00f3tulo e um contorno preto com o estilo.<\/p>\n
style: (function() {\r\n  var stroke = new ol.style.Stroke({\r\n    color: 'black'\r\n  });\r\n  var textStroke = new ol.style.Stroke({\r\n    color: '#fff',\r\n    width: 3\r\n  });\r\n  var textFill = new ol.style.Fill({\r\n    color: '#000'\r\n  });\r\n  return function(feature, resolution) {\r\n    return [new ol.style.Style({\r\n      stroke: stroke,\r\n      text: new ol.style.Text({\r\n        font: '12px Calibri,sans-serif',\r\n        text: feature.get('key'),\r\n        fill: textFill,\r\n        stroke: textStroke\r\n      })\r\n    })];\r\n  };\r\n})()<\/pre>\n
Veja o resultado:<\/p>\n
\"style2\"<\/p>\n
Com este post, encerramos as publica\u00e7\u00f5es t\u00e9cnicas da s\u00e9rie \"Introdu\u00e7\u00e3o ao OpenLayers 3\", que foi baseada no Workshop de OpenLayers 3<\/a> dispon\u00edvel no site da Boundless.<\/p>\n
Amanh\u00e3 teremos o \u00faltimo post<\/a>, com a dica de livros sobre OpenLayers 3, n\u00e3o perca!<\/p>\n","protected":false},"excerpt":{"rendered":"
A classe ol.layer.Vector fornece um tipo de camada bastante flex\u00edvel. Por padr\u00e3o, quando voc\u00ea cria uma nova camada de vetor, n\u00e3o s\u00e3o feitas suposi\u00e7\u00f5es de onde os recursos para a camada vir\u00e3o, uma vez que este \u00e9 de dom\u00ednio da… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5477,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,80,6],"tags":[223,250],"class_list":["post-5476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-programacao","category-tecnologia","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5476","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=5476"}],"version-history":[{"count":10,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5476\/revisions"}],"predecessor-version":[{"id":6216,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5476\/revisions\/6216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5477"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}