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.
94 lines
2.3 KiB
JavaScript
94 lines
2.3 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.BingMaps');
|
|
goog.require('ol.source.GPX');
|
|
goog.require('ol.style.Circle');
|
|
goog.require('ol.style.Fill');
|
|
goog.require('ol.style.Stroke');
|
|
goog.require('ol.style.Style');
|
|
|
|
var raster = new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({
|
|
imagerySet: 'Aerial',
|
|
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
|
})
|
|
});
|
|
|
|
var style = {
|
|
'Point': [new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255,255,0,0.4)'
|
|
}),
|
|
radius: 5,
|
|
stroke: new ol.style.Stroke({
|
|
color: '#ff0',
|
|
width: 1
|
|
})
|
|
})
|
|
})],
|
|
'LineString': [new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: '#f00',
|
|
width: 3
|
|
})
|
|
})],
|
|
'MultiLineString': [new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: '#0f0',
|
|
width: 3
|
|
})
|
|
})]
|
|
};
|
|
|
|
var vector = new ol.layer.Vector({
|
|
source: new ol.source.GPX({
|
|
projection: 'EPSG:3857',
|
|
url: 'data/gpx/fells_loop.gpx'
|
|
}),
|
|
styleFunction: function(feature, resolution) {
|
|
return style[feature.getGeometry().getType()];
|
|
}
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [raster, vector],
|
|
renderer: ol.RendererHint.CANVAS,
|
|
target: document.getElementById('map'),
|
|
view: new ol.View2D({
|
|
center: [-7916041.528716288, 5228379.045749711],
|
|
zoom: 12
|
|
})
|
|
});
|
|
|
|
var displayFeatureInfo = function(pixel) {
|
|
var features = [];
|
|
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
|
features.push(feature);
|
|
});
|
|
if (features.length > 0) {
|
|
var info = [];
|
|
var i, ii;
|
|
for (i = 0, ii = features.length; i < ii; ++i) {
|
|
info.push(features[i].get('desc'));
|
|
}
|
|
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
|
map.getTarget().style.cursor = 'pointer';
|
|
} else {
|
|
document.getElementById('info').innerHTML = ' ';
|
|
map.getTarget().style.cursor = '';
|
|
}
|
|
};
|
|
|
|
$(map.getViewport()).on('mousemove', function(evt) {
|
|
var pixel = map.getEventPixel(evt.originalEvent);
|
|
displayFeatureInfo(pixel);
|
|
});
|
|
|
|
map.on('singleclick', function(evt) {
|
|
displayFeatureInfo(evt.pixel);
|
|
});
|