d2cd0808a8
The projection option for vector file sources currently has no good meaning. The reprojectTo option is used to set the projection for cached features. This change makes it so the projection option is used for this purpose. The getProjection method (not currently exported) can then be used to get the cached feature projection. This also removes the default of 'EPSG:3857' for vector file sources. If a projection is not configured, features will not be transformed.
96 lines
2.2 KiB
JavaScript
96 lines
2.2 KiB
JavaScript
goog.require('ol.Map');
|
|
goog.require('ol.RendererHint');
|
|
goog.require('ol.View2D');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.layer.Vector');
|
|
goog.require('ol.source.KML');
|
|
goog.require('ol.source.Stamen');
|
|
goog.require('ol.style.Circle');
|
|
goog.require('ol.style.Fill');
|
|
goog.require('ol.style.Stroke');
|
|
goog.require('ol.style.Style');
|
|
|
|
|
|
var styleCache = {};
|
|
var styleFunction = function(feature, resolution) {
|
|
// 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
|
|
// standards-violating <magnitude> tag in each Placemark. We extract it from
|
|
// the Placemark's name instead.
|
|
var name = feature.get('name');
|
|
var magnitude = parseFloat(name.substr(2));
|
|
var radius = 5 + 20 * (magnitude - 5);
|
|
var style = styleCache[radius];
|
|
if (!style) {
|
|
style = [new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: radius,
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255, 153, 0, 0.4)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgba(255, 204, 0, 0.2)',
|
|
width: 1
|
|
})
|
|
})
|
|
})];
|
|
styleCache[radius] = style;
|
|
}
|
|
return style;
|
|
};
|
|
|
|
var vector = new ol.layer.Vector({
|
|
source: new ol.source.KML({
|
|
projection: 'EPSG:3857',
|
|
url: 'data/kml/2012_Earthquakes_Mag5.kml'
|
|
}),
|
|
styleFunction: styleFunction
|
|
});
|
|
|
|
var raster = new ol.layer.Tile({
|
|
source: new ol.source.Stamen({
|
|
layer: 'toner'
|
|
})
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [raster, vector],
|
|
renderer: ol.RendererHint.CANVAS,
|
|
target: 'map',
|
|
view: new ol.View2D({
|
|
center: [0, 0],
|
|
zoom: 2
|
|
})
|
|
});
|
|
|
|
var info = $('#info');
|
|
info.tooltip({
|
|
animation: false,
|
|
trigger: 'manual'
|
|
});
|
|
|
|
var displayFeatureInfo = function(pixel) {
|
|
info.css({
|
|
left: pixel[0] + 'px',
|
|
top: (pixel[1] - 15) + 'px'
|
|
});
|
|
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
|
return feature;
|
|
});
|
|
if (feature) {
|
|
info.tooltip('hide')
|
|
.attr('data-original-title', feature.get('name'))
|
|
.tooltip('fixTitle')
|
|
.tooltip('show');
|
|
} else {
|
|
info.tooltip('hide');
|
|
}
|
|
};
|
|
|
|
$(map.getViewport()).on('mousemove', function(evt) {
|
|
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
|
|
});
|
|
|
|
map.on('singleclick', function(evt) {
|
|
displayFeatureInfo(evt.pixel);
|
|
});
|