ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Get rid of extra style arrays in examples

Browse Source
This commit is contained in:
Tim Schaub
2015-11-11 18:18:41 -07:00
parent e8c99e4e63
commit 99a902a311
19 changed files with 212 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/cluster.js
View File

@@ -38,7 +38,7 @@ var clusters = new ol.layer.Vector({
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = [new ol.style.Style({
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
@@ -54,7 +54,7 @@ var clusters = new ol.layer.Vector({
color: '#fff'
})
})
})];
});
styleCache[size] = style;
}
return style;

24
examples/drag-and-drop-image-vector.js
View File

@@ -19,7 +19,7 @@ goog.require('ol.style.Style');
var defaultStyle = {
'Point': [new ol.style.Style({
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.5)'
@@ -30,14 +30,14 @@ var defaultStyle = {
width: 1
})
})
})],
'LineString': [new ol.style.Style({
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})],
'Polygon': [new ol.style.Style({
}),
'Polygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,255,255,0.5)'
}),
@@ -45,8 +45,8 @@ var defaultStyle = {
color: '#0ff',
width: 1
})
})],
'MultiPoint': [new ol.style.Style({
}),
'MultiPoint': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,0,255,0.5)'
@@ -57,14 +57,14 @@ var defaultStyle = {
width: 1
})
})
})],
'MultiLineString': [new ol.style.Style({
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0f0',
width: 3
})
})],
'MultiPolygon': [new ol.style.Style({
}),
'MultiPolygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,0,255,0.5)'
}),
@@ -72,7 +72,7 @@ var defaultStyle = {
color: '#00f',
width: 1
})
})]
})
};
var styleFunction = function(feature, resolution) {

24
examples/drag-and-drop.js
View File

@@ -18,7 +18,7 @@ goog.require('ol.style.Style');
var defaultStyle = {
'Point': [new ol.style.Style({
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.5)'
@@ -29,14 +29,14 @@ var defaultStyle = {
width: 1
})
})
})],
'LineString': [new ol.style.Style({
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})],
'Polygon': [new ol.style.Style({
}),
'Polygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,255,255,0.5)'
}),
@@ -44,8 +44,8 @@ var defaultStyle = {
color: '#0ff',
width: 1
})
})],
'MultiPoint': [new ol.style.Style({
}),
'MultiPoint': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,0,255,0.5)'
@@ -56,14 +56,14 @@ var defaultStyle = {
width: 1
})
})
})],
'MultiLineString': [new ol.style.Style({
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0f0',
width: 3
})
})],
'MultiPolygon': [new ol.style.Style({
}),
'MultiPolygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,0,255,0.5)'
}),
@@ -71,7 +71,7 @@ var defaultStyle = {
color: '#00f',
width: 1
})
})]
})
};
var styleFunction = function(feature, resolution) {

6
examples/earthquake-clusters.js
View File

@@ -84,7 +84,7 @@ function styleFunction(feature, resolution) {
var style;
var size = feature.get('features').length;
if (size > 1) {
style = [new ol.style.Style({
style = new ol.style.Style({
image: new ol.style.Circle({
radius: feature.get('radius'),
fill: new ol.style.Fill({
@@ -96,10 +96,10 @@ function styleFunction(feature, resolution) {
fill: textFill,
stroke: textStroke
})
})];
});
} else {
var originalFeature = feature.get('features')[0];
style = [createEarthquakeStyle(originalFeature)];
style = createEarthquakeStyle(originalFeature);
}
return style;
}

4
examples/feature-move-animation.js
View File

@@ -115,9 +115,9 @@ var vectorLayer = new ol.layer.Vector({
style: function(feature, resolution) {
// hide geoMarker if animation is active
if (animating && feature.get('type') === 'geoMarker') {
return [];
return null;
}
return [styles[feature.get('type')]];
return styles[feature.get('type')];
}
});

32
examples/geojson.js
View File

@@ -21,25 +21,25 @@ var image = new ol.style.Circle({
});
var styles = {
'Point': [new ol.style.Style({
'Point': new ol.style.Style({
image: image
})],
'LineString': [new ol.style.Style({
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
})],
'MultiLineString': [new ol.style.Style({
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
})],
'MultiPoint': [new ol.style.Style({
}),
'MultiPoint': new ol.style.Style({
image: image
})],
'MultiPolygon': [new ol.style.Style({
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
@@ -47,8 +47,8 @@ var styles = {
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})],
'Polygon': [new ol.style.Style({
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
@@ -57,8 +57,8 @@ var styles = {
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})],
'GeometryCollection': [new ol.style.Style({
}),
'GeometryCollection': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
@@ -73,8 +73,8 @@ var styles = {
color: 'magenta'
})
})
})],
'Circle': [new ol.style.Style({
}),
'Circle': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
@@ -82,7 +82,7 @@ var styles = {
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})]
})
};
var styleFunction = function(feature, resolution) {

12
examples/gpx.js
View File

@@ -21,7 +21,7 @@ var raster = new ol.layer.Tile({
});
var style = {
'Point': [new ol.style.Style({
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.4)'
@@ -32,19 +32,19 @@ var style = {
width: 1
})
})
})],
'LineString': [new ol.style.Style({
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})],
'MultiLineString': [new ol.style.Style({
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0f0',
width: 3
})
})]
})
};
var vector = new ol.layer.Vector({

12
examples/igc.js
View File

@@ -27,17 +27,17 @@ var colors = {
var styleCache = {};
var styleFunction = function(feature, resolution) {
var color = colors[feature.get('PLT')];
var styleArray = styleCache[color];
if (!styleArray) {
styleArray = [new ol.style.Style({
var style = styleCache[color];
if (!style) {
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: 3
})
})];
styleCache[color] = styleArray;
});
styleCache[color] = style;
}
return styleArray;
return style;
};
var vectorSource = new ol.source.Vector();

4
examples/kml-earthquakes.js
View File

@@ -21,7 +21,7 @@ var styleFunction = function(feature, resolution) {
var radius = 5 + 20 * (magnitude - 5);
var style = styleCache[radius];
if (!style) {
style = [new ol.style.Style({
style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
@@ -32,7 +32,7 @@ var styleFunction = function(feature, resolution) {
width: 1
})
})
})];
});
styleCache[radius] = style;
}
return style;

4
examples/kml-timezones.js
View File

@@ -35,14 +35,14 @@ var styleFunction = function(feature, resolution) {
delta = 24 - delta;
}
var opacity = 0.75 * (1 - delta / 12);
return [new ol.style.Style({
return new ol.style.Style({
fill: new ol.style.Fill({
color: [0xff, 0xff, 0x33, opacity]
}),
stroke: new ol.style.Stroke({
color: '#ffffff'
})
})];
});
};
var vector = new ol.layer.Vector({

16
examples/layer-z-index.js
View File

@@ -13,7 +13,7 @@ goog.require('ol.style.Style');
var stroke = new ol.style.Stroke({color: 'black', width: 1});
var styles = {
'square': [new ol.style.Style({
'square': new ol.style.Style({
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: 'blue'}),
stroke: stroke,
@@ -21,8 +21,8 @@ var styles = {
radius: 80,
angle: Math.PI / 4
})
})],
'triangle': [new ol.style.Style({
}),
'triangle': new ol.style.Style({
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: 'red'}),
stroke: stroke,
@@ -31,8 +31,8 @@ var styles = {
rotation: Math.PI / 4,
angle: 0
})
})],
'star': [new ol.style.Style({
}),
'star': new ol.style.Style({
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: 'green'}),
stroke: stroke,
@@ -41,13 +41,13 @@ var styles = {
radius2: 4,
angle: 0
})
})]
})
};
function createLayer(coordinates, styles, zIndex) {
function createLayer(coordinates, style, zIndex) {
var feature = new ol.Feature(new ol.geom.Point(coordinates));
feature.setStyle(styles);
feature.setStyle(style);
var source = new ol.source.Vector({
features: [feature]

18
examples/modify-test.js
View File

@@ -19,8 +19,8 @@ var styleFunction = (function() {
fill: null,
stroke: new ol.style.Stroke({color: 'orange', width: 2})
});
styles['Point'] = [new ol.style.Style({image: image})];
styles['Polygon'] = [new ol.style.Style({
styles['Point'] = new ol.style.Style({image: image});
styles['Polygon'] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
@@ -28,14 +28,14 @@ var styleFunction = (function() {
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})];
styles['MultiLinestring'] = [new ol.style.Style({
});
styles['MultiLinestring'] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
})];
styles['MultiPolygon'] = [new ol.style.Style({
});
styles['MultiPolygon'] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
@@ -43,8 +43,8 @@ var styleFunction = (function() {
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})];
styles['default'] = [new ol.style.Style({
});
styles['default'] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
@@ -53,7 +53,7 @@ var styleFunction = (function() {
color: 'rgba(255, 0, 0, 0.1)'
}),
image: image
})];
});
return function(feature, resolution) {
return styles[feature.getGeometry().getType()] || styles['default'];
};

20
examples/regularshape.js
View File

@@ -14,7 +14,7 @@ var stroke = new ol.style.Stroke({color: 'black', width: 2});
var fill = new ol.style.Fill({color: 'red'});
var styles = {
'square': [new ol.style.Style({
'square': new ol.style.Style({
image: new ol.style.RegularShape({
fill: fill,
stroke: stroke,
@@ -22,8 +22,8 @@ var styles = {
radius: 10,
angle: Math.PI / 4
})
})],
'triangle': [new ol.style.Style({
}),
'triangle': new ol.style.Style({
image: new ol.style.RegularShape({
fill: fill,
stroke: stroke,
@@ -32,8 +32,8 @@ var styles = {
rotation: Math.PI / 4,
angle: 0
})
})],
'star': [new ol.style.Style({
}),
'star': new ol.style.Style({
image: new ol.style.RegularShape({
fill: fill,
stroke: stroke,
@@ -42,8 +42,8 @@ var styles = {
radius2: 4,
angle: 0
})
})],
'cross': [new ol.style.Style({
}),
'cross': new ol.style.Style({
image: new ol.style.RegularShape({
fill: fill,
stroke: stroke,
@@ -52,8 +52,8 @@ var styles = {
radius2: 0,
angle: 0
})
})],
'x': [new ol.style.Style({
}),
'x': new ol.style.Style({
image: new ol.style.RegularShape({
fill: fill,
stroke: stroke,
@@ -62,7 +62,7 @@ var styles = {
radius2: 0,
angle: Math.PI / 4
})
})]
})
};

8
examples/synthetic-points.js
View File

@@ -24,20 +24,20 @@ for (var i = 0; i < count; ++i) {
}
var styles = {
'10': [new ol.style.Style({
'10': new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({color: '#666666'}),
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
})],
'20': [new ol.style.Style({
}),
'20': new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({color: '#666666'}),
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
})]
})
};
var vectorSource = new ol.source.Vector({

6
examples/topojson.js
View File

@@ -16,7 +16,7 @@ var raster = new ol.layer.Tile({
})
});
var styleArray = [new ol.style.Style({
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
@@ -24,7 +24,7 @@ var styleArray = [new ol.style.Style({
color: '#319FD3',
width: 1
})
})];
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
@@ -33,7 +33,7 @@ var vector = new ol.layer.Vector({
}),
style: function(feature, resolution) {
// don't want to render the full world polygon, which repeats all countries
return feature.getId() !== undefined ? styleArray : null;
return feature.getId() !== undefined ? style : null;
}
});

22
examples/vector-esri.js
View File

@@ -20,8 +20,7 @@ var layer = '0';
var esrijsonFormat = new ol.format.EsriJSON();
var styleCache = {
'ABANDONED': [
new ol.style.Style({
'ABANDONED': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(225, 225, 225, 255)'
}),
@@ -29,10 +28,8 @@ var styleCache = {
color: 'rgba(0, 0, 0, 255)',
width: 0.4
})
})
],
'GAS': [
new ol.style.Style({
}),
'GAS': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 255)'
}),
@@ -40,10 +37,8 @@ var styleCache = {
color: 'rgba(110, 110, 110, 255)',
width: 0.4
})
})
],
'OIL': [
new ol.style.Style({
}),
'OIL': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(56, 168, 0, 255)'
}),
@@ -51,10 +46,8 @@ var styleCache = {
color: 'rgba(110, 110, 110, 255)',
width: 0
})
})
],
'OILGAS': [
new ol.style.Style({
}),
'OILGAS': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(168, 112, 0, 255)'
}),
@@ -63,7 +56,6 @@ var styleCache = {
width: 0.4
})
})
]
};
var vectorSource = new ol.source.Vector({

39
examples/vector-labels.js
View File

@@ -107,9 +107,8 @@ var createTextStyle = function(feature, resolution, dom) {
// Polygons
var createPolygonStyleFunction = function() {
return function(feature, resolution) {
var style = new ol.style.Style({
function polygonStyleFunction(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
@@ -119,46 +118,40 @@ var createPolygonStyleFunction = function() {
}),
text: createTextStyle(feature, resolution, myDom.polygons)
});
return [style];
};
};
}
var vectorPolygons = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/geojson/polygon-samples.geojson',
format: new ol.format.GeoJSON()
}),
style: createPolygonStyleFunction()
style: polygonStyleFunction
});
// Lines
var createLineStyleFunction = function() {
return function(feature, resolution) {
var style = new ol.style.Style({
function lineStyleFunction(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 2
}),
text: createTextStyle(feature, resolution, myDom.lines)
});
return [style];
};
};
}
var vectorLines = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/geojson/line-samples.geojson',
format: new ol.format.GeoJSON()
}),
style: createLineStyleFunction()
style: lineStyleFunction
});
// Points
var createPointStyleFunction = function() {
return function(feature, resolution) {
var style = new ol.style.Style({
function pointStyleFunction(feature, resolution) {
return new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
@@ -166,16 +159,14 @@ var createPointStyleFunction = function() {
}),
text: createTextStyle(feature, resolution, myDom.points)
});
return [style];
};
};
}
var vectorPoints = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/geojson/point-samples.geojson',
format: new ol.format.GeoJSON()
}),
style: createPointStyleFunction()
style: pointStyleFunction
});
var map = new ol.Map({
@@ -195,15 +186,15 @@ var map = new ol.Map({
});
$('#refresh-points').click(function() {
vectorPoints.setStyle(createPointStyleFunction());
vectorPoints.setStyle(pointStyleFunction);
});
$('#refresh-lines').click(function() {
vectorLines.setStyle(createLineStyleFunction());
vectorLines.setStyle(lineStyleFunction);
});
$('#refresh-polygons').click(function() {
vectorPolygons.setStyle(createPolygonStyleFunction());
vectorPolygons.setStyle(polygonStyleFunction);
});

7
examples/vector-layer.js
View File

@@ -30,7 +30,6 @@ var style = new ol.style.Style({
})
})
});
var styles = [style];
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
@@ -39,7 +38,7 @@ var vectorLayer = new ol.layer.Vector({
}),
style: function(feature, resolution) {
style.getText().setText(resolution < 5000 ? feature.get('name') : '');
return styles;
return style;
}
});
@@ -65,7 +64,7 @@ var featureOverlay = new ol.layer.Vector({
style: function(feature, resolution) {
var text = resolution < 5000 ? feature.get('name') : '';
if (!highlightStyleCache[text]) {
highlightStyleCache[text] = [new ol.style.Style({
highlightStyleCache[text] = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 1
@@ -84,7 +83,7 @@ var featureOverlay = new ol.layer.Vector({
width: 3
})
})
})];
});
}
return highlightStyleCache[text];
}

26
examples/vector-osm.js
View File

@@ -15,8 +15,7 @@ goog.require('ol.style.Style');
var styles = {
'amenity': {
'parking': [
new ol.style.Style({
'parking': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(170, 170, 170, 1.0)',
width: 1
@@ -25,11 +24,9 @@ var styles = {
color: 'rgba(170, 170, 170, 0.3)'
})
})
]
},
'building': {
'.*': [
new ol.style.Style({
'.*': new ol.style.Style({
zIndex: 100,
stroke: new ol.style.Stroke({
color: 'rgba(246, 99, 79, 1.0)',
@@ -39,29 +36,23 @@ var styles = {
color: 'rgba(246, 99, 79, 0.3)'
})
})
]
},
'highway': {
'service': [
new ol.style.Style({
'service': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 1.0)',
width: 2
})
})
],
'.*': [
new ol.style.Style({
}),
'.*': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 1.0)',
width: 3
})
})
]
},
'landuse': {
'forest|grass|allotments': [
new ol.style.Style({
'forest|grass|allotments': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(140, 208, 95, 1.0)',
width: 1
@@ -70,11 +61,9 @@ var styles = {
color: 'rgba(140, 208, 95, 0.3)'
})
})
]
},
'natural': {
'tree': [
new ol.style.Style({
'tree': new ol.style.Style({
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({
@@ -83,7 +72,6 @@ var styles = {
stroke: null
})
})
]
}
};