ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #14039 from MoonE/improve-examples

Browse Source 
Improve some examples
This commit is contained in:
MoonE
2022-08-23 19:51:32 +02:00
committed by GitHub
parent 31a42949e6 c528936519
commit bb98f178b3
4 changed files with 53 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
examples/cartodb.js
View File

@@ -10,17 +10,28 @@ const mapConfig = {
'options': { 'options': {
'cartocss_version': '2.1.1', 'cartocss_version': '2.1.1',
'cartocss': '#layer { polygon-fill: #F00; }', 'cartocss': '#layer { polygon-fill: #F00; }',
'sql': 'select * from european_countries_e where area > 0',
}, },
}, },
], ],
}; };
function setArea(n) {
mapConfig.layers[0].options.sql =
'select * from european_countries_e where area > ' + n;
}
const areaSelect = document.getElementById('country-area');
setArea(areaSelect.value);
const cartoDBSource = new CartoDB({ const cartoDBSource = new CartoDB({
account: 'documentation', account: 'documentation',
config: mapConfig, config: mapConfig,
}); });
areaSelect.addEventListener('change', function () {
setArea(this.value);
cartoDBSource.setConfig(mapConfig);
});
const map = new Map({ const map = new Map({
layers: [ layers: [
new TileLayer({ new TileLayer({
@@ -32,17 +43,7 @@ const map = new Map({
], ],
target: 'map', target: 'map',
view: new View({ view: new View({
center: [0, 0], center: [8500000, 8500000],
zoom: 2, zoom: 2,
}), }),
}); });
function setArea(n) {
mapConfig.layers[0].options.sql =
'select * from european_countries_e where area > ' + n;
cartoDBSource.setConfig(mapConfig);
}
document.getElementById('country-area').addEventListener('change', function () {
setArea(this.value);
});

19
examples/kml-earthquakes.js
View File

@@ -69,10 +69,12 @@ const tooltip = new bootstrap.Tooltip(info, {
}); });
let currentFeature; let currentFeature;
const displayFeatureInfo = function (pixel) { const displayFeatureInfo = function (pixel, target) {
const feature = map.forEachFeatureAtPixel(pixel, function (feature) { const feature = target.closest('.ol-control')
return feature; ? undefined
}); : map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) { if (feature) {
info.style.left = pixel[0] + 'px'; info.style.left = pixel[0] + 'px';
info.style.top = pixel[1] + 'px'; info.style.top = pixel[1] + 'px';
@@ -97,9 +99,14 @@ map.on('pointermove', function (evt) {
return; return;
} }
const pixel = map.getEventPixel(evt.originalEvent); const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel); displayFeatureInfo(pixel, evt.originalEvent.target);
}); });
map.on('click', function (evt) { map.on('click', function (evt) {
displayFeatureInfo(evt.pixel); displayFeatureInfo(evt.pixel, evt.originalEvent.target);
});
map.getTargetElement().addEventListener('pointerleave', function () {
tooltip.hide();
currentFeature = undefined;
}); });

19
examples/kml-timezones.js
View File

@@ -93,10 +93,12 @@ const tooltip = new bootstrap.Tooltip(info, {
}); });
let currentFeature; let currentFeature;
const displayFeatureInfo = function (pixel) { const displayFeatureInfo = function (pixel, target) {
const feature = map.forEachFeatureAtPixel(pixel, function (feature) { const feature = target.closest('.ol-control')
return feature; ? undefined
}); : map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) { if (feature) {
info.style.left = pixel[0] + 'px'; info.style.left = pixel[0] + 'px';
info.style.top = pixel[1] + 'px'; info.style.top = pixel[1] + 'px';
@@ -121,9 +123,14 @@ map.on('pointermove', function (evt) {
return; return;
} }
const pixel = map.getEventPixel(evt.originalEvent); const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel); displayFeatureInfo(pixel, evt.originalEvent.target);
}); });
map.on('click', function (evt) { map.on('click', function (evt) {
displayFeatureInfo(evt.pixel); displayFeatureInfo(evt.pixel, evt.originalEvent.target);
});
map.getTargetElement().addEventListener('pointerleave', function () {
tooltip.hide();
currentFeature = undefined;
}); });

21
examples/reprojection-by-code.js
View File

@@ -139,12 +139,19 @@ searchButton.onclick = function (event) {
/** /**
* Handle checkbox change events. * Handle checkbox change events.
*/ */
renderEdgesCheckbox.onchange = function () { function onReprojectionChange() {
osmSource.setRenderReprojectionEdges(renderEdgesCheckbox.checked); osmSource.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
}; }
showTilesCheckbox.onchange = function () { function onGraticuleChange() {
debugLayer.setVisible(showTilesCheckbox.checked);
};
showGraticuleCheckbox.onchange = function () {
graticule.setVisible(showGraticuleCheckbox.checked); graticule.setVisible(showGraticuleCheckbox.checked);
}; }
function onTilesChange() {
debugLayer.setVisible(showTilesCheckbox.checked);
}
showGraticuleCheckbox.addEventListener('change', onGraticuleChange);
renderEdgesCheckbox.addEventListener('change', onReprojectionChange);
showTilesCheckbox.addEventListener('change', onTilesChange);
onReprojectionChange();
onGraticuleChange();
onTilesChange();