14b7edb140
Please write blog posts, create tutorials, or develop workshops that show off cool ways to develop applications that use OL3. The examples should be kept very simple. This download functionality is neat, but it's really a gratuitous use of non-map related functionality. While it does demonstrate the use of `format.writeFeatures()`, this is buried in too much additional code that is not accessible (buried in resources/common.js) and not really related to mapping things. If we want to have examples that demonstrate how formats can be used to serialize features, a simple textarea would suffice as the target.
66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
goog.require('ol.Map');
|
|
goog.require('ol.View');
|
|
goog.require('ol.format.KML');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.layer.Vector');
|
|
goog.require('ol.proj');
|
|
goog.require('ol.source.BingMaps');
|
|
goog.require('ol.source.Vector');
|
|
|
|
var projection = ol.proj.get('EPSG:3857');
|
|
|
|
var raster = new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({
|
|
imagerySet: 'Aerial',
|
|
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
|
})
|
|
});
|
|
|
|
var vector = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
url: 'data/kml/2012-02-10.kml',
|
|
format: new ol.format.KML()
|
|
})
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [raster, vector],
|
|
target: document.getElementById('map'),
|
|
view: new ol.View({
|
|
center: [876970.8463461736, 5859807.853963373],
|
|
projection: projection,
|
|
zoom: 10
|
|
})
|
|
});
|
|
|
|
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('name'));
|
|
}
|
|
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
|
map.getTarget().style.cursor = 'pointer';
|
|
} else {
|
|
document.getElementById('info').innerHTML = ' ';
|
|
map.getTarget().style.cursor = '';
|
|
}
|
|
};
|
|
|
|
map.on('pointermove', function(evt) {
|
|
if (evt.dragging) {
|
|
return;
|
|
}
|
|
var pixel = map.getEventPixel(evt.originalEvent);
|
|
displayFeatureInfo(pixel);
|
|
});
|
|
|
|
map.on('click', function(evt) {
|
|
displayFeatureInfo(evt.pixel);
|
|
});
|