1

I have a geojson and I want every property to put a label in its middle with a number ..

Here's the function I'm putting on the geojson map:

function search(){
    var layer = $('#layer').val();
    console.log(layer);

    proj4.defs('EPSG:31700','+proj=sterea +lat_0=46 +lon_0=25 +k=0.99975 +x_0=500000 +y_0=500000 +ellps=krass +towgs84=28,-121,-77,0,0,0,0 +units=m +no_defs');                      
    ol.proj.proj4.register(proj4);

    $.ajax({
        type: "GET",
        url: "act_geojson.php?layer="+layer,
        dataType: 'json',
        success: function (response) {
            var features = new ol.format.GeoJSON().readFeatures(response);
            var extent = ol.extent.createEmpty();
            features.forEach(function(feature){
                feature.setId(undefined);
                feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
                ol.extent.extend(extent, feature.getGeometry().getExtent());
            });
            vectorSource.clear();
            vectorSource.addFeatures(features);
            map.getView().fit(extent);
        }
    });
}  

And here is geojson:

{ "Type": "FeatureCollection", "features": [{ "type": "Feature", "id" 0 "geometry": { "type": "Polygon", "coordinates" [[[669,023.843 , 415221.025] [669031.588,415222.415] [669059.365,415154.448] [669064.041,415143.41] [669049.477,415135.059] [668987.876,415095.463] [668934.69,415061.12] [668904.2,415041.659] [668903.285,415044.048 ] [668934.224,415064.815] [668987.091,415097.897] [669048.669,415137.58] [669057.03,415142.935] [669054.159,415149.762] [669049.569,415160.172] [669045.995,415169.095] [669034.656,415197.283] [669031.864,415205.9] [669023.843,415221.025]]]} "CRS": { "type": "EPSG", "properties": { "code": "31700"}} "geometry_name" "wkb_geometry" "properties": { "ogc_fid" 0 "id_teren" "2" "id_cons", "0", "layer", "Green Area", "wkb_geometry" "010300000001000000130000002DB29DAFBF6A24419A999919D457194103560E2DCF6A24418FC2F5A8D9571941AE47E1BA066B24411283C0CAC9561941B6F3FD14106B24413D0AD7A39D561941105839F4F26A2441FA7E6A3C7C5619416F1283C0776A244108AC1CDADD55194114AE47610D6A2441AE47E17A5455194166666666D069244 160E5D0A2065519412085EB91CE69244177E9263110551941C520B0720C6A2441295C8F4263551941508D972E766A2441002B8796E7551941022B8756F16A24411F85EB5186561941F6285C0F026B2441D5A370BD9B561941B1726851FC6A24415CBA490CB7561941CFF75323F36A24419CC420B0E0561941D8A370FDEB6A244114AE476104571941643BDF4FD56A244183C0CA21755719413F355EBACF6A24419A999999975719412DB29DAFBF6A24419A999919D4571941 "}}, {" type ":" Feature "," id "0" geometry ": {" type ":" Polygon "," coordinates "[[[668906.809,415037.18] [668937.555,415056.882] [668994.661,415093.986] [669051.706,415130.5] [669059.946,415135.898] [669060.159,415135.449] [669051.997,415129.296] [668997.335,415093.406] [668938.441,415054.482] [668908.139,415035.654], [ 668906.809,415037.18]]]} "CRS": { "type": "EPSG", "properties": { "code": "31700"}} "geometry_name" "wkb_geometry", "properties": { " ogc_fid ": 0," id_teren ":" 4 "," id_cons ":" 0 "," layer ":" Green Area "," wkb_geometry ":" 0103000000010000000B0000007F3F359ED569244185EB51B8F4541941C3F5281C136A24410E022B87435519418C976E52856A2441E7FBA9F1D7551 94101D57869F76A2441000000006A5619415AC050E4076B2441800639977F561941AF726851086B2441F0A7C6CB7D561941B4C876FEF76A2441BE9F1A2F65561941B71E85AB8A6A2441C976BE9FD555194182C0CAE1146A2441736891ED395519410C022B47D86924410E2DB29DEE5419417F3F359ED569244185EB51B8F4541941 "}}, {" type ":" Feature "," id "0" geometry ": {" type ":" Polygon "," coordinates "[[[669023.722,415221.059] [669031.864,415205.9] [669034.656,415197.283] [669045.995,415169.095] [669049.569,415160.172] [669025.298,415144.634] [669019.118,415153.567] [669000.213,415207.177] [669023.722,415221.059]]]} "CRS" { "type": "EPSG", "properties": { "code": "31700"}} "geometry_name" "wkb_geometry", "properties": { "ogc_fid" 0 "id_teren" "1" "id_cons": "0", "layer", "Green Area", "wkb_geometry" "01030000000100000009000000E7FBA971BF6A2441FA7E6A3CD45719413F355EBACF6A24419A99999997571941643BDF4FD56A244183C0CA2175571941D8A370FDEB6A244114AE476104571941CFF75323F36A24419CC420B0E0561941BC749398C26A2441C34B3789A2561941FC7E6A3CB66A2441E3A59B44C656194104560E6D906A2441EE7C3FB59 C571941E7FBA971BF6A2441FA7E6A3CD4571941 "}}]}

When id_cons is 0 to display id_teren and if id_teren is 0 then id_cons ..

1

In your case you could add text style change in features.forEach loop (I used part of Mike's code):

features.forEach(function(feature){
    feature.setId(undefined);
    feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
    ol.extent.extend(extent, feature.getGeometry().getExtent());
    var myStyle = new ol.style.Style({
      fill: ... // replace ... with fill definition
      stroke: ... // replace ... with stroke definition
      text: new ol.style.Text({
        font: '11px "Open Sans", "Arial Unicode MS", "sans-serif"',
        placement: 'line',
        fill: new ol.style.Fill({
          color: 'black'
        })
      })
    });
    var cons = feature.get('id_cons');
    var teren = feature.get('id_teren');
    myStyle.getText().setText(cons == '0' ? teren : cons);
    feature.setStyle(myStyle);
});
2

You could use a style function based on to this example https://openlayers.org/en/v4.6.5/examples/vector-layer.html

  var style = new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.6)'
    }),
    stroke: new ol.style.Stroke({
      color: '#319FD3',
      width: 1
    }),
    text: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      fill: new ol.style.Fill({
        color: '#000'
      }),
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
      })
    })
  });

  var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: features
            }),
            style: function(feature) {
                var cons = feature.get('id_cons');
                var teren = feature.get('id_teren');
                style.getText().setText(cons == '0' ? teren : cons);
                return style;
            }
        })
    ],
    target: 'map',
    view: new ol.View()
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.