0
私は線と円の地図を描くことができ、距離を計算できるopenlayer2の例があります。次にポリゴンを追加して距離を計算したいと思います。私は新しい午前ように、私はそんなにエラー.Originalコードを取得していますここOpenlayer2でポリゴンを追加して距離を計算したい
で誰かが助けてくださいことはできますか？
/*
* APIMethod: createGeodesicPolygon
* Create a regular polygon around a radius. Useful for creating circles
* and the like.
*
* Parameters:
* origin - {<OpenLayers.Geometry.Point>} center of polygon.
* radius - {Float} distance to vertex, in map units.
* sides - {Integer} Number of sides. 20 approximates a circle.
* rotation - {Float} original angle of rotation, in degrees.
* projection - {<OpenLayers.Projection>} the map's projection
*/
OpenLayers.Geometry.Polygon.createGeodesicPolygon = function(origin, radius, sides, rotation, projection){
if (projection.getCode() !== "EPSG:4326") {
origin.transform(projection, new OpenLayers.Projection("EPSG:4326"));
}
var latlon = new OpenLayers.LonLat(origin.x, origin.y);
var angle;
var new_lonlat, geom_point;
var points = [];
for (var i = 0; i < sides; i++) {
angle = (i * 360/sides) + rotation;
new_lonlat = OpenLayers.Util.destinationVincenty(latlon, angle, radius);
new_lonlat.transform(new OpenLayers.Projection("EPSG:4326"), projection);
geom_point = new OpenLayers.Geometry.Point(new_lonlat.lon, new_lonlat.lat);
points.push(geom_point);
}
var ring = new OpenLayers.Geometry.LinearRing(points);
return new OpenLayers.Geometry.Polygon([ring]);
};
function handleMeasurements(event){
var geometry = event.geometry, units = event.units, order = event.order;
var measure = event.measure, out = "", winname = 'measWin';
var win = Ext.WindowMgr.get(winname);
if (order == 1) {
out += "Line Length: " + measure.toFixed(2) + " " + units;
}
else {
out += "Shape Area: " + measure.toFixed(2) + " " + units + "<sup>2</" + "sup>";
}
if (!win) {
win = new Ext.Window({
id: winname,
autoHeight: true,
width: 200,
resizable: true,
title: 'Measure Tool',
items: [{
xtype: 'panel',
html: out,
bodyStyle: 'padding:5px;font-size:11px;background-color:#ffffff;'
}]
});
//get the map DIV id
win.show();
var mapId = event.object.map.div.id;
win.alignTo(Ext.getDom(mapId), 'bl-bl', [6, -80]);
}
else {
win.items.items[0].body.update(out);
if (!win.visible) {
win.show();
}
}
}
function showWin(map, vectorLayer){
var winname = "radii";
var win = new Ext.Window({
id: winname,
//height: 200,
width: 200,
constrain: true,
collapsible: true,
layout: 'fit',
title: 'Circle Options',
items: [{
xtype: 'combo',
allowBlank: false,
name: 'Radius',
forceSelection: true, //limit vals to list
editable: false, //prevent text being entered
fieldLabel: 'Radius',
emptyText: 'Select a Radius...',
store: new Ext.data.SimpleStore({
fields: ['radius', 'value'],
data: [["5 km", "5000"], ["10 km", "10000"], ["20 km", "20000"], ["50 km", "50000"], ["100 km", "100000"], ["200 km", "200000"]]
}),
displayField: 'radius',
valueField: 'value',
selectOnFocus: true,
mode: 'local',
triggerAction: 'all',
listeners: {
select: function(combo, record, index){
var radius = record.data.value;
var feature = vectorLayer.features[vectorLayer.features.length - 1];
if (feature) {
var centroid = feature.geometry.getCentroid();
var projection = map.getProjectionObject();
var sides = 40;
var new_geom = OpenLayers.Geometry.Polygon.createGeodesicPolygon(centroid, radius, sides, 45, projection);
var new_feature = new OpenLayers.Feature.Vector(new_geom);
vectorLayer.addFeatures([new_feature]);
}
}
}
}]
});
win.show();
var mapId = map.div.id;
win.alignTo(Ext.getDom(mapId), 'tr-tr', [-150, 6]);
}
function startApp(){
var map = new OpenLayers.Map('map');
var vectorLayer = new OpenLayers.Layer.Vector();
map.addLayer(vectorLayer);
var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.org/${z}/${x}/${y}.png", {
'sphericalMercator': true
});
var pointControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Point, {
'displayClass': 'olControlDrawFeaturePoint',
handlerOptions: {
persist: true
}
});
var measureControl = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
'displayClass': 'olControlDrawFeaturePath',
persist: true,
geodesic: true,
title: 'Line Measure: draw a line to see distances on the map',
handlerOptions: {
persist: true
}
});
measureControl.events.on({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
var panelControls = [new OpenLayers.Control.Navigation(), pointControl, measureControl];
var toolbar = new OpenLayers.Control.Panel({
displayClass: 'olControlEditingToolbar',
defaultControl: panelControls[0]
});
toolbar.addControls(panelControls);
map.addControl(toolbar);
map.addLayer(osmLayer);
map.setCenter(new OpenLayers.LonLat(-959997.02, 6921270.79), 9);
showWin(map, vectorLayer);
}
startApp();<html style="width:100%; height:100%">
<head>
\t <title>Geodesic Polygon Demo</title>
\t \t <!-- by Seth Girvin, http://geographika.co.uk -->
<script type="text/javascript" src="http://proj4js.org/lib/proj4js.js">
</script>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js">
</script>
<script type="text/javascript" src="GeodesicPolygon.js">
</script>
<script type="text/javascript" src="GeodesicTools.js">
</script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js">
</script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript">
</script>
</head>
<body style="width:100%; height:100%">
<div style="width:100%; height:100%" id="map">
</div>
</body>
</html>
マップをクリックするだけで円を描くことはできますか？ –