The Image Shape is derived from AnchoredShape and is used to display an image. Like all AnchoredShapes location of the Image is given relative to its anchor point. User can specify images either by their HTML DOM object or by assiging a URI to an image.
This tutorial assumes familiarity with Anchored Shapes tutorial and the Getting Started tutorial.
# Using an image
Displays an image by its 'x' and 'y' anchor points.
import { Image } from "@int/geotoolkit/scene/shapes/Image.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
function createScene(canvas, image) {
const group = new Group().addChild([
new Image({
"x": 20,
"y": 20,
"alignment": AnchorType.LeftTop,
"image": image
})
]);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'), document.querySelector('[ref="intImage"]'));
# Using an image from a URL
Displays an image using its URL
import { Image } from "@int/geotoolkit/scene/shapes/Image.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import intImage from "/src/assets/images/slb-134x80.png?import";
function getIntImageBase64() {
return "data:image/png;base64,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";
}
function createScene(canvas) {
const group = new Group().addChild([
new Image({
"x": 20,
"y": 20,
"alignment": AnchorType.LeftTop,
"url": intImage
}),
new Image({
"x": 20,
"y": 100,
"alignment": AnchorType.LeftTop,
"url": getIntImageBase64()
})
]);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Reuse Image References
Shows how to use an image reference to display the image.
import { Events, Image } from "@int/geotoolkit/scene/shapes/Image.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import intImage from "/src/assets/images/slb-134x80.png?import";
function createScene(canvas) {
const callback = function(eventType, sender) {
sender.getParent().addChild([
new Image({
"x": 20,
"y": 20,
"alignment": AnchorType.LeftTop,
"image": sender.getImage()
})
]);
};
const group = new Group().addChild([
new Image({
"x": 20,
"y": 20,
"alignment": AnchorType.LeftTop,
"url": intImage
}).on(Events.ImageLoaded, callback)
]);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));