openlayers 绘图功能，编辑多边形，select，snap组件的使用（六）

无心使然2024-06-13 20:21

本篇介绍一下vue3-openlayers的select，snap的使用

1 需求

  • 点击开始绘制按钮开始绘制多边形，可以连续绘制多个多边形
  • 点击撤销上步按钮，撤销上一步绘制点
  • 绘制多个多边形（或编辑多边形时），鼠标靠近之前的已绘制完的多边形顶点时，自动吸附
  • 点击结束绘制按钮，绘制完成，点击高亮选中多边形，开启编辑模式，显示顶点（调节点）进行编辑

2 分析

主要是vue3-openlayers 中 draw，select，snap，modify 功能的使用

3 实现

3.1 简单实现

javascript 复制代码 
<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>
      <ol-source-vector :projection="projection" :wrapX="false">
        <ol-interaction-draw
          ref="drawRef"
          :type="'Polygon'"
          :source="source"
          @drawend="drawend"
          @drawstart="drawstart"
        >
          <ol-style :overrideStyleFunction="handleStyleFunction"> </ol-style>
        </ol-interaction-draw>
        <ol-interaction-modify
          ref="modifyRef"
					v-if="modifyFlag"
          :features="selectedFeatures"
          :pixelTolerance="10"
          :insertVertexCondition="handleInsertVertexCondition"
          @modifyend="handleModifyEnd"
        >
          <ol-style :overrideStyleFunction="handleModifyStyleFunction"> </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>
  </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 } from 'ol/style';
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 drawFlag = ref(false);
const modifyFlag = ref(true);
const selectConditions = inject('ol-selectconditions');

const selectCondition = selectConditions.click;

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());
};

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();
};
const handleCancelClick = () => {
  drawRef.value.draw.removeLastPoint();
};

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, currentStyle: Style) => {
  const geometry = feature.getGeometry();
  const coord = geometry.getCoordinates();
  const type = geometry.getType();
  const styles: Array<Style> = [];
  if (type === 'LineString') {
    for (let i = 0; i < coord.length - 1; i++) {
      styles.push(
        new Style({
          geometry: new LineString([coord[i], coord[i + 1]]),
          stroke: new Stroke({
            color: 'orange',
            lineDash: coord.length > 2 && i < coord.length - 2 ? [] : [10],
            width: 2
          })
        })
      );
    }
  }
  return styles;
};

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

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

  return style;
};

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;
};
</script>
<style scoped lang="scss">
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
}
</style>

存在问题（vue3-openlayers官网modify示例也存在这两个个问题）：

  • 当绘制多个多边形时，只要一个多边形被编辑过，当编辑其他多边形时，尽管高亮选中的是当前多边形，但是之前编辑过的多边形也可以被编辑
  • 当两个多边形顶点重叠时，无法再分开，会导致同时编辑两个多边形

分析： modify组件没有仅仅使用当前选中的多边形，而是把select过的都进入编辑状态（其实原生写法也有这个问题，试着把modify传入的features参数绑定值从select.value.getFeatures()改为一个ref(new Collection()),在select组件的select事件中把选中的feature压入这个ref,既可以复现上面两个问题）

解决： modify添加v-if,强制重新渲染（会导致snap不会吸附，个人觉得可以接受）

3.2 重新实现

javascript 复制代码 
<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>
      <ol-source-vector :projection="projection" :wrapX="false">
        <ol-interaction-draw
          ref="drawRef"
          :type="'Polygon'"
          :source="source"
          @drawend="drawend"
          @drawstart="drawstart"
        >
          <ol-style :overrideStyleFunction="handleStyleFunction"> </ol-style>
        </ol-interaction-draw>
        <ol-interaction-modify
          ref="modifyRef"
					v-if="modifyFlag"
          :features="selectedFeatures"
          :pixelTolerance="10"
          :insertVertexCondition="handleInsertVertexCondition"
          @modifyend="handleModifyEnd"
        >
          <ol-style :overrideStyleFunction="handleModifyStyleFunction"> </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>
  </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 } from 'ol/style';
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 drawFlag = ref(false);
const modifyFlag = ref(false);
const selectConditions = inject('ol-selectconditions');

const selectCondition = selectConditions.click;

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());
};

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();
};
const handleCancelClick = () => {
  drawRef.value.draw.removeLastPoint();
};

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, currentStyle: Style) => {
  const geometry = feature.getGeometry();
  const coord = geometry.getCoordinates();
  const type = geometry.getType();
  const styles: Array<Style> = [];
  if (type === 'LineString') {
    for (let i = 0; i < coord.length - 1; i++) {
      styles.push(
        new Style({
          geometry: new LineString([coord[i], coord[i + 1]]),
          stroke: new Stroke({
            color: 'orange',
            lineDash: coord.length > 2 && i < coord.length - 2 ? [] : [10],
            width: 2
          })
        })
      );
    }
  }
  return styles;
};

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

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

  return style;
};

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;
};
</script>
<style scoped lang="scss">
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
}
</style>
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1：npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play