You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
5.8 KiB
219 lines
5.8 KiB
<html> |
|
<head profile="http://www.w3.org/2002/12/namespace"> |
|
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/dijit.css"> |
|
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css"> |
|
<title>GFX Layer. Random Stars on a Map</title> |
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|
<meta name="viewport" content="user-scalable=no, width=device-width" /> |
|
|
|
<!-- hosted version --> |
|
<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script> |
|
|
|
<script type="text/javascript"> |
|
var djConfig = { |
|
parseOnLoad : true |
|
}; |
|
</script> |
|
|
|
<script type="text/javascript" src="../../../../dojo/dojo.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ "dojo/ready", |
|
"dojo/_base/lang", |
|
"dojo/_base/array", |
|
"dojo/_base/Color", |
|
"dojox/geo/openlayers/widget/Map", |
|
"dojox/geo/openlayers/GfxLayer", |
|
"dojox/geo/openlayers/LineString", |
|
"dojox/geo/openlayers/GeometryFeature", |
|
"dojox/gfx", |
|
"dojox/gfx/move", |
|
"dojox/gfx/fx", |
|
"dojo/fx", |
|
"dojo/colors", |
|
"dojo/parser"], function(ready, lang, arr, Color, Map, GfxLayer, LineString, GeometryFeature, gfx, move, fx, colors){ |
|
|
|
ready(function(){ |
|
var map = dijit.byId("map"); |
|
var layer = new GfxLayer("Stars Layer"); |
|
map.map.addLayer(layer); |
|
var b = layer.olLayer.getExtent(); |
|
|
|
var p1 = { |
|
x : b.left, |
|
y : b.top |
|
}; |
|
var proj = map.map.olMap.getProjectionObject(); |
|
p1 = map.map.transform(p1, proj, dojox.geo.openlayers.EPSG4326); |
|
p1 = lang.mixin({}, p1); |
|
|
|
var p2 = { |
|
x : b.right, |
|
y : b.bottom |
|
}; |
|
p2 = map.map.transform(p2, proj, dojox.geo.openlayers.EPSG4326); |
|
p2 = lang.mixin({}, p2); |
|
|
|
var numPoints = 100; |
|
var precision = 10; |
|
for ( var i = 0; i < numPoints; i++) { |
|
var dx = p2.x - p1.x; |
|
var x = Math.random() * dx + p1.x; |
|
var dy = p2.y - p1.y; |
|
var y = Math.random() * dy + p1.y; |
|
var pg = new dojox.geo.openlayers.Point({ |
|
x : x.toFixed(precision), |
|
y : y.toFixed(precision) |
|
}); |
|
|
|
var pf = new GeometryFeature(pg); |
|
pf.createShape = function(/* Surface */s){ |
|
var status = null; |
|
function createText(surface, x, y, text){ |
|
var t = surface.createText({}); |
|
t.moveToFront().setFill(new Color([0, 0, 0, 1])).setFont({ |
|
family : "serif", |
|
// variant : "small-caps", |
|
weight : "normal", |
|
size : "20pt" |
|
}).setShape({ |
|
x : x, |
|
y : y, |
|
text : text, |
|
align : "start" |
|
}); |
|
t.setFill("red"); |
|
t.setStroke({ |
|
color : [0, 0, 0, 0], |
|
weight : 0.5 |
|
}); |
|
var anim = dojox.gfx.fx.animateFill({ |
|
shape : t, |
|
duration : 2000, |
|
color : { |
|
end : "transparent" |
|
} |
|
}); |
|
dojo.connect(anim, "onEnd", function(){ |
|
t.removeShape(); |
|
}); |
|
anim.play(); |
|
return t; |
|
} |
|
|
|
function showStatus(event, surface, star, text){ |
|
var mx = event.pageX; |
|
var my = event.pageY; |
|
if (lang.isArray(text)) { |
|
var x = mx + 10; |
|
var y = my + 10; |
|
var dy = 30; |
|
status = surface.createGroup(); |
|
arr.forEach(text, function(s){ |
|
var t = createText(surface, x, y, s); |
|
y += dy; |
|
status.add(t); |
|
}); |
|
} else { |
|
status = createText(surface, mx, my, text); |
|
} |
|
var anim = dojox.gfx.fx.animateFill({ |
|
shape : status, |
|
duration : 3000, |
|
color : { |
|
end : "transparent" |
|
} |
|
}); |
|
dojo.connect(anim, "onEnd", function(){ |
|
status.removeShape(); |
|
status = null; |
|
}); |
|
anim.play(); |
|
return status; |
|
} |
|
var r1 = Math.floor(Math.random() * 50 + 2); |
|
var r2 = Math.floor(Math.random() * 30 + 2); |
|
var branches = Math.floor(Math.random() * 10 + 2); |
|
var start = Math.random() * Math.PI * 2; |
|
var star = makeStarShape(r1, r2, branches, start); |
|
var path = s.createPath(); |
|
path.setShape({ |
|
path : star |
|
}); |
|
var msg = [ "star r1:" + r1 + " r2:" + r2, |
|
"branches: " + branches, |
|
"longitude: " + x.toFixed(4), |
|
"latitude: " + y.toFixed(4)]; |
|
path.connect("onmouseenter", function(event){ |
|
|
|
}); |
|
path.connect("onmouseout", function(event){ |
|
|
|
}); |
|
path.connect("onmousemove", function(event){ |
|
if (!status) |
|
status = showStatus(event, s, path, msg); |
|
}); |
|
return path; |
|
}; |
|
var r = Math.floor(Math.random() * 255); |
|
var g = Math.floor(Math.random() * 255); |
|
var b = Math.floor(Math.random() * 255); |
|
var t = 1; |
|
var c1 = [r, g, b, t]; |
|
pf.setStroke(c1); |
|
r = Math.floor(Math.random() * 255); |
|
g = Math.floor(Math.random() * 255); |
|
b = Math.floor(Math.random() * 255); |
|
t = Math.random() * 0.75 + 0.25; |
|
var c2 = [r, g, b, t]; |
|
pf.setFill(c2); |
|
layer.addFeature(pf); |
|
} |
|
|
|
setTimeout(function(){ |
|
layer.olLayer.redraw(); |
|
}, 0); |
|
|
|
}); |
|
|
|
function makeStarShape(r1, r2, b, start){ |
|
var precision = 2; |
|
var TPI = Math.PI * 2; |
|
var di = TPI / b; |
|
if (!start) |
|
start = Math.PI; |
|
var s = null; |
|
var end = start + TPI; |
|
for ( var i = start; i < end; i += di) { |
|
var c1 = Math.cos(i); |
|
var s1 = Math.sin(i); |
|
var i2 = i + di / 2; |
|
var c2 = Math.cos(i2); |
|
var s2 = Math.sin(i2); |
|
if (s == null) { |
|
s = "M" + (s1 * r1).toFixed(precision) + "," + (c1 * r1).toFixed(precision) + " "; |
|
} else { |
|
s += "L" + (s1 * r1).toFixed(precision) + "," + (c1 * r1).toFixed(precision) + " "; |
|
} |
|
s += "L" + (s2 * r2).toFixed(precision) + "," + (c2 * r2).toFixed(precision) + " "; |
|
} |
|
s += "z"; |
|
return s; |
|
} |
|
|
|
}); |
|
</script> |
|
|
|
</head> |
|
<body class="tundra"> |
|
</head> |
|
|
|
<div id="map" dojoType="dojox.geo.openlayers.widget.Map" baseLayerType="ArcGIS" |
|
initialLocation="{ |
|
position : [7.154126, 43.651748], |
|
extent : 0.002 }" |
|
style="background-color: #b5d0d0; width: 100%; height: 100%;"></div> |
|
|
|
</body> |
|
</html>
|
|
|