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.
165 lines
3.7 KiB
165 lines
3.7 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</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 djConfig = { |
|
isDebug : true, |
|
parseOnLoad : true |
|
}; |
|
</script> |
|
|
|
<script type="text/javascript" src="../../../../dojo/dojo.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ "dojo/ready", |
|
"dojo/_base/array", |
|
"dojo/_base/lang", |
|
"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, Map, GfxLayer, Point, LineString, Collection, GeometryFeature){ |
|
|
|
ready(function(){ |
|
var map = dijit.byId("map"); |
|
var 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>
|
|
|