tombatossals / angular-openlayers-directive

AngularJS directive to embed an interact with maps managed by the OpenLayers library
http://tombatossals.github.io/angular-openlayers-directive/
MIT License
282 stars 183 forks source link

get GeoJSON values #330

Closed ghost closed 6 years ago

ghost commented 7 years ago

How to get the GeoJSON properties and insert it as text?

` function () { angular .module('gerenciamentoMunicipalADM').controller('FiscalizacaoController', FiscalizacaoController); FiscalizacaoController.$inject = ["$window" , "$scope" , "$http" , "olData"];

function FiscalizacaoController($window , $scope , $http , olData) { var vm = this;

vm.inicializarMapa = inicializarMapa;

function inicializarMapa(){

 var coord = {
    lat : -22.5808 , // -22.4850251,
    lon : -53.0628   // -52.9983763,11

  }; 
  var lotes = {
    name: 'lotes',
    source: {
      type: 'GeoJSON',
      url: 'json/rosana/lotes.geo.json' ,
    },
    style: {
      fill: {
        color: 'transparent'
      },
      stroke: {
        color: 'brown',
        width: 1
      } ,
      text: {
        font: '12px Verdana',
       text : 'id'
      }
    }
  };

  angular.extend($scope, {
    base: {
      lat: coord.lat ,
      lon: coord.lon ,
      zoom: 15
    } ,
    layers : [lotes] ,
    controls : [
      { name: 'zoom', active: true },
      { name: 'fullscreen', active: true } ,
      { name : 'scaleline' , active : true}
    ]
  });
};

vm.inicializarMapa();

};

})();

`

ghost commented 7 years ago

I found soluton:

var lotes = { name: 'lotes', source: { type: 'GeoJSON', url: 'json/rosana/lotes.geo.json' , }, style: function(feature , resolution){ var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'transparent' , width : 1 }) , stroke: new ol.style.Stroke({ color: 'blue', width: 2 }) , text : new ol.style.Text({ offsetY: -10, font: '12px Calibri,sans-serif', text: feature.get('lote'), //Get attribute and insert with label fill: new ol.style.Fill({ color: '#ec971f' }) }) }); } };