Adding in support for hit detection with canvas (and rendering holes in polygons). r=fredj (closes #3207)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11849 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
24
examples/canvas-hit-detection.html
Normal file
24
examples/canvas-hit-detection.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Canvas Hit Detection Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Feature Hit Detection with Canvas</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates detection of feature hits with the canvas renderer.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
View the <a href="canvas-hit-detection.js" target="_blank">canvas-hit-detection.js</a>
|
||||
source to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<script src="canvas-hit-detection.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
88
examples/canvas-hit-detection.js
Normal file
88
examples/canvas-hit-detection.js
Normal file
@@ -0,0 +1,88 @@
|
||||
|
||||
// create some sample features
|
||||
var Feature = OpenLayers.Feature.Vector;
|
||||
var Geometry = OpenLayers.Geometry;
|
||||
var features = [
|
||||
new Feature(new Geometry.Point(-90, 45)),
|
||||
new Feature(
|
||||
new Geometry.Point(0, 45),
|
||||
{cls: "one"}
|
||||
),
|
||||
new Feature(
|
||||
new Geometry.Point(90, 45),
|
||||
{cls: "two"}
|
||||
),
|
||||
new Feature(
|
||||
Geometry.fromWKT("LINESTRING(-110 -60, -80 -40, -50 -60, -20 -40)")
|
||||
),
|
||||
new Feature(
|
||||
Geometry.fromWKT("POLYGON((20 -20, 110 -20, 110 -80, 20 -80, 20 -20), (40 -40, 90 -40, 90 -60, 40 -60, 40 -40))")
|
||||
)
|
||||
];
|
||||
|
||||
// create rule based styles
|
||||
var Rule = OpenLayers.Rule;
|
||||
var Filter = OpenLayers.Filter;
|
||||
var style = new OpenLayers.Style({
|
||||
pointRadius: 10,
|
||||
strokeWidth: 2,
|
||||
strokeOpacity: 0.7,
|
||||
strokeColor: "navy",
|
||||
fillColor: "#ffcc66",
|
||||
fillOpacity: 1
|
||||
}, {
|
||||
rules: [
|
||||
new Rule({
|
||||
filter: new Filter.Comparison({
|
||||
type: "==",
|
||||
property: "cls",
|
||||
value: "one"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "../img/marker-blue.png"
|
||||
}
|
||||
}),
|
||||
new Rule({
|
||||
filter: new Filter.Comparison({
|
||||
type: "==",
|
||||
property: "cls",
|
||||
value: "two"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "../img/marker-green.png"
|
||||
}
|
||||
}),
|
||||
new Rule({
|
||||
elseFilter: true,
|
||||
symbolizer: {
|
||||
graphicName: "circle"
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
var layer = new OpenLayers.Layer.Vector(null, {
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
"default": style,
|
||||
select: {
|
||||
fillColor: "red",
|
||||
pointRadius: 13,
|
||||
strokeColor: "yellow",
|
||||
strokeWidth: 3
|
||||
}
|
||||
}),
|
||||
isBaseLayer: true,
|
||||
renderers: ["Canvas"]
|
||||
});
|
||||
layer.addFeatures(features);
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
layers: [layer],
|
||||
center: new OpenLayers.LonLat(0, 0),
|
||||
zoom: 0
|
||||
});
|
||||
|
||||
var select = new OpenLayers.Control.SelectFeature(layer, {hover: true});
|
||||
map.addControl(select);
|
||||
select.activate();
|
||||
52
examples/canvas-inspector.html
Normal file
52
examples/canvas-inspector.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Canvas Inspector</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="Jugl.js"></script>
|
||||
<style>
|
||||
#template {
|
||||
display: none;
|
||||
}
|
||||
#inspector table {
|
||||
border-right: 1px solid #666;
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
#inspector table td {
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-top: 1px solid #666;
|
||||
border-left: 1px solid #666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Canvas Inspector</h1>
|
||||
<p id="shortdesc">
|
||||
Displays pixel values for canvas context.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
View the <a href="canvas-inspector.js" target="_blank">canvas-inspector.js</a>
|
||||
source to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="inspector">
|
||||
</div>
|
||||
<table id="template">
|
||||
<tr jugl:repeat="row new Array(rows)">
|
||||
<td jugl:repeat="col new Array(cols)"
|
||||
jugl:attributes="id 'c' + repeat.col.index + 'r' + repeat.row.index">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script src="canvas-inspector.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
91
examples/canvas-inspector.js
Normal file
91
examples/canvas-inspector.js
Normal file
@@ -0,0 +1,91 @@
|
||||
|
||||
var features = [
|
||||
|
||||
new OpenLayers.Feature.Vector(
|
||||
OpenLayers.Geometry.fromWKT(
|
||||
"LINESTRING(-90 90, 90 -90)"
|
||||
),
|
||||
{color: "#0f0000"}
|
||||
),
|
||||
|
||||
new OpenLayers.Feature.Vector(
|
||||
OpenLayers.Geometry.fromWKT(
|
||||
"LINESTRING(100 50, -100 -50)"
|
||||
),
|
||||
{color: "#00ff00"}
|
||||
)
|
||||
|
||||
];
|
||||
|
||||
var layer = new OpenLayers.Layer.Vector(null, {
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
strokeWidth: 3,
|
||||
strokeColor: "${color}"
|
||||
}),
|
||||
isBaseLayer: true,
|
||||
renderers: ["Canvas"],
|
||||
rendererOptions: {hitDetection: true}
|
||||
});
|
||||
layer.addFeatures(features);
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
layers: [layer],
|
||||
center: new OpenLayers.LonLat(0, 0),
|
||||
zoom: 0
|
||||
});
|
||||
|
||||
var xOff = 2, yOff = 2;
|
||||
|
||||
var rows = 1 + (2 * yOff);
|
||||
var cols = 1 + (2 * xOff);
|
||||
|
||||
var template = new jugl.Template("template");
|
||||
template.process({
|
||||
clone: true,
|
||||
parent: "inspector",
|
||||
context: {
|
||||
rows: rows,
|
||||
cols: cols
|
||||
}
|
||||
});
|
||||
|
||||
function isDark(r, g, b, a) {
|
||||
a = a / 255;
|
||||
var da = 1 - a;
|
||||
// convert color values to decimal (assume white background)
|
||||
r = (a * r / 255) + da;
|
||||
g = (a * g / 255) + da;
|
||||
b = (a * b / 255) + da;
|
||||
// use w3C brightness measure
|
||||
var brightness = (r * 0.299) + (g * 0.587) + (b * 0.144);
|
||||
return brightness < 0.5;
|
||||
}
|
||||
|
||||
var context = layer.renderer.canvas; //layer.renderer.hitContext;
|
||||
var size = map.getSize();
|
||||
map.events.on({
|
||||
mousemove: function(event) {
|
||||
var x = event.xy.x - 1; // TODO: fix this elsewhere
|
||||
var y = event.xy.y;
|
||||
if ((x >= xOff) && (x < size.w - xOff) && (y >= yOff) && (y < size.h - yOff)) {
|
||||
var data = context.getImageData(x - xOff, y - yOff, rows, cols).data;
|
||||
var offset, red, green, blue, alpha, cell;
|
||||
for (var i=0; i<cols; ++i) {
|
||||
for (var j=0; j<rows; ++j) {
|
||||
offset = (i * 4) + (j * 4 * cols);
|
||||
red = data[offset];
|
||||
green = data[offset + 1];
|
||||
blue = data[offset + 2];
|
||||
alpha = data[offset + 3];
|
||||
cell = document.getElementById("c" + i + "r" + j);
|
||||
cell.innerHTML = "R: " + red + "<br>G: " + green + "<br>B: " + blue + "<br>A: " + alpha;
|
||||
cell.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha / 255) + ")";
|
||||
cell.style.color = isDark(red, green, blue, alpha) ? "#ffffff" : "#000000";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user