220 lines
6.1 KiB
HTML
220 lines
6.1 KiB
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/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>
|