BHMap documentação básica

Exemplos de uso básico da API do BHMap

Exemplo 4: Sobrepondo uma camada JSON ao mapa base

Código

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Treinamento OpenLayers</title>
   </head>
   <body onload="init()">
   
      <!-- elemento div do mapa. é necessário definir um id para o elemento -->
      <div id="map" style="height: 80vH;width:90vW"></div>
      
    <script type="text/javascript" src="https://bhmap.pbh.gov.br/v2/api/visualizador/js?funcionalidade=util&layersbase=base&versao=0.0.3"></script>
    <script type="text/javascript">
       
    function init() {

      BHMap.afterload = function() {
        BHMap.Map.addControls([new OpenLayers.Control.MousePosition(), new OpenLayers.Control.ScaleLine()]);

      BHMap.Map.zoomTo(3);
      BHMap.Map.setCenter(new OpenLayers.LonLat.fromArray([ 610250.9075, 7796893.0925 ]));
        
        adicionarFeatureJson();
        
      }

      BHMap.startMap('map');
      
 
    }
   
   function adicionarFeatureJson() {
      
      // Dados em formato json
      var jsonfeature = '{"type":"FeatureCollection","totalFeatures":1,"features":[{"type":"Feature","id":"BAIRRO.fid--4594e6e5_1600d9ff054_613e","geometry":{"type":"MultiPolygon","coordinates":[[[[611002.84157328,7797913.77360955],[610977.25457975,7797914.01356571],[610960.09488478,7797914.34350281],[610942.93518972,7797914.0135707],[610925.78374035,7797912.32390808],[610897.18699676,7797908.62464541],[610862.32337657,7797898.38667961],[610831.59094594,7797882.3898546],[610802.99420049,7797865.90312636],[610710.81339993,7797814.76327549],[610648.41675273,7797779.3603013],[610583.41440417,7797740.94792395],[610610.18055438,7797703.12541637],[610622.99466311,7797683.96921122],[610583.92563594,7797648.87617222],[610511.08144012,7797563.17316886],[610444.5206122,7797480.75951265],[610409.8713806,7797439.06778086],[610320.27153452,7797326.72006085],[610293.74450657,7797305.59425177],[610263.42436953,7797283.40865328],[610250.08251983,7797274.37044656],[610204.69714423,7797256.60397439],[610186.2840734,7797251.72494406],[610166.52692302,7797249.29542844],[610151.36273289,7797247.39580712],[610137.01488604,7797247.39580919],[610119.9623876,7797247.39581165],[610093.295183,7797250.24525074],[610109.94362899,7797223.31058673],[610197.19335885,7797073.82020281],[610204.4827224,7797057.76338418],[610287.61775466,7796915.58155232],[610311.21748374,7796879.48870244],[610354.74752038,7796801.11422982],[610333.59681238,7796782.15798999],[610323.3966457,7796768.30073794],[610312.45434764,7796744.97536257],[610310.48357689,7796722.27986107],[610312.70171758,7796698.48457694],[610319.90037492,7796672.54971613],[610340.08630866,7796655.24314335],[610357.36144431,7796642.95557624],[610377.5556253,7796635.0171467],[610399.91022982,7796631.41785684],[610425.15089653,7796635.01713981],[610446.61494671,7796642.89557521],[610494.38336961,7796560.0119957],[610510.24021058,7796535.49685227],[610525.00035184,7796535.34687986],[610528.6532814,7796540.44586871],[610535.94264769,7796543.36528904],[610546.88494174,7796538.98615539],[610636.19616199,7796515.80073777],[610770.73608138,7796479.19797287],[610905.33372189,7796441.93533873],[611040.01382143,7796405.77248657],[611051.10454174,7796403.20299423],[611159.19165049,7796375.28851111],[611177.57173625,7796369.86958245],[611312.39201578,7796333.05685904],[611347.49478519,7796470.11968824],[611375.37412919,7796424.47873015],[611430.78648936,7796329.92746201],[611447.94617972,7796298.27373324],[611543.05425964,7796273.51862577],[611559.3728735,7796270.51921787],[611579.19599024,7796267.94972425],[611589.74247965,7796250.19324202],[611610.3324649,7796253.28262669],[611716.93531387,7796227.23777316],[611726.61599316,7796265.67015448],[611809.94899229,7796573.1292043],[611846.22267846,7796713.02147255],[611855.07052262,7796748.99434149],[611853.01730174,7796786.40692668],[611875.73472739,7796796.52491798],[611835.84937277,7796867.60083671],[611806.12294218,7796862.30189131],[611784.57643394,7796860.15232051],[611753.0524006,7796862.03195258],[611727.72927634,7796867.69083471],[611698.6377816,7796878.74864733],[611676.70371884,7796892.09600512],[611667.83938949,7796901.07422695],[611649.16245338,7796917.81091251],[611627.91280065,7796939.69657792],[611602.1773877,7796984.75765067],[611572.5581631,7797043.98591607],[611566.23356772,7797054.06391956],[611674.30419808,7797117.11140788],[611672.57256298,7797127.92926406],[611692.10708602,7797210.00299438],[611700.83948744,7797244.02624977],[611737.01422242,7797380.33922757],[611765.12447332,7797484.86850604],[611772.84262966,7797513.76277813],[611799.29545633,7797614.54279994],[611824.6680721,7797719.08207684],[611805.06759303,7797712.8333182],[611728.86732628,7797668.41213351],[611718.65891477,7797662.07339132],[611706.42202137,7797702.15544896],[611680.68660699,7797737.64841813],[611665.04415709,7797748.07635364],[611638.12957805,7797766.24275705],[611623.32820828,7797772.97142562],[611597.08979076,7797781.71969557],[611568.15496675,7797785.07903399],[611543.7636273,7797786.50875418],[611458.90518344,7797785.43897861],[611391.03327121,7797786.33881018],[611334.51594827,7797788.18845182],[611293.47615915,7797791.13787325],[611264.71449942,7797798.70637738],[611241.50232301,7797806.44484702],[611194.23689042,7797828.14055389],[611166.31631224,7797841.6778749],[611092.30121835,7797881.38001685],[611072.79144644,7797891.46802027],[611045.57176827,7797901.23608823],[611034.00278647,7797904.47544788],[611002.84157328,7797913.77360955]]]]},"geometry_name":"GEOMETRIA","properties":{"ID":37,"CODIGO":642,"NOME":"Centro","AREA_KM2":1.952,"PERIMETR_M":6356.762}}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::31983"}}}';
      
      // Parse do json para features
      var features = new OpenLayers.Format.GeoJSON().read(jsonfeature);
      
      // Adiciona as features ao mapa
      BHMap.LayerVector.addFeatures(features);
            
      var controleSelect = new OpenLayers.Control.SelectFeature(BHMap.LayerVector, { 
         
         onSelect: function(feature) {
            
            alert('Feature selecionada. Atributos: ' + JSON.stringify(feature.attributes))

         },
         onUnselect: function(feature){
            // 
         }}
       );
       
       BHMap.Map.addControl(controleSelect);
       controleSelect.activate();
   }
   
    </script>
</html>