cf0e650435
add getScaleArray() method test two dimension scale icons test two dimension scale text add example of icon and label scaling use smaller icon and larger interval test two dimensional scale icons test two dimensional scale icons
118 lines
2.6 KiB
JavaScript
118 lines
2.6 KiB
JavaScript
import Feature from '../../../src/ol/Feature.js';
|
|
import Icon from '../../../src/ol/style/Icon.js';
|
|
import Map from '../../../src/ol/Map.js';
|
|
import Point from '../../../src/ol/geom/Point.js';
|
|
import Style from '../../../src/ol/style/Style.js';
|
|
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
|
import VectorSource from '../../../src/ol/source/Vector.js';
|
|
import View from '../../../src/ol/View.js';
|
|
|
|
const features = [];
|
|
for (let i = 0; i < 2; ++i) {
|
|
const x = i * 5;
|
|
features.push(
|
|
new Feature({
|
|
geometry: new Point([x + 2, 2]),
|
|
scale: [1.5, 1],
|
|
anchor: [1, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 3, 2]),
|
|
scale: [1.5, 1],
|
|
anchor: [0.5, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 4, 2]),
|
|
scale: [1.5, 1],
|
|
anchor: [0, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 2, 4]),
|
|
scale: [-1, 1],
|
|
anchor: [0, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 3, 4]),
|
|
scale: [-1, 1],
|
|
anchor: [0.5, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 4, 4]),
|
|
scale: [-1, 1],
|
|
anchor: [1, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 2, 6]),
|
|
scale: [1, -1],
|
|
anchor: [0.5, 1],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 3, 6]),
|
|
scale: [1, -1],
|
|
anchor: [0.5, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 4, 6]),
|
|
scale: [1, -1],
|
|
anchor: [0.5, 0],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 2, 8]),
|
|
scale: [1, 1.5],
|
|
anchor: [0.5, 0],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 3, 8]),
|
|
scale: [1, 1.5],
|
|
anchor: [0.5, 0.5],
|
|
rotated: i,
|
|
}),
|
|
new Feature({
|
|
geometry: new Point([x + 4, 8]),
|
|
scale: [1, 1.5],
|
|
anchor: [0.5, 1],
|
|
rotated: i,
|
|
})
|
|
);
|
|
}
|
|
|
|
const vectorSource = new VectorSource({
|
|
features: features,
|
|
});
|
|
|
|
const style = new Style({
|
|
image: new Icon({
|
|
src: '/data/fish.png',
|
|
}),
|
|
});
|
|
|
|
const vectorLayer = new VectorLayer({
|
|
source: vectorSource,
|
|
style: function (feature) {
|
|
style.getImage().setScale(feature.get('scale'));
|
|
style.getImage().setAnchor(feature.get('anchor'));
|
|
style.getImage().setRotation((feature.get('rotated') * Math.PI) / 4);
|
|
return style;
|
|
},
|
|
});
|
|
|
|
const map = new Map({
|
|
pixelRatio: 1,
|
|
layers: [vectorLayer],
|
|
target: 'map',
|
|
view: new View(),
|
|
});
|
|
map.getView().fit([0, 0, 11, 11]);
|
|
|
|
render();
|