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?
Aucun commentaire:
Enregistrer un commentaire