学习OpenLayers（第七篇）：测量距离和面积(学习名言警句励志)(学习机排行榜十强)

访客 2023年07月13日 14:13 235 0
实现量测距离和面积
官方网站示例链接：https://openlayers.org/en/latest/examples/measure.html
1、初始化地图
var rootLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
    }) //加载谷歌影像地图
});

var view = new ol.View({
    center: [113, 23],
    projection: 'EPSG:3857',
    zoom: 10
});

var map = new ol.Map({
    layers: [rootLayer],
    target: 'map',
    view: view
});

// 2、初始化绘图方法 const type = typeSelect.value === 'area' ? 'Polygon' : 'LineString';
const draw = new ol.interaction.Draw({
  source: source,
  type: type
});
map.addInteraction(draw);

let listener;
draw.on('drawstart', function (evt) {
  // set sketch
  const sketch = evt.feature;
  
  listener = sketch.getGeometry().on('change', function (evt) {
    const geom = evt.target;
    let output;

    if (geom instanceof ol.geom.Polygon) {
      const p = geom.clone();
      const circleIn4326 = p. var formatArea = function (polygon) {
    var area = ol.sphere.getArea(polygon);
    var output;
    if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + ' km2';
    } else {
        output = Math.round(area * 100) / 100 + ' m2';
    }
    return output;
};

4、测量面积的方法
 var formatLength = function (line) {
    var length = ol.sphere.getLength(line);
    var output;
    if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' km';
    } else {
        output = Math.round(length * 100) / 100 + ' m';
    }
    return output;
}; 量距离
 
 量面积
 
 完整代码如下<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Draw Shapes</title>    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->    <script src="https://unpkg.com/elm-pep"></script>    <style>        .map {            width: 100%;            height: 400px;        }    </style>    <link rel="stylesheet" href="../../lib/openlayerv6.4.3/css/ol.css">    <script src="../../lib/openlayerv6.4.3/build/ol.js"></script></head><script>    var map;    var typeSelect;    var draw; // global so we can remove it later    var source;    function init() {        var rootLayer = new ol.layer.Tile({            source: new ol.source.XYZ({                url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'            }) //加载谷歌影像地图        });        var view = new ol.View({            center: [113, 23],            projection: 'EPSG:4326',            zoom: 10        });        map = new ol.Map({            layers: [rootLayer],            target: 'map',            view: view        });        source = new ol.source.Vector({wrapX: false});        var vector = new ol.layer.Vector({            source: source,        });        map.addLayer(vector);        typeSelect = document.getElementById('type');        /**         * Handle change event.         */        typeSelect.onchange = function () {            map.removeInteraction(draw);            addInteraction();        };        addInteraction();    }    var type;    var df;    var sketch;    function addInteraction() {        var type = typeSelect.value == 'area' ? 'Polygon' : 'LineString';        draw = new ol.interaction.Draw({            source: source,            type: type        });        map.addInteraction(draw);        var listener;        draw.on('drawstart', function (evt) {            // set sketch            sketch = evt.feature;            listener = sketch.getGeometry().on('change', function (evt) {                var geom = evt.target;                var output;                if (geom instanceof ol.geom.Polygon) {                    var p=geom.clone();                    var circleIn4326 = p.transform(map.getView().getProjection(),'EPSG:3857');                    output = formatArea(circleIn4326);                } else if (geom instanceof ol.geom.LineString) {                    var p=geom.clone();                    var circleIn4326 = p.transform(map.getView().getProjection(),'EPSG:3857');                    output = formatLength(circleIn4326);                }                document.getElementById('label').innerText=output;            });        });        draw.on('drawend', function () {            sketch = null;            ol.Observable.unByKey(listener);        });    }    /**     * Format area output.     * @param {Polygon} polygon The polygon.     * @return {string} Formatted area.     */    var formatArea = function (polygon) {        var area = ol.sphere.getArea(polygon);        var output;        if (area > 10000) {            output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';        } else {            output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';        }        return output;    };    var formatLength = function (line) {        var length = ol.sphere.getLength(line);        var output;        if (length > 100) {            output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';        } else {            output = Math.round(length * 100) / 100 + ' ' + 'm';        }        return output;    };</script><body οnlοad="init()"><div id="map" class="map"></div><form class="form-inline">    <label>Shape type &nbsp;</label>    <select id="type">        <option value="length">Length (LineString)</option>        <option value="area">Area (Polygon)</option>    </select></form><label id="label"></label></body></html>