{"id":5266,"date":"2016-05-13T07:06:33","date_gmt":"2016-05-13T10:06:33","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5266"},"modified":"2018-09-04T12:27:56","modified_gmt":"2018-09-04T15:27:56","slug":"criando-um-mapa-de-calor-no-geoserver-com-wps-parte-3","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/13\/criando-um-mapa-de-calor-no-geoserver-com-wps-parte-3\/","title":{"rendered":"Criando um mapa de calor no GeoServer com WPS (Parte 3)"},"content":{"rendered":"

Neste post iremos finalizar nosso artigo construindo uma aplica\u00e7\u00e3o para apresentar o nosso mapa de calor. Para isso voc\u00ea vai precisar para construir o aplicativo em algum lugar que seja acess\u00edvel por um navegador web.<\/p>\n

O mapa simples que podemos desenvolver usa apenas uma p\u00e1gina com OpenLayers que mostra um mapa base e nossa camada WMS (geonames). Para isso voc\u00ea vai precisar de dois arquivos, basic-openlayers.html<\/a> e basic-openlayers.js<\/a>. No documento HTML coloque o seguinte:<\/p>\n

<html>\r\n  <head>\r\n    <title>Basic Word Map<\/title>\r\n    <script src=\"http:\/\/www.openlayers.org\/api\/2.12\/OpenLayers.js\"><\/script>\r\n    <script src=\"basic-openlayers.js\"><\/script>\r\n  <\/head>\r\n  <body onLoad=\"initMap()\">\r\n  <div id=\"map\"><\/div>\r\n  <\/body>\r\n<\/html>\r\n<html>\r\n  <head>\r\n    <title>Basic Word Map<\/title>\r\n    <script src=\"http:\/\/www.openlayers.org\/api\/2.12\/OpenLayers.js\"><\/script>\r\n    <script src=\"basic-openlayers.js\"><\/script>\r\n  <\/head>\r\n  <body onLoad=\"initMap()\">\r\n  <div id=\"map\"><\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
O documento HTML apenas faz refer\u00eancia ao nosso arquivo javascript (OpenLayers) do aplicativo, e estabelece uma chamada “map” para realizar o v\u00ednculo com o OpenLayers. No documento JavaScript, coloque o seguinte c\u00f3digo:<\/p>\n
function initMap() {\r\n  \/\/ Create the map\r\n  var map = new OpenLayers.Map(\"map\");\r\n  \/\/ Create a WMS layer, with a base layer (states) and names layer (geonames)\r\n  var wms = new OpenLayers.Layer.WMS(\"GeoServer WMS\",\r\n    \"http:\/\/localhost:8080\/geoserver\/wms\",\r\n    {\r\n      layers: \"usa:states,opengeo:geonames\"\r\n    });\r\n  \/\/ Set the word parameter for the geonames layer\r\n  var myWord = \"Navajo\";\r\n  wms.mergeNewParams({viewparams: \"word:\" + myWord});\r\n  \/\/ Add the layer to the map and center the map on the USA\r\n  map.addLayer(wms);\r\n  map.setCenter(new OpenLayers.LonLat(-100, 38), 5);\r\n}<\/pre>\n
O arquivo Javascript usa como base a camada “states” do GeoServer para servir como contexto para a camada “geonames”. <\/p>\n
\"ol-navajo\"<\/p>\n
Agora altere o valor da v\u00e1riavel “myWord” e recarregue a p\u00e1gina para ver os diferentes resultados no mapa.<\/p>\n
Isto \u00e9 muito interessante, mas seria ainda melhor se pud\u00e9ssemos digitar uma palavra e imediatamente ver a mudan\u00e7a do mapa, sem precisar recarreg\u00e1-la. Queremos tamb\u00e9m visualizar os resultados atrav\u00e9s de um mapa de calor, n\u00e3o apenas um mapa de pontos!<\/p>\n
Para construir nossa aplica\u00e7\u00e3o final, usaremos o ExtJS<\/a>, com a biblioteca GeoExt<\/a>. Assim como acontece com os exemplos do OpenLayers<\/a>, a p\u00e1gina HTML do ExtJS \u00e9 muito simples, pois \u00e9 apenas um lugar para declarar as refer\u00eancias das bibliotecas que ser\u00e3o utilizadas. <\/p>\n
<html>\r\n  <head>\r\n    <title>OpenGeo Word Map<\/title>\r\n    <!-- ExtJS Scripts and Styles -->\r\n    <script type=\"text\/javascript\" src=\"http:\/\/cdn.sencha.com\/ext\/gpl\/3.4.1.1\/adapter\/ext\/ext-base.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"http:\/\/cdn.sencha.com\/ext\/gpl\/3.4.1.1\/ext-all.js\"><\/script>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/cdn.sencha.com\/ext\/gpl\/3.4.1.1\/resources\/css\/ext-all.css\" \/>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/cdn.sencha.com\/ext\/gpl\/3.4.1.1\/examples\/shared\/examples.css\" \/>\r\n    <!-- OpenLayers Script -->\r\n    <script src=\"http:\/\/www.openlayers.org\/api\/2.12\/OpenLayers.js\"><\/script>\r\n    <!-- GeoExt Script -->\r\n    <script type=\"text\/javascript\" src=\"http:\/\/api.geoext.org\/1.1\/script\/GeoExt.js\"><\/script>\r\n    <!-- Our Application -->\r\n    <script type=\"text\/javascript\" src=\"wordmap-simple.js\"><\/script>\r\n  <\/head>\r\n  <body>\r\n  <\/body>\r\n<\/html><\/pre>\n
Voc\u00ea pode perceber que no arquivo HTML acima, s\u00e3o declaradas as bibliotecas ExtJS, GeoExt, OpenLayers e tamb\u00e9m o documento “wordmap-simple.js<\/a>” que nada mais \u00e9 que a nossa aplica\u00e7\u00e3o. Veja:<\/p>\n
\/\/ Use this word on startup\r\nvar startWord = \"Ocean\";\r\n\/\/ Base map\r\nvar osmLayer = new OpenLayers.Layer.OSM();\r\n\/\/ Point map\r\nvar wmsLayer = new OpenLayers.Layer.WMS(\"WMS\", \"http:\/\/localhost:8080\/geoserver\/wms\", {\r\n  format: \"image\/png\",\r\n  transparent: true,\r\n  layers: \"opengeo:geonames\",\r\n  styles: \"point\"\r\n}, {\r\n  opacity: 0.6,\r\n  singleTile: true,\r\n});\r\n\/\/ Start with map of startWord\r\nwmsLayer.mergeNewParams({viewparams: \"word:\"+startWord});<\/pre>\n
Tal como acontece com o nosso exemplo simples, come\u00e7amos definindo nossas camadas: o OpenStreetMap como mapa base; e a nossa camada WMS. Temos algumas op\u00e7\u00f5es extras na defini\u00e7\u00e3o da camada WMS no OpenLayers, pois a definimos para ter um fundo transparente, e uma opacidade parcial, isso para sobrepor o mapa base.<\/p>\n
N\u00f3s tamb\u00e9m definimos uma vari\u00e1vel com nome de “startWord”, que ir\u00e1 iniciar o mapeamento da aplica\u00e7\u00e3o ao set\u00e1-la no par\u00e2metro da URL.<\/p>\n
Agora as coisas come\u00e7am a ficam um pouco mais complicadas:<\/p>\n
\/\/ Map with projection into (required when mixing base map with WMS)\r\nolMap = new OpenLayers.Map({\r\n  projection: \"EPSG:900913\",\r\n  center: [-10764594.0, 4523072.0],\r\n  units: \"m\",\r\n  layers: [wmsLayer, osmLayer],\r\n  zoom: 4\r\n});<\/pre>\n
Como estamos misturando um mapa WMS e um mapa do OSM, n\u00f3s precisamos:<\/p>\n
1. Garantir que a camada WMS declare a proje\u00e7\u00e3o que est\u00e1 usando, que deve ser a Mercator para coincidir com o mapa base (OSM); e,
\n2. Garantir que o ponto central est\u00e1 convertido em Mercator antes de ser iniciado o mapa.<\/p>\n
Agora que o mapa est\u00e1 configurado, s\u00f3 precisamos reunir os componentes ExtJS em uma aplica\u00e7\u00e3o:<\/p>\n
\/\/ Text field component. On 'enter' update the WMS URL\r\nvar textField = new Ext.form.TextField({\r\n  value: startWord,\r\n  listeners: {\r\n    specialkey: function(fld, e) {\r\n      \/\/ Only update the map when the user hits 'enter'\r\n      if (e.getKey() == e.ENTER) {\r\n        wmsLayer.mergeNewParams({viewparams: \"word:\"+fld.getValue()});\r\n      }\r\n    }\r\n  }\r\n});<\/pre>\n
Para introduzir novas palavras precisamos de um campo de texto na tela. Quando o usu\u00e1rio clicar, ele deve pegar o evento e atualizar a camada (WMS).<\/p>\n
\/\/ Map panel, with text field embedded in top toolbar\r\nvar mapPanel = new GeoExt.MapPanel({\r\n  title: \"OpenGeo Geonames Heat Map\",\r\n  tbar: [\"Enter a word to map:\", textField],\r\n  map: olMap\r\n});<\/pre>\n
Agora iremos adicionar um painel com o campo de texto embutido na barra de ferramentas no topo da tela:<\/p>\n
\/\/ Viewport wraps map panel in full-screen handler\r\nvar viewPort = new Ext.Viewport({\r\n  layout: \"fit\",\r\n  items: [mapPanel]\r\n});\r\n\/\/ Start the app!\r\nExt.onReady(function () {\r\n  viewPort.show();\r\n});<\/pre>\n
Para finalizamos nossa aplica\u00e7\u00e3o vamos ver como ficou o nosso c\u00f3digo em um \u00fanico bloco:<\/p>\n
\/\/ Use this word on startup\r\nvar startWord = \"ocean\";\r\n\/\/ Base map\r\nvar osmLayer = new OpenLayers.Layer.OSM();\r\n\/\/ Heat map + point map\r\nvar wmsLayer = new OpenLayers.Layer.WMS(\"WMS\",\r\n  \/\/ Uncomment below to use your local server\r\n  \/\/ \"http:\/\/localhost:8080\/geoserver\/wms\",\r\n  \"http:\/\/apps.opengeo.org\/geoserver\/wms\",\r\n  {\r\n    format: \"image\/png8\",\r\n    transparent: true,\r\n    layers: \"opengeo:geonames,opengeo:geonames\",\r\n    styles: \"point,heatmap\"\r\n  }, {\r\n    opacity: 0.6,\r\n    singleTile: true,\r\n  });\r\n\/\/ Start with map of startWord\r\nwmsLayer.mergeNewParams({viewparams: \"word:\"+startWord});\r\n\/\/ Map with projection into (required when mixing base map with WMS)\r\nolMap = new OpenLayers.Map({\r\n  projection: \"EPSG:900913\",\r\n  units: \"m\",\r\n  layers: [wmsLayer, osmLayer],\r\n  center: [-10764594.0, 4523072.0],\r\n  zoom: 4\r\n});\r\n\/\/ Take in user input, fire an event when complete\r\nvar textField = new Ext.form.TextField({\r\n  value: startWord,\r\n  listeners: {\r\n    specialkey: function(field, e) {\r\n      \/\/ Only update the word map when user hits 'enter'\r\n      if (e.getKey() == e.ENTER) {\r\n        wmsLayer.mergeNewParams({viewparams: \"word:\"+field.getValue()});\r\n      }\r\n    }\r\n  }\r\n});\r\n\/\/ Map panel, with text field embedded in top toolbar\r\nvar mapPanel = new GeoExt.MapPanel({\r\n  title: \"OpenGeo Geonames Heat Map\",\r\n  tbar: [\"Enter a word to map:\", textField],\r\n  map: olMap\r\n});\r\n\/\/ Viewport wraps map panel in full-screen handler\r\nvar viewPort = new Ext.Viewport({\r\n  layout: \"fit\",\r\n  items: [mapPanel]\r\n});\r\n\/\/ Start the app!\r\nExt.onReady(function () {\r\n  viewPort.show();\r\n});<\/pre>\n
Veja agora como ficou o nosso mapa:<\/p>\n
\"ext-ocean\"<\/p>\n
Assim, ficou uma aplica\u00e7\u00e3o muito bonita, mas foi prometido um mapa de calor, e at\u00e9 agora, este \u00e9 apenas um mapa de pontos! N\u00f3s precisamos adicionar um estilo de mapa de calor:<\/p>\n
1. Clique em “Style” na barra de navega\u00e7\u00e3o do GeoServer
\n2. Selecione “Add new style”
\n3. Adicione o nome do estilo como “heatmap”
\n4. Cole o c\u00f3digo abaixo na \u00e1rea de c\u00f3digo<\/p>\n
<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\r\n<StyledLayerDescriptor version=\"1.0.0\"\r\n   xsi:schemaLocation=\"http:\/\/www.opengis.net\/sld StyledLayerDescriptor.xsd\"\r\n   xmlns=\"http:\/\/www.opengis.net\/sld\"\r\n   xmlns:ogc=\"http:\/\/www.opengis.net\/ogc\"\r\n   xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\r\n   xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\">\r\n  <NamedLayer>\r\n    <Name>Heatmap<\/Name>\r\n    <UserStyle>\r\n      <Title>Heatmap<\/Title>\r\n      <Abstract>A heatmap surface<\/Abstract>\r\n      <FeatureTypeStyle>\r\n        <Transformation>\r\n         <ogc:Function name=\"gs:Heatmap\">\r\n           <ogc:Function name=\"parameter\">\r\n             <ogc:Literal>data<\/ogc:Literal>\r\n           <\/ogc:Function>\r\n           <ogc:Function name=\"parameter\">\r\n             <ogc:Literal>radiusPixels<\/ogc:Literal>\r\n             <ogc:Function name=\"env\">\r\n               <ogc:Literal>radius<\/ogc:Literal>\r\n               <ogc:Literal>100<\/ogc:Literal>\r\n             <\/ogc:Function>\r\n           <\/ogc:Function>\r\n           <ogc:Function name=\"parameter\">\r\n             <ogc:Literal>pixelsPerCell<\/ogc:Literal>\r\n             <ogc:Literal>10<\/ogc:Literal>\r\n           <\/ogc:Function>\r\n           <ogc:Function name=\"parameter\">\r\n             <ogc:Literal>outputBBOX<\/ogc:Literal>\r\n             <ogc:Function name=\"env\">\r\n               <ogc:Literal>wms_bbox<\/ogc:Literal>\r\n             <\/ogc:Function>\r\n           <\/ogc:Function>\r\n           <ogc:Function name=\"parameter\">\r\n             <ogc:Literal>outputWidth<\/ogc:Literal>\r\n             <ogc:Function name=\"env\">\r\n               <ogc:Literal>wms_width<\/ogc:Literal>\r\n             <\/ogc:Function>\r\n           <\/ogc:Function>\r\n           <ogc:Function name=\"parameter\">\r\n             <ogc:Literal>outputHeight<\/ogc:Literal>\r\n             <ogc:Function name=\"env\">\r\n               <ogc:Literal>wms_height<\/ogc:Literal>\r\n             <\/ogc:Function>\r\n           <\/ogc:Function>\r\n         <\/ogc:Function>\r\n        <\/Transformation>\r\n        <Rule>\r\n          <RasterSymbolizer>\r\n          <!-- specify geometry attribute to pass validation -->\r\n            <Geometry>\r\n              <ogc:PropertyName>geom<\/ogc:PropertyName>\r\n            <\/Geometry>\r\n            <Opacity>0.6<\/Opacity>\r\n            <ColorMap type=\"ramp\" >\r\n              <ColorMapEntry color=\"#FFFFFF\" quantity=\"0\"    label=\"nodata\" opacity=\"0\" \/>\r\n              <ColorMapEntry color=\"#FFFFFF\" quantity=\"0.02\" label=\"nodata\" opacity=\"0\" \/>\r\n              <ColorMapEntry color=\"#4444FF\" quantity=\".1\"   label=\"nodata\" \/>\r\n              <ColorMapEntry color=\"#FF0000\" quantity=\".5\"   label=\"values\" \/>\r\n              <ColorMapEntry color=\"#FFFF00\" quantity=\"1.0\"  label=\"values\" \/>\r\n            <\/ColorMap>\r\n          <\/RasterSymbolizer>\r\n        <\/Rule>\r\n      <\/FeatureTypeStyle>\r\n    <\/UserStyle>\r\n  <\/NamedLayer>\r\n<\/StyledLayerDescriptor><\/pre>\n
Em seguida, clique no bot\u00e3o “Salvar”, e est\u00e1 pronto o nosso estilo heatmap! (Os par\u00e2metros do estilo s\u00e3o explicados aqui<\/a>). <\/p>\n
Ao invocar a fun\u00e7\u00e3o gs:Heatmap no estilo, o GeoServer est\u00e1 utilizando o m\u00e9todo heatmap dispon\u00edvel no servi\u00e7o WPS (Web Process Service), que realiza o processamento e disponibiliza a camada atrav\u00e9s do WMS.<\/p>\n
Para ativar o mapa de calor em nossa aplica\u00e7\u00e3o, n\u00f3s s\u00f3 precisamos especificar esse estilo em nossa camada WMS. Ent\u00e3o vamos fazer esta mudan\u00e7a na aplica\u00e7\u00e3o:<\/p>\n
\/\/ Heat map + point map\r\nvar wmsLayer = new OpenLayers.Layer.WMS(\"WMS\", \"http:\/\/localhost:8080\/geoserver\/wms\", {\r\n  format: \"image\/png\",\r\n  transparent: true,\r\n  layers: \"opengeo:geonames,opengeo:geonames\",\r\n  styles: \"point,heatmap\"\r\n}, {\r\n  opacity: 0.6,\r\n  singleTile: true,\r\n});<\/pre>\n
Note que, em vez de substituir o nosso estilo de ponto, estamos adicionando um estilo heatmap a mesma camada (opengeo:GeoNames) uma segunda vez. Isso nos permite ver os pontos originais, bem como o mapa de calor.<\/p>\n
\"ext-ocean-heat\"<\/p>\n
Este tutorial \u00e9 uma tradu\u00e7\u00e3o e adapta\u00e7\u00e3o livre do artigo “Building a GeoNames Heat Map<\/a>” publicado no site da Boundless.<\/p>\n
Fonte: Boundless<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Neste post iremos finalizar nosso artigo construindo uma aplica\u00e7\u00e3o para apresentar o nosso mapa de calor. Para isso voc\u00ea vai precisar para construir o aplicativo em algum lugar que seja acess\u00edvel por um navegador web. O mapa simples que podemos… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5303,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,62],"tags":[223,250,264],"class_list":["post-5266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-wps","tag-gis","tag-openlayers","tag-wps"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5266","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=5266"}],"version-history":[{"count":21,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5266\/revisions"}],"predecessor-version":[{"id":7289,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5266\/revisions\/7289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5303"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}