OpenLayer4实现测量线及面积

最新推荐文章于 2025-04-14 22:27:24 发布

Curtains Down

最新推荐文章于 2025-04-14 22:27:24 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： javascript openlayer

本文链接：https://blog.youkuaiyun.com/qq_42248939/article/details/114736111

OpenLayer4实现测量线及面积

官方示例，直接复制即可运行，无需导包，看懂即可二次开发，但是要注意一个map不能加两个draw否则必报错，modify也不彳亍，切记切记。

<!DOCTYPE html>
<html>
  <head>
    <title>Measure</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></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 &nbsp;</label>
      <select id="type">
        <option value="length">Lengt