半径和从OpenLayer一个Circle 3

问题描述：

我有一个代码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]); 
}

答

我解决这个问题。这是我的代码最后：

Radius: <span id="radius" >xxx</span> <span id="einheit">Meter</span> 
<div id="map" class="map"></div> 

<script type="text/javascript"> 


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: [ 
    // Add a new Tile layer getting tiles from OpenStreetMap source 
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 

        //source: new ol.source.OSM({ 
        //crossOrigin: null, 
        //url: 'http://34.240.39.198/osm_tiles/{z}/{x}/{y}.png', 
        //}), 
    }), 
    vector 
], 
    // Create a view centered on the specified location and zoom level 
    view: new ol.View({ 
    center: ol.proj.transform([-3.7521286, 40.3805319], 'EPSG:4326', 'EPSG:3857'), 
    zoom: 7, 

    }), 
    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); 

this.draw.on('drawend', function(evt){ 
var geometry = evt.feature.getGeometry(); 
var radius = geometry.getRadius(); 
var center = geometry.getCenter(); 

if (radius > 1000) { 
    laenge = radius/1000; 
    einheit = "km"; 
} else { 
    laenge = radius; 
    einheit = "m"; 
} 

//var len = Math.round(radius.getLength()).toString(); 

document.getElementById("radius").innerHTML = laenge; 
document.getElementById("einheit").innerHTML = einheit; 



}); 


} 

addInteraction(); 
</script>

半径和从OpenLayer一个Circle 3

相关推荐