0
我有一個代碼OpenLayer 3中，畫一個圓。我想獲得Radius和Meter。我在OpenLayer 2中添加了一個代碼。但是，我有些事情我無法「翻譯」或「適應」OpenLayer3。
它是顯示了一圈代碼：
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var map = new ol.Map({
controls: ol.control.defaults({
attributionOptions: /** @type
{olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
target: 'map', // The DOM element that will contains the map
renderer: 'canvas', // Force the renderer to Rbe used
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.transform([-3.7521286, 40.3805319], 'EPSG:4326', 'EPSG:3857'),
zoom: 7,
maxZoom: 15,
}),
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
])
});
var draw; // global so we can remove it later
function addInteraction() {
var value = 'Circle';
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)
});
map.addInteraction(draw);
而且這是我試圖落實獲取半徑和米代碼：
polygonControl.handler.callbacks.move = function (e) {
var linearRing = new ol.geom.LinearRing(draw.components);
var geometry = new ol.geom.Polygon([linearRing]);
var polygonFeature = new ol.Feature.Vector(geometry, null);
var polybounds = polygonFeature.geom.getBounds();
var minX = polybounds.left;
var minY = polybounds.bottom;
var maxX = polybounds.right;
var maxY = polybounds.top;
//calculate the center coordinates
var startX = (minX + maxX)/2;
var startY = (minY + maxY)/2;
//make two points at center and at the edge
var startPoint = new ol.geom.Point(startX, startY);
var endPoint = new ol.geom.Point(maxX, startY);
var radius = new ol.geom.LineString([startPoint, endPoint]);
var len = Math.round(radius.getLength()).toString();
var laenge;
if (len > 1000) {
laenge = len/1000;
einheit = "km";
} else {
laenge = len;
einheit = "m";
}
document.getElementById("radius").innerHTML = laenge;
document.getElementById("einheit").innerHTML = einheit;
}
draw.events.on({
'featureadded': function (e) {
// DRY-principle not applied
var f = e.feature;
//calculate the min/max coordinates of a circle
var minX = f.geometry.bounds.left;
var minY = f.geometry.bounds.bottom;
var maxX = f.geometry.bounds.right;
var maxY = f.geometry.bounds.top;
//calculate the center coordinates
var startX = (minX + maxX)/2;
var startY = (minY + maxY)/2;
//make two points at center and at the edge
var startPoint = new OpenLayers.Geometry.Point(startX, startY);
var endPoint = new OpenLayers.Geometry.Point(maxX, startY);
var radius = new OpenLayers.Geometry.LineString([startPoint, endPoint]);
//calculate length. WARNING! The EPSG:900913 lengths are meaningless except around the equator. Either use a local coordinate system like UTM, or geodesic calculations.
var len = Math.round(radius.getLength()).toString();
//style the radius
var punktstyle = {
strokeColor: "red",
strokeWidth: 2,
pointRadius: 5,
fillOpacity: 0.2
};
var style = {
strokeColor: "#0500bd",
strokeWidth: 3,
label: len + " m",
labelAlign: "left",
labelXOffset: "20",
labelYOffset: "10",
labelOutlineColor: "white",
labelOutlineWidth: 3
};
//add radius feature to radii layer
var punkt1 = new OpenLayers.Feature.Vector(startPoint, {
}, punktstyle);
var fea = new OpenLayers.Feature.Vector(radius, {
'length': len
}, style);
radiuslayer.addFeatures([punkt1, fea]);
}