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.
170 lines (151 loc) • 3.78 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</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- hosted version -->
<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script>
<script type="text/javascript">
var dojoConfig = {
isDebug : true,
parseOnLoad : true,
async:true
};
</script>
<script type="text/javascript" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/_base/array",
"dojo/_base/lang",
"dijit/registry",
"dojox/geo/openlayers/widget/Map",
"dojox/geo/openlayers/GfxLayer",
"dojox/geo/openlayers/Point",
"dojox/geo/openlayers/LineString",
"dojox/geo/openlayers/Collection",
"dojox/geo/openlayers/GeometryFeature",
"dojo/parser"],
function(ready, arr, lang, registry, Map, GfxLayer, Point, LineString, Collection, GeometryFeature){
ready(function(){
var map = registry.byId("map"),
layer = new GfxLayer("GfxLayer");
map.map.addLayer(layer);
var p1 = {
x : 7.154126,
y : 43.651748
};
var pg1 = new Point(p1);
var p2 = {
x : 7.1541,
y : 43.6517
};
var pg2 = new Point(p2);
var grp = new Collection([pg1, pg2]);
var gf = new GeometryFeature(grp);
gf.setStroke("red");
gf.setShapeProperties({
r : 10
});
layer.addFeature(gf);
var cx = 7.154;
var cy = 43.651;
var ex = 0.001;
var a1 = [{
x : cx - ex,
y : cy + ex
}, {
x : cx + ex,
y : cy + ex
}, {
x : cx + ex,
y : cy - ex
}, {
x : cx - ex,
y : cy - ex
}, {
x : cx - ex,
y : cy + ex
}];
ex = 0.00018;
var a2 = [{
x : cx - ex,
y : cy + ex
}, {
x : cx + ex,
y : cy + ex
}, {
x : cx + ex,
y : cy - ex
}, {
x : cx - ex,
y : cy - ex
}, {
x : cx - ex,
y : cy + ex
}];
var f1 = new LineString(a1);
var f2 = new LineString(a2);
grp = new Collection([f1, f2]);
gf = new GeometryFeature(grp);
gf.setStroke("blue");
gf.setFill([0, 0, 0, 0.2]);
layer.addFeature(gf);
arr.forEach(a2, function(p){
var pg = new Point(p);
gf = new GeometryFeature(pg);
gf.createShape = lang.hitch(this, function(/* Surface */s){
var r1 = 30;
var r2 = 10;
var branches = 9;
var star = makeStarShape(r1, r2, branches);
var path = s.createPath();
path.setShape({
path : star
});
return path;
});
gf.setStroke("aqua");
// gf.setFill({
// color : [ 255, 100, 0 ]
// });
gf.setFill([255, 100, 0]);
layer.addFeature(gf);
});
layer.redraw();
});
function makeStarShape(r1, r2, b){
var TPI = Math.PI * 2;
var di = TPI / b;
var s = null;
var start = Math.PI;
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(2) + "," + (c1 * r1).toFixed(2) + " ";
} else {
s += "L" + (s1 * r1).toFixed(2) + "," + (c1 * r1).toFixed(2) + " ";
}
s += "L" + (s2 * r2).toFixed(2) + "," + (c2 * r2).toFixed(2) + " ";
}
s += "z";
return s;
}
});
</script>
</head>
<body class="tundra">
</head>
<div id="map" dojoType="dojox.geo.openlayers.widget.Map" baseLayerType="'OSM'"
initialLocation="{
position : [7.154126, 43.651748],
extent : 0.002 }"
style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>
</body>
</html>