openlayer 测量

最新推荐文章于 2025-07-24 13:54:20 发布

原创

最新推荐文章于 2025-07-24 13:54:20 发布 · 780 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#openlayer 测量长度和面积

这篇博客介绍了如何使用OpenLayers库实现地图上的长度和面积测量功能。用户可以在地图上选择点来测量线段长度和多边形面积。计算基于几何球形长度和面积，但可能与实地测量有所不同，尤其是在Web Mercator投影中。博客提供了完整的HTML和JavaScript代码示例，展示了如何创建交互式的测量工具。

测量

可以对地图进行操作，用户手动选择几个点，侧面积和测长度

该getLength()和getArea()功能计算几何球形长度和面积。通过假设几何坐标之间的大圆段来计算长度。计算面积，就好像多边形的边是大圆段一样。

请注意，geometry.getLength()和geometry.getArea()方法返回投影（平面）几何的度量。这些可能与某些情况下的实地测量非常不同 - 例如在使用Web Mercator的北部和南部纬度。为获得更好的结果，请使用ol/sphere模块中的功能。

<!DOCTYPE html><html>

  <head>

    <title>Measure</title>

    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">

    

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <style>

      .tooltip {

        position: relative;

        background: rgba(0, 0, 0, 0.5);

        border-radius: 4px;

        color: white;

        padding: 4px 8px;

        opacity: 0.7;

        white-space: nowrap;

      }

      .tooltip-measure {

        opacity: 1;

        font-weight: bold;

      }

      .tooltip-static {

        background-color: #ffcc33;

        color: black;

        border: 1px solid white;

      }

      .tooltip-measure:before,

      .tooltip-static:before {

        border-top: 6px solid rgba(0, 0, 0, 0.5);

        border-right: 6px solid transparent;

        border-left: 6px solid transparent;

        content: "";

        position: absolute;

        bottom: -6px;

        margin-left: -7px;

        left: 50%;

      }

      .tooltip-static:before {

        border-top-color: #ffcc33;

      }    </style>

  </head>

  <body>

    <div id="map" class="map"></div>

    <form class="form-inline">

      <label>Measurement type </label>

      <select id="type">

        <option value="length">Length (LineString)</option>

        <option value="area">Area (Polygon)</option>

      </select>

    </form>

    <script>

      import Map from 'ol/Map.js';

      import { unByKey} from 'ol/Observable.js';

      import Overlay from 'ol/Overlay.js';

      import { getArea, getLength} from 'ol/sphere.js';

      import View from 'ol/View.js';

      import { LineString, Polygon