I have a working script to show GeoJSON feature and style them by properties/attributes. But when I tried label the feature browser said 'feature is not defined'. Can anyone help with a working label script?
code:
var areal = new ol.layer.Vector({ source: new ol.source.GeoJSON({ defaultprojection: 'EPSG:4326', projection: 'EPSG:3857', url: 'data/tes.geojson' }), style: (function() { var style08 = [new ol.style.Style({ fill: new ol.style.Fill({color: '#ff0000'}), stroke: new ol.style.Stroke({color: 'black', width: 1}), text: new ol.style.Text({ font: '12px Verdana', text: feature.get('ARESTA'), fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({color: 'white', width: 0.5}) }) })]; var style12 = [new ol.style.Style({ fill: new ol.style.Fill({color: '#55ff00'}), stroke: new ol.style.Stroke({color: 'black', width: 1}), text: new ol.style.Text({ font: '12px Verdana', text: feature.get('ARESTA'), fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({color: 'white', width: 0.5}) }) })]; var style13 = [new ol.style.Style({ fill: new ol.style.Fill({color: '#0070ff'}), stroke: new ol.style.Stroke({color: 'black', width: 1}), text: new ol.style.Text({ font: '12px Verdana', text: feature.get('ARESTA'), fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({color: 'white', width: 0.5}) }) })]; return function(feature, resolution) { if (feature.get('ARESTA') == 'Areal Tahun Tanam 2008') { return style08; } else if (feature.get('ARESTA') == 'Areal Tahun Tanam 2012') { return style12; } else { return style13; } }; })(), }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), areal ], view: new ol.View({ center: ol.proj.transform([104.15, -5.06], 'EPSG:4326', 'EPSG:3857'), zoom: 13 }) }); geojson (not a complete code, just for example):
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "ESTATE": "COBA", "AFDELING": "01", "BLOK": "C016", "KODE_ORG": "SOGE01C016", "ARESTA": "Areal Tahun Tanam 2013", "TT": "2013 - 03", "BIBIT": "MARIHAT" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 104.160343, -5.059834 ], [ 104.160346, -5.059834 ], [ 104.160841, -5.059825 ], [ 104.160850, -5.059825 ], [ 104.160851, -5.059825 ], [ 104.161012, -5.059816 ], [ 104.161145, -5.059825 ], [ 104.161145, -5.059825 ], [ 104.161147, -5.059826 ], [ 104.161552, -5.059826 ], [ 104.161553, -5.059826 ], [ 104.161796, -5.059817 ], [ 104.162750, -5.059818 ], [ 104.163308, -5.059828 ], [ 104.163309, -5.059828 ], [ 104.163310, -5.059828 ], [ 104.163616, -5.059819 ], [ 104.163617, -5.059819 ], [ 104.163618, -5.059819 ], [ 104.163725, -5.059810 ], [ 104.164434, -5.059811 ], [ 104.164595, -5.059820 ], [ 104.164748, -5.059829 ], [ 104.164750, -5.059829 ], [ 104.164966, -5.059830 ], [ 104.164967, -5.059830 ], [ 104.165309, -5.059821 ], [ 104.165849, -5.059821 ], [ 104.165850, -5.059821 ], [ 104.166453, -5.059813 ], [ 104.166453, -5.059813 ], [ 104.166994, -5.059804 ], [ 104.167578, -5.059796 ], [ 104.167748, -5.059805 ], [ 104.167750, -5.059805 ], [ 104.167772, -5.059805 ], [ 104.167794, -5.059813 ], [ 104.167796, -5.059813 ], [ 104.167798, -5.059814 ], [ 104.167799, -5.059814 ], [ 104.167799, -5.059973 ], [ 104.167799, -5.059975 ], [ 104.167800, -5.059978 ], [ 104.167800, -5.059979 ], [ 104.167808, -5.060030 ], [ 104.167808, -5.060605 ], [ 104.167798, -5.060803 ], [ 104.167798, -5.060805 ], [ 104.167797, -5.061934 ], [ 104.167790, -5.062050 ], [ 104.167790, -5.062050 ] The part of error is:
text: feature.get('ARESTA'), Any help?
أكثر...
code:
var areal = new ol.layer.Vector({ source: new ol.source.GeoJSON({ defaultprojection: 'EPSG:4326', projection: 'EPSG:3857', url: 'data/tes.geojson' }), style: (function() { var style08 = [new ol.style.Style({ fill: new ol.style.Fill({color: '#ff0000'}), stroke: new ol.style.Stroke({color: 'black', width: 1}), text: new ol.style.Text({ font: '12px Verdana', text: feature.get('ARESTA'), fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({color: 'white', width: 0.5}) }) })]; var style12 = [new ol.style.Style({ fill: new ol.style.Fill({color: '#55ff00'}), stroke: new ol.style.Stroke({color: 'black', width: 1}), text: new ol.style.Text({ font: '12px Verdana', text: feature.get('ARESTA'), fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({color: 'white', width: 0.5}) }) })]; var style13 = [new ol.style.Style({ fill: new ol.style.Fill({color: '#0070ff'}), stroke: new ol.style.Stroke({color: 'black', width: 1}), text: new ol.style.Text({ font: '12px Verdana', text: feature.get('ARESTA'), fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({color: 'white', width: 0.5}) }) })]; return function(feature, resolution) { if (feature.get('ARESTA') == 'Areal Tahun Tanam 2008') { return style08; } else if (feature.get('ARESTA') == 'Areal Tahun Tanam 2012') { return style12; } else { return style13; } }; })(), }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), areal ], view: new ol.View({ center: ol.proj.transform([104.15, -5.06], 'EPSG:4326', 'EPSG:3857'), zoom: 13 }) }); geojson (not a complete code, just for example):
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "ESTATE": "COBA", "AFDELING": "01", "BLOK": "C016", "KODE_ORG": "SOGE01C016", "ARESTA": "Areal Tahun Tanam 2013", "TT": "2013 - 03", "BIBIT": "MARIHAT" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 104.160343, -5.059834 ], [ 104.160346, -5.059834 ], [ 104.160841, -5.059825 ], [ 104.160850, -5.059825 ], [ 104.160851, -5.059825 ], [ 104.161012, -5.059816 ], [ 104.161145, -5.059825 ], [ 104.161145, -5.059825 ], [ 104.161147, -5.059826 ], [ 104.161552, -5.059826 ], [ 104.161553, -5.059826 ], [ 104.161796, -5.059817 ], [ 104.162750, -5.059818 ], [ 104.163308, -5.059828 ], [ 104.163309, -5.059828 ], [ 104.163310, -5.059828 ], [ 104.163616, -5.059819 ], [ 104.163617, -5.059819 ], [ 104.163618, -5.059819 ], [ 104.163725, -5.059810 ], [ 104.164434, -5.059811 ], [ 104.164595, -5.059820 ], [ 104.164748, -5.059829 ], [ 104.164750, -5.059829 ], [ 104.164966, -5.059830 ], [ 104.164967, -5.059830 ], [ 104.165309, -5.059821 ], [ 104.165849, -5.059821 ], [ 104.165850, -5.059821 ], [ 104.166453, -5.059813 ], [ 104.166453, -5.059813 ], [ 104.166994, -5.059804 ], [ 104.167578, -5.059796 ], [ 104.167748, -5.059805 ], [ 104.167750, -5.059805 ], [ 104.167772, -5.059805 ], [ 104.167794, -5.059813 ], [ 104.167796, -5.059813 ], [ 104.167798, -5.059814 ], [ 104.167799, -5.059814 ], [ 104.167799, -5.059973 ], [ 104.167799, -5.059975 ], [ 104.167800, -5.059978 ], [ 104.167800, -5.059979 ], [ 104.167808, -5.060030 ], [ 104.167808, -5.060605 ], [ 104.167798, -5.060803 ], [ 104.167798, -5.060805 ], [ 104.167797, -5.061934 ], [ 104.167790, -5.062050 ], [ 104.167790, -5.062050 ] The part of error is:
text: feature.get('ARESTA'), Any help?
أكثر...