a50f6d7a2f
This change adds setters for symbolizer properties. In addition, it introduces a mutable flag on all styles. By default, this is set to true. ol.style.createStyleFunction sets it to false for all static styles. The new setters assert that the mutable flag is true, so whenever an application tries to set a symbolizer property on a style that was assigned to a vector layer or feature overlay, the assertion will fail.
125 lines
2.8 KiB
JavaScript
125 lines
2.8 KiB
JavaScript
goog.require('ol.FeatureOverlay');
|
|
goog.require('ol.Map');
|
|
goog.require('ol.View');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.layer.Vector');
|
|
goog.require('ol.source.GeoJSON');
|
|
goog.require('ol.source.MapQuest');
|
|
goog.require('ol.style.Fill');
|
|
goog.require('ol.style.Stroke');
|
|
goog.require('ol.style.Style');
|
|
goog.require('ol.style.Text');
|
|
|
|
|
|
var style = new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255, 255, 255, 0.6)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: '#319FD3',
|
|
width: 1
|
|
}),
|
|
text: new ol.style.Text({
|
|
font: '12px Calibri,sans-serif',
|
|
fill: new ol.style.Fill({
|
|
color: '#000'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: '#fff',
|
|
width: 3
|
|
})
|
|
})
|
|
});
|
|
var styles = [style];
|
|
var vectorLayer = new ol.layer.Vector({
|
|
source: new ol.source.GeoJSON({
|
|
projection: 'EPSG:3857',
|
|
url: 'data/geojson/countries.geojson'
|
|
}),
|
|
style: function(feature, resolution) {
|
|
style.getText().setText(resolution < 5000 ? feature.get('name') : '');
|
|
return styles;
|
|
}
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.MapQuest({layer: 'sat'})
|
|
}),
|
|
vectorLayer
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [0, 0],
|
|
zoom: 1
|
|
})
|
|
});
|
|
|
|
var highlightStyleCache = {};
|
|
|
|
var featureOverlay = new ol.FeatureOverlay({
|
|
map: map,
|
|
style: function(feature, resolution) {
|
|
var text = resolution < 5000 ? feature.get('name') : '';
|
|
if (!highlightStyleCache[text]) {
|
|
highlightStyleCache[text] = [new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: '#f00',
|
|
width: 1
|
|
}),
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255,0,0,0.1)'
|
|
}),
|
|
text: new ol.style.Text({
|
|
font: '12px Calibri,sans-serif',
|
|
text: text,
|
|
fill: new ol.style.Fill({
|
|
color: '#000'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: '#f00',
|
|
width: 3
|
|
})
|
|
})
|
|
})];
|
|
}
|
|
return highlightStyleCache[text];
|
|
}
|
|
});
|
|
|
|
var highlight;
|
|
var displayFeatureInfo = function(pixel) {
|
|
|
|
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
|
return feature;
|
|
});
|
|
|
|
var info = document.getElementById('info');
|
|
if (feature) {
|
|
info.innerHTML = feature.getId() + ': ' + feature.get('name');
|
|
} else {
|
|
info.innerHTML = ' ';
|
|
}
|
|
|
|
if (feature !== highlight) {
|
|
if (highlight) {
|
|
featureOverlay.removeFeature(highlight);
|
|
}
|
|
if (feature) {
|
|
featureOverlay.addFeature(feature);
|
|
}
|
|
highlight = feature;
|
|
}
|
|
|
|
};
|
|
|
|
$(map.getViewport()).on('mousemove', function(evt) {
|
|
var pixel = map.getEventPixel(evt.originalEvent);
|
|
displayFeatureInfo(pixel);
|
|
});
|
|
|
|
map.on('click', function(evt) {
|
|
displayFeatureInfo(evt.pixel);
|
|
});
|