openlayer测量角度、测量面积、测量长度，直接可以使用，非常完全。

最新推荐文章于 2024-02-06 16:09:21 发布

林强181

最新推荐文章于 2024-02-06 16:09:21 发布

阅读量521

点赞数

本文链接：https://blog.csdn.net/qlin_11/article/details/115543452

版权

openlayer测量角度、测量面积、测量长度
代码基于https://blog.csdn.net/qq_39262215/article/details/109214946
增加角度测量功能，并对提示进行修改，依赖直接修改成两个。可直接显示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="./ol/ol.js"></script>
    <!-- <link href="E:/Test_Release/gis/ol/ol.css" rel="stylesheet" /> -->
    <script src="./jquery/jquery.min-1.9.1.js"></script>
    <!-- <link href="E:/Test_Release/gis/ol/bootstrap.min.css" rel="stylesheet" /> -->
    <!-- <script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script> -->
    <!-- <script src="E:/Test_Release/gis/ol/bootstrap-3.3.7.min.js"></script> -->
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <style type="text/css">
          #map {
            width: 100%;
            height: 100%;
            position: absolute;
          }

          #menu {
            float: left;
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 2000;
          }

          .checkbox {
            left: 20px;
          }
          /**
        * 提示框的样式信息
        */
          .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: #ffffff;
            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: #ffffff;
          }

          #scalebar {
            float: left;
            margin-bottom: 10px;
          }
        </style>
        <script type="text/javascript">
          var map;
          var vector;
          // 清理
          function clearMeasure() {
            vector.getSource().clear();
            $("div.tooltip-static").remove();
          }
         
          function measureMethod(map, vector) {
            //定义矢量数据源
            var source = new ol.source.Vector();
            //定义矢量图层
            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: "#e21e0a",
                  width: 2,
                }),
                image: new ol.style.Circle({
                  radius: 5,
                  fill: new ol.style.Fill({
                    color: "#ffcc33",
                  }),
                }),
              }),
            });
            //将矢量图层添加到地图中
            map.addLayer(vector);
            //获取类型
            var typeSelect = document.getElementById("type");
            //添加比例尺控件
            var scaleLineControl = new ol.control.ScaleLine({
              units: "metric",
              target: "scalebar",
              className: "ol-scale-line",
            });
            map.addControl(scaleLineControl);

            //创建一个WGS84球体对象
            var wgs84Sphere = new ol.Sphere(6378137);
            //创建一个当前要绘制的对象
            var sketch = new ol.Feature();
            //创建一个帮助提示框对象
            var helpTooltipElement;
            //创建一个帮助提示信息对象
            var helpTooltip;
            //创建一个测量提示框对象
            var measureTooltipElement;
            //创建一个测量提示信息对象
            var measureTooltip;
            //继续绘制多边形的提示信息
            var continuePolygonMsg = "Click to continue drawing the polygon";
            //继续绘制线段的提示信息
            var continueLineMsg = "Click to continue drawing the line";

            //鼠标移动触发的函数
            var pointerMoveHandler = function (evt) {
              //Indicates if the map is currently being dragged.
              //Only set for POINTERDRAG and POINTE

最低0.47元/天解锁文章

林强181

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayer测量角度、测量面积、测量长度，直接可以使用，非常完全。

openlayer测量角度、测量面积、测量长度代码基于https://blog.csdn.net/qq_39262215/article/details/109214946增加角度测量功能，并对提示进行修改，依赖直接修改成两个。可直接显示。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content
复制链接

扫一扫