dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
220 lines (200 loc) • 5.99 kB
HTML
<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>