I have a javascript compoment OpenSeadragon ( openseadragon.github.io ) for viewing large images with this code:
Html:
<img id="pushpin" src="pushpin.png">
<div id="openseadragon" style="width: 800px; height: 600px;"></div>
Javascript:
var viewer = OpenSeadragon({
id: "openseadragon",
prefixUrl: "node_modules/openseadragon/build/openseadragon/images/",
tileSources: "images/test/test.dzi",
overlays: [{
id: 'pushpin',
x: 0.5,
y: 0.5
}],
gestureSettingsMouse: {
clickToZoom: false
},
});
My question is: is it possible to add a marker when click on the component?
Yes, you should be able to do something like this:
viewer.addHandler('canvas-click', function(event) {
var viewportPoint = viewer.viewport.pointFromPixel(event.position);
viewer.addOverlay('pushpin', viewportPoint);
});
I haven't tested that code, so it may not be quite right, but that's the basic idea.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.