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

Update vector image layer example

Browse Source
This commit is contained in:
Tim Schaub
2022-01-07 12:51:28 -07:00
parent 71af0eee43
commit 73f54c1e6c
1 changed files with 40 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
examples/image-vector-layer.js
View File

@@ -4,33 +4,30 @@ import VectorImageLayer from '../src/ol/layer/VectorImage.js';
import VectorLayer from '../src/ol/layer/Vector.js'; import VectorLayer from '../src/ol/layer/Vector.js';
import VectorSource from '../src/ol/source/Vector.js'; import VectorSource from '../src/ol/source/Vector.js';
import View from '../src/ol/View.js'; import View from '../src/ol/View.js';
import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; import {Fill, Stroke, Style} from '../src/ol/style.js';
const style = new Style({ const style = new Style({
fill: new Fill({ fill: new Fill({
color: 'rgba(255, 255, 255, 0.6)', color: '#eeeeee',
}), }),
stroke: new Stroke({
color: '#319FD3',
width: 1,
}),
text: new Text(),
}); });
const map = new Map({ const vectorLayer = new VectorImageLayer({
layers: [ background: '#1a2b39',
new VectorImageLayer({
imageRatio: 2, imageRatio: 2,
source: new VectorSource({ source: new VectorSource({
url: 'data/geojson/countries.geojson', url: 'https://openlayers.org/data/vector/ecoregions.json',
format: new GeoJSON(), format: new GeoJSON(),
}), }),
style: function (feature) { style: function (feature) {
style.getText().setText(feature.get('name')); const color = feature.get('COLOR') || '#eeeeee';
style.getFill().setColor(color);
return style; return style;
}, },
}), });
],
const map = new Map({
layers: [vectorLayer],
target: 'map', target: 'map',
view: new View({ view: new View({
center: [0, 0], center: [0, 0],
@@ -43,27 +40,21 @@ const featureOverlay = new VectorLayer({
map: map, map: map,
style: new Style({ style: new Style({
stroke: new Stroke({ stroke: new Stroke({
color: '#f00', color: 'rgba(255, 255, 255, 0.7)',
width: 1, width: 2,
}),
fill: new Fill({
color: 'rgba(255,0,0,0.1)',
}), }),
}), }),
}); });
let highlight; let highlight;
const displayFeatureInfo = function (pixel) { const displayFeatureInfo = function (pixel) {
map const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
.getLayers() return feature;
.item(0) });
.getFeatures(pixel)
.then(function (features) {
const feature = features.length > 0 ? features[0] : undefined;
const info = document.getElementById('info'); const info = document.getElementById('info');
if (feature) { if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name'); info.innerHTML = feature.get('ECO_NAME') || ' ';
} else { } else {
info.innerHTML = ' '; info.innerHTML = ' ';
} }
@@ -77,13 +68,14 @@ const displayFeatureInfo = function (pixel) {
} }
highlight = feature; highlight = feature;
} }
});
}; };
map.on('pointermove', function (evt) { map.on('pointermove', function (evt) {
if (!evt.dragging) { if (evt.dragging) {
displayFeatureInfo(evt.pixel); return;
} }
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
}); });
map.on('click', function (evt) { map.on('click', function (evt) {