[OpenLayers-Users] Towards an eraser tool in OpenLayers
Dan Garland
dan at dangarland.co.uk
Tue Jan 26 04:46:51 EST 2010
Apologies if this was received twice- I didn't see it show up on the
archive page and didn't get a bounceback...
Hi all,
I'm a Ruby on Rails developer working on my first project with
OpenLayers. I'm tasked with developing an free-hand eraser tool that can
erase features created by the drawFeatures tool. Amongst other things
we've tried, my thinking is moving towards creating a SVG mask, based on
the existing drawing tool, in which the 'erased' line is actually a
black line within a white, rectangular SVG mask, which when applied over
the top of the tile layer would mask any drawn features from underneath.
I anticipate something like this:
<svg width="8cm" height="8cm" viewBox="0 0 800 800" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="3968"
height="2964">
<rect x="0" y="0" width="3968" height="2964" fill="white" />
<!-- The 'eraser' line -->
<polyline fill="none" stroke="black" stroke-width="25"
points="400,0 400,800" />
</mask>
</defs>
<!-- Example drawn features -->
<polyline id="myline" points="0,0 800,800" fill="none"
stroke-opacity="1" stroke-width="25" stroke-linecap="round"
stroke-linejoin="round" stroke-dasharray="none"/>
<polyline id="myline2" points="0,100 800,100" fill="none"
stroke-opacity="1" stroke-width="25" stroke-linecap="round"
stroke-linejoin="round" stroke-dasharray="none"/>
<polyline id="myline3" points="0,400 800,400" fill="none"
stroke-opacity="1" stroke-width="25" stroke-linecap="round"
stroke-linejoin="round" stroke-dasharray="none"/>
<use xlink:href="#myline" stroke="red" mask="url(#Mask)" />
<use xlink:href="#myline2" stroke="red" mask="url(#Mask)" />
<use xlink:href="#myline3" stroke="red" mask="url(#Mask)" />
</svg>
The problems I face with this approach is knowing how best to manipulate
the existing SVG object being referenced by OpenLayers. I wonder whether
it is feasible in OpenLayers to develop a control based on the
drawFeature tool that
1) Adds the mask <defs> section to the SVG Root at startup
2) Creates polyline elements with the mask
3) Adds <use> elements for each element in the tile layer to connect the
id and the mask
Before I dive in and spent hours in an unfamiliar area I wonder if any
OpenLayers developers have encountered this use case and have a better
solution, or can shed any light on this proposed approach.
Best Regards,
Dan Garland
More information about the Users
mailing list