OpenLayers – Custom Style for Individual Features

Other than the subject, what’s included here, as following:

  1. Add Google Map as base map
  2. How to create vector layer
  3. How to add features to vector layer
  4. How to use WKT and display it on Map
  5. How to create dynamic label, radius & fill in OpenLayers Style
  6. How to display label based on zoom level
// Create Map
 var map = new OpenLayers.Map('map');

// Add Google Map as base layer
 var base_layers = [
 new OpenLayers.Layer.Google("Google Physical",
 {
 type : google.maps.MapTypeId.TERRAIN
 }
 ),
 new OpenLayers.Layer.Google("Google Streets", // the default
 {
 numZoomLevels : 20
 }
 ),
 new OpenLayers.Layer.Google("Google Hybrid",
 {
 type : google.maps.MapTypeId.HYBRID,
 numZoomLevels : 20
 }
 ),
 new OpenLayers.Layer.Google("Google Satellite",
 {
 type : google.maps.MapTypeId.SATELLITE,
 numZoomLevels : 22
 }
 )];

// Add Base map to Map
 map.addLayers(base_layers);

// Create a vector layer & add to the Map
 var v = new OpenLayers.Layer.Vector('Vector Layer');
 map.addLayer(v);

// Create a WKT, Read WKT and assign it's attributes / data
 var wkt = new OpenLayers.Format.WKT();
 var feature = wkt.read('POINT(101.073433 4.665741)');

feature.attributes.label = 'this is label';
 feature.attributes.radius = 10;
 feature.attributes.fill = '#ff0000';

// Create a custom style for above WKT
 // fillColor will fetch it's value from feature.attributes.fill using context.getFill
 // label will fetch it's value from feature.attributes.label using context.getLabel
 // pointRadius will fetch it's value from feature.attributes.radius using context.getRadius

var style = new OpenLayers.Style(
 {
 strokeColor : "#FFFFFF",
 strokeOpacity : 1,
 strokeWidth : 1,
 fillColor : "${getFill}",
 fillOpacity : 0.75,
 pointRadius : "${getRadius}",
 pointerEvents : "visiblePainted",
 label : "${getLabel}"
 },
 {
 context :
 {
 getLabel : function (f)
 {
 // display label if the zoom level more than 12
 if(f.layer.map.getZoom() > 12) {
 return feature.attributes.label;
 }

return '';
 },
 getRadius : function (f)
 {
 return parseInt(f.attributes.radius);
 },
 getFill : function (f)
 {
 return f.attributes.fill;
 }
 }
 }
 );

// set style name for this feature's style
 var styleName = 'custom_style';

// set styleName to feature.renderIntent
 feature.renderIntent = styleName;

// add style to Vector layer style map
 v.styleMap.styles[styleName] = style;

// add feature to Vector layer
 v.addFeatures([feature]);

// redraw the Vector layer
 v.redraw();

// set center & zoom level
 map.setCenter(new OpenLayers.LonLat(101.073433,4.665741).transform('EPSG:4326', 'EPSG:900913'), 7);

Gracias por comentar!