openlayers 绘图功能，编辑多边形，长度面积测量，tip提示（八）

于 2024-06-17 16:50:05 发布
阅读量829 收藏 5
点赞数 31
分类专栏： openlayers vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56624286/article/details/139748552
版权

本篇介绍一下使用vue3-openlayers添加tips，比如测量时，实时显示长度、面积等，两种方法：

  1. 使用Overlay，会添加指定的HTML元素到dom中，会跟随地图的平移】缩放等动作
  2. 使用vector样式，会渲染到地图的canvas中，会跟随地图的平移】缩放等动作
    推荐第2种，与地图无缝集成，实现简单

1 需求

  • 基础多边形绘制，编辑功能
  • 绘制编辑时跟随鼠标给出提示
  • 多边形的边显示长度，中心显示面积

2 分析

主要是 vue3-openlayers 中 styleFunc 功能的使用

3 实现

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
    ref="mapRef"
  >
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
    />
    <ol-vector-layer ref="vectorRef">
      <ol-source-vector :projection="projection" :wrapX="false">
        <ol-interaction-draw
          ref="drawRef"
          :type="'Polygon'"
          :source="source"
          @drawend="drawend"
          @drawstart="drawstart"
        >
          <ol-style
            :overrideStyleFunction="
              feature => handleStyleFunction(feature, showLength, showArea, tips)
            "
          >
          </ol-style>
        </ol-interaction-draw>
        <ol-interaction-modify
          ref="modifyRef"
          v-if="modifyFlag"
          :features="selectedFeatures"
          :pixelTolerance="10"
          :insertVertexCondition="handleInsertVertexCondition"
          @modifyend="handleModifyEnd"
        >
          <ol-style
            :overrideStyleFunction="
              feature => handleModifyStyleFunction(feature, showLength, showArea)
            "
          >
          </ol-style>
        </ol-interaction-modify>
        <ol-interaction-snap :edge="false" />
      </ol-source-vector>
      <ol-style :overrideStyleFunction="styleFunction"> </ol-style>
    </ol-vector-layer>
    <ol-interaction-select
      ref="selectRef"
      :features="selectedFeatures"
      @select="handleSelect"
      :condition="selectCondition"
    >
      <ol-style :overrideStyleFunction="selectStyleFunc"> </ol-style>
    </ol-interaction-select>
  </ol-map>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ drawFlag ? '结束' : '开始' }}绘制</el-button>
    <el-button type="warning" :disabled="!drawFlag" @click="handleCancelClick">撤销上步</el-button>
    <el-button type="success" @click="handleShowDataClick(true)"
      >{{ showLength ? '隐藏' : '显示' }}边长</el-button
    >
    <el-button type="success" @click="handleShowDataClick(false)"
      >{{ showArea ? '隐藏' : '显示' }}面积</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { Collection } from 'ol';
import { FeatureLike } from 'ol/Feature';
import { LineString, Point } from 'ol/geom';
import { DrawEvent } from 'ol/interaction/Draw';
import { Circle, Fill, Stroke, Style, RegularShape, Text } from 'ol/style';
import { getArea, getLength } from 'ol/sphere.js';
import { start } from 'nprogress';

const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const features = ref(new Collection()); //保存绘制的features
const selectedFeatures = ref(new Collection()); //选中的features
const source = ref([]);
const mapRef = ref();
const drawRef = ref();
const selectRef = ref();
const modifyRef = ref();
const vectorRef = ref();
const drawFlag = ref(false);
const modifyFlag = ref(false);
const selectConditions = inject('ol-selectconditions');
const showLength = ref(false);
const showArea = ref(false);
const tips = ref('');

const selectCondition = selectConditions.click;

const startTip = '点击鼠标定位第一个顶点';

const labelStyle = new Style({
  text: new Text({
    font: '14px Microsoft YaHei',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)'
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.7)'
    }),
    padding: [3, 3, 3, 3],
    textBaseline: 'bottom',
    offsetY: -15
  }),
  image: new RegularShape({
    radius: 8,
    points: 3,
    angle: Math.PI,
    displacement: [0, 10],
    fill: new Fill({
      color: 'rgba(0, 0, 0, 0.7)'
    })
  })
});

const tipStyle = new Style({
  text: new Text({
    font: '12px Microsoft YaHei',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)'
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.5)'
    }),
    padding: [2, 2, 2, 2],
    textAlign: 'left',
    offsetX: 15
  })
});

const modifyStyle = new Style({
  image: new Circle({
    radius: 5,
    stroke: new Stroke({
      color: 'rgba(255, 255, 255, 0.4)'
    }),
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.4)'
    })
  }),
  text: new Text({
    text: '拖动顶点进行修改',
    font: '12px Microsoft YaHei',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)'
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.7)'
    }),
    padding: [5, 5, 5, 5],
    textAlign: 'left',
    offsetX: 15
  })
});

const edgeStyle = new Style({
  text: new Text({
    font: '12px Microsoft YaHei',
    fill: new Fill({
      color: 'rgba(255, 255, 255, 1)'
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.4)'
    }),
    padding: [2, 2, 2, 2],
    textBaseline: 'bottom',
    offsetY: -12
  }),
  image: new RegularShape({
    radius: 6,
    points: 3,
    angle: Math.PI,
    displacement: [0, 8],
    fill: new Fill({
      color: 'rgba(0, 0, 0, 0.4)'
    })
  })
});

onMounted(() => {
  drawRef.value.draw.setActive(false);
  // modifyRef.value.modify.setActive(false);
});

const drawstart = (event: Event) => {
  console.log(event);
};

const drawend = (event: DrawEvent) => {
  console.log(event.feature.getGeometry());
  tips.value = startTip;

};

const handleClick = () => {
  drawFlag.value = !drawFlag.value;
  drawRef.value.draw.setActive(drawFlag.value);
  modifyFlag.value = !drawFlag.value;
  // modifyRef.value.modify.setActive(!drawFlag.value);
  selectRef.value.select.setActive(!drawFlag.value);
  selectRef.value.select.getFeatures().clear();
	tips.value = startTip;
};
const handleCancelClick = () => {
  drawRef.value.draw.removeLastPoint();
};

const handleShowDataClick = isLength => {
  if (isLength) {
    showLength.value = !showLength.value;
  } else {
    showArea.value = !showArea.value;
  }
  drawRef.value.draw.getOverlay().changed();
  vectorRef.value.vectorLayer.changed();
};

const handleSelect = e => {
  // modifyRef.value.modify.setActive(false);
  modifyFlag.value = false;
  if (!e.selected.length) {
    selectedFeatures.value.clear();
    selectRef.value.select.getFeatures().clear();
  } else {
    nextTick(() => {
      modifyFlag.value = true;
      // modifyRef.value?.modify.setActive(true);
      selectedFeatures.value = e.target.getFeatures();
    });
  }
};

const handleStyleFunction = (feature: FeatureLike, showLength, showArea, tip) => {
  const styles: Array<Style> = [];
  const geometry = feature.getGeometry();
  const type = geometry.getType();
  const coord = geometry.getCoordinates();
  const tStyle = tipStyle.clone();
  if (type === 'LineString') {
    for (let i = 0; i < coord.length - 1; i++) {
      const line = new LineString([coord[i], coord[i + 1]]);
      const label = formatLength(line);
      const point = new Point(line.getCoordinateAt(0.5));
      const style = edgeStyle.clone();
      style.setGeometry(point);
      style.getText().setText(label);
      if (showLength) {
        styles.push(style);
      }
      styles.push(
        new Style({
          geometry: line,
          stroke: new Stroke({
            color: 'orange',
            lineDash: coord.length > 2 && i < coord.length - 2 ? [] : [10],
            width: 2
          })
        })
      );
    }
    const point = new Point(geometry.getLastCoordinate());
    tStyle.setGeometry(point);
    if (coord.length <= 3) {
      tips.value = '继续定位顶点';
    } else if (coord.length > 3) {
      tips.value = '点击第一个点可结束绘制';
    }
  }
  if (type === 'Polygon') {
    if (showArea) {
      const label = formatArea(geometry);
      const point = geometry.getInteriorPoint();
      const style = labelStyle.clone();
      style.setGeometry(point);
      style.getText().setText(label);
      styles.push(style);
    }
  }
  tStyle.getText().setText(tip);
  styles.push(tStyle);
  return styles;
};

const handleInsertVertexCondition = e => {
  return false;
};

const handleModifyStyleFunction = (feature: FeatureLike, showLength, showArea) => {
  const layer = mapRef.value.map.getLayers().item(0);
  const features = layer.getSource().getFeatures();
  const geometry = feature.getGeometry();
  const coord = geometry.getCoordinates();
  const type = geometry.getType();
  const coords = features.map(feature => feature.getGeometry().getCoordinates()).flat(2);
  let styles = [];
  // 只有鼠标在顶点时才能触发编辑功能
  if (coords.find(c => c.toString() === coord.toString())) {
    styles.push(
      new Style({
        geometry: new Point(coord),
        image: new Circle({
          radius: 6,
          fill: new Fill({
            color: '#ffff'
          }),
          stroke: new Stroke({
            color: 'red',
            width: 2
          })
        })
      }),
      modifyStyle
    );
  }

  if (type === 'Point') {
    const feature = selectedFeatures.value.getArray()[0];
    const geometry = feature.getGeometry();
    const coord = feature.getGeometry().getCoordinates()[0];
    if (showLength) {
      for (let i = 0; i < coord.length - 1; i++) {
        const line = new LineString([coord[i], coord[i + 1]]);
        const label = formatLength(line);
        const point = new Point(line.getCoordinateAt(0.5));
        const style = edgeStyle.clone();
        style.setGeometry(point);
        style.getText().setText(label);
        styles.push(style);
      }
    }
    if (showArea) {
      const label = formatArea(geometry);
      const point = geometry.getInteriorPoint();
      const style = labelStyle.clone();
      style.setGeometry(point);
      style.getText().setText(label);
      styles.push(style);
    }
  }

  return styles;
};

const handleModifyEnd = e => {
  features.value.push(e.feature); //这里可以把编辑后的feature添加到layer绑定的features中
  console.log('modifyend', e.features);
};

const styleFunction = (feature: FeatureLike, currentStyle: Style) => {
  const styles = [];
  styles.push(
    new Style({
      fill: new Fill({
        color: [128, 128, 255, 0.5]
      }),
      stroke: new Stroke({
        color: 'blue',
        width: 2
      })
    })
  );
  return styles;
};

const selectStyleFunc = feature => {
  const styles = [];
  const coord = feature.getGeometry().getCoordinates().flat(1);
  for (let i = 0; i < coord.length - 1; i++) {
    styles.push(
      new Style({
        geometry: new Point(coord[i]),
        image: new Circle({
          radius: 4,
          fill: new Fill({
            color: '#ffff'
          }),
          stroke: new Stroke({
            color: 'orange',
            width: 2
          })
        })
      })
    );
  }
  styles.push(
    new Style({
      stroke: new Stroke({
        color: 'orange',
        width: 2
      }),
      fill: new Fill({
        color: '#ffff'
      })
    })
  );
  return styles;
};

const formatArea = polygon => {
  const area = getArea(polygon, { projection: 'EPSG:4326' });
  let output; //根据面积大小实时换算成平方千米
  if (area > 10000) {
    //平方千米
    output = Math.round((area / 1000000) * 100) / 100 + ' km\xB2';
  } else {
    //平方米
    output = Math.round(area * 100) / 100 + ' m\xB2';
  }
  return output;
};

const formatLength = line => {
  const length = getLength(line, { projection: 'EPSG:4326' });
  let output; //根据面积大小实时换算成平方千米
  if (length > 100) {
    output = Math.round((length / 1000) * 100) / 100 + ' km';
  } else {
    output = Math.round(length * 100) / 100 + ' m';
  }
  return output;
};
</script>
<style scoped lang="scss">
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
}
</style>

4 问题

  • 跟随鼠标的tip背景会加深
  • 鼠标tip会有重复
无心使然云中漫步
关注
  • 31
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openLayer 画笔测量面积，可连续绘制多个多边形并计算和显示面积，每个多边形面积文本居中显示
zhushanlin的博客
05-22 39
【代码】openLayer 画笔测量面积，可连续绘制多个多边形并计算和显示面积，每个多边形面积文本居中显示。
在地图上基于OpenLayers实现点/线/面静态的绘制显示
nanke_yh的博客
12-08 4324
在做GIS相关的工作过程中，是离不开矢量的数据的。矢量作为最基础的数据形式，一般通用在各个项目中。在导航软件开发或者应用中，点/线/面的标记，标绘，显示等都是不可缺少的。本文主要是来介绍在地图上基于OpenLayers实现点/线/面静态的绘制显示方法。
openlayers入门开发系列之地图标绘篇
weixin_33946020的博客
11-11 3367
本篇的重点内容是利用openlayers实现地图标绘功能，效果图如下： 实现思路： 标绘界面设计以及标绘面板控制  &lt;!-- 标绘面板 --&gt; &lt;div style="position:absolute;right:180px;top:80px;display:none;" id="map_toolbar_plot"&gt; &lt;ul class="...
openlayers对矢量图（多边形） 的增删改查
07-24
openlayers对矢量图（多边形） 的增删改查，三角形、矩形、五边形，你想几边就几边；添加、删除矢量图，修改矢量图，旋转、平移、拉伸
openlayers 绘图功能，编辑多边形，长度面积测量，tip提示（七）
最新发布
无心使然云中漫步
06-14 461
主要是 openlayers 中 styleFunc 功能的使用，效果如下。
openlayers 绘图功能，编辑多边形，modify组件的使用（三）
无心使然云中漫步
06-12 677
前两篇介绍了 openlayers 中 draw 的使用，自定义了绘制中和绘制结束后的样式，绘制结束后可以获取到绘制图形的featue或者进一步获取轮廓坐标(如下)，可以进行坐标保存或者将feature添加到其他层进一步自定义显示本篇介绍一下编辑工具 modify。
OpenLayer学习之绘图与在线编辑
weixin_30477293的博客
06-30 276
有时候找到真正想要的真的很难，凡事岂能两全，唉，你又能如何确定那个选择才是对的。开车开车，今天写的是将绘制几何图形和修改几何图形综合的一块。主要用到的是ol.interaction.Draw、ol.interaction.Select、ol.interaction.Modify三个交互。 一、绘图函数封装 function Draw() { var v...
Openlayers实现距离面积测量
10-14
在OpenLayers中，实现距离和面积的测量是地图应用中常见的功能，这有助于用户了解地图上特定区域的尺寸。OpenLayers是一个强大的JavaScript库，用于在Web浏览器中展示和操作地理空间数据。以下是如何使用OpenLayers...
Openlayers测量距离与面积的实现方法
10-14
在OpenLayers中实现地图测量距离和面积的功能，主要包括以下几个关键步骤和知识点： 1. **引入必要的库**：首先，你需要引入OpenLayers库（ol.js和ol.css）以及其他可能需要的库，如jQuery和Bootstrap，这些库提供...
基于openlayers实现角度测量功能
10-14
然而，尽管OpenLayers官方提供的测量功能包括了长度测量，但默认并不包含角度测量。为了在地图上实现角度测量，我们需要自定义功能来完成这一任务。本文将详细探讨如何基于OpenLayers实现这一功能。 首先，我们要...
Openlayers实现测量功能
10-14
在OpenLayers中实现测量功能，主要是为用户提供在地图上进行距离和面积测量的工具。OpenLayers是一个开源JavaScript库，用于创建交互式地图应用。通过它，我们可以利用WebGL、SVG和Canvas等技术来显示和操作地理空间...
OpenLayers3实现测量功能
10-14
主要为大家详细介绍了OpenLayers3实现测量功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
qq_39404437的博客
11-23 9166
openlayers6 下的点、线、圆形、矩形、多边形的绘制与编辑
openlayer地图裁切
qq_34447899的博客
07-22 2262
在使用openlayer开发地图应用时，可能会要求根据只显示某个范围内的底图或数据，这个功能写起来还是比较简单的。只需要用到一点canvas的知识就可以。
openlayers根据feature进行裁切（低版本）
冰雪为融的博客
02-16 413
openlayers根据feature进行裁切（低版本）
openlayers：实现图层裁剪（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 133
openlayers：实现图层裁剪（附完整源码）
OpenLayers实战，OpenLayers画线测量距离和画多边形测量区域面积
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-09 816
本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。本章代码就是通过OpenLayers的图形绘制功能，通过监听绘制事件获取绘制的图形，并进行计算，就可以得到长度和面积。日常开发中比较常用，所以不废话，立刻开始实现。
openlayers 实现底图切割
韩瑜的博客
03-15 1021
定义需要被切割的图层： const base = new Tile({ source: new XYZ({ url: 'xxx' //地图服务地址 }), }) 定义执行切割的图层： （cutGeoJson为边界线geojson） const clipLayer = new VectorLayer({ style: null, source: new VectorSource({ features: new GeoJSON().readFeatures(cutGeoJson) }) }
vue+openlayers面积测量
12-02
在Vue中使用OpenLayers进行面积测量，可以通过以下步骤实现： 1. 首先，在Vue项目中，安装OpenLayers库。可以通过运行以下命令进行安装： ``` npm install ol ``` 2. 在Vue组件中引入OpenLayers库，可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值