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>
相关推荐
Mr_Xuhhh36 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE：基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下，循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作