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

88
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, const vectorLayer = new VectorImageLayer({
background: '#1a2b39',
imageRatio: 2,
source: new VectorSource({
url: 'https://openlayers.org/data/vector/ecoregions.json',
format: new GeoJSON(),
}), }),
text: new Text(), style: function (feature) {
const color = feature.get('COLOR') || '#eeeeee';
style.getFill().setColor(color);
return style;
},
}); });
const map = new Map({ const map = new Map({
layers: [ layers: [vectorLayer],
new VectorImageLayer({
imageRatio: 2,
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON(),
}),
style: function (feature) {
style.getText().setText(feature.get('name'));
return style;
},
}),
],
target: 'map', target: 'map',
view: new View({ view: new View({
center: [0, 0], center: [0, 0],
@@ -43,47 +40,42 @@ 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 = ' ';
} }
if (feature !== highlight) { if (feature !== highlight) {
if (highlight) { if (highlight) {
featureOverlay.getSource().removeFeature(highlight); featureOverlay.getSource().removeFeature(highlight);
} }
if (feature) { if (feature) {
featureOverlay.getSource().addFeature(feature); featureOverlay.getSource().addFeature(feature);
} }
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) {