Question

上午：

我在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);

这是我试图实现的代码，以获得Radius和米：

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

Answer 1

我解决了。这是我的代码最后：

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 3中Circle的半径和米

1 个答案: