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?
Answer
I end up using vector-labels example instead, with a slight modification it finally worked. Using olivier approach I can't get the style the way I want it.
var getText = function(feature) {
var text = feature.get('BLOK');
return text;
};
var createTextStyle = function(feature) {
return new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
font: '12px Verdana',
text: getText(feature),
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'white', width: 0.5})
});
};
// Polygons
var createPolygonStyleFunction = function() {
return function(feature) {
var style08 = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({
color: '#ff0000'
}),
text: createTextStyle(feature)
});
var style12 = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({
color: '#55ff00'
}),
text: createTextStyle(feature)
});
var style13 = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({
color: '#0070ff'
}),
text: createTextStyle(feature)
});
if (feature.get('STATUS') == 'PLANTED') {
return [style08];
} else if (feature.get('STATUS') == 'NOT PLANTED') {
return [style12];
} else {
return [style13];
}
};
};
var soge = new ol.layer.Vector({
source: new ol.source.GeoJSON({
defaultprojection: 'EPSG:4326',
projection: 'EPSG:3857',
url: 'data/soge.geojson'
}),
style: createPolygonStyleFunction()
});
No comments:
Post a Comment