直接修改要素

核心代码：

    // 修改要素核心代码modifyFeature() {this.modify = new Modify({source: this.lineStringLayer.getSource(),});this.map.addInteraction(this.modify);},

完整代码：

<template><div id="map" style="height: 100vh; width: 100vw"></div>
</template><script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default {data() {return {map: {},lineStringLayer: {},modify: {},};},created() {},mounted() {this.initMap();this.addLayer();this.modifyFeature();},computed: {},methods: {initMap() {this.map = new Map({target: "map",layers: [new TileLayer({source: new OSM(),}),],view: new View({projection: "EPSG:4326",center: [104.2979180563, 30.528298024],zoom: 18,}),});},addLayer() {this.lineStringLayer = new VectorLayer({source: new VectorSource(),});this.lineStringLayer.getSource().addFeature(new Feature({geometry: new LineString([[104.2979180563, 30.528298024],[104.2987389704, 30.527798338],]),}));this.map.addLayer(this.lineStringLayer);},// 修改要素核心代码modifyFeature() {this.modify = new Modify({source: this.lineStringLayer.getSource(), //这里要用source});this.map.addInteraction(this.modify);},},
};
</script>

此外，可通过this.modify.setActive(false)来禁用modify对象，this.modify.getActive()获取激活状态

js封装修改功能

ModifyTool.js:

import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource, XYZ } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default class ModifyTool {constructor({ domId_map }) {this.domId_map = domId_mapthis.map = nullthis.source = new VectorSource()this.lineStringLayer = nullthis.modify = null}initMap() {this.map = new Map({target: this.domId_map,layers: [new TileLayer({source: new XYZ({url:"http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",}),visible: true,// name: "OSM",}),],view: new View({projection: "EPSG:4326",center: [115, 39],zoom: 4,}),})this.addLayer()}addLayer() {this.source.addFeature(new Feature({geometry: new LineString([[104.2979180563, 30.528298024],[114.2987389704, 30.527798338],]),}))this.lineStringLayer = new VectorLayer({source: this.source,});this.map.addLayer(this.lineStringLayer);}// 修改要素核心代码modifyFeature() {if (this.modify) {this.map.removeInteraction(this.modify);}this.modify = new Modify({source: this.lineStringLayer.getSource(), //这里要用source});this.map.addInteraction(this.modify);}// 取消修改cancelModify() {this.map.removeInteraction(this.modify);}
}

测试：

<template><div class="main"><el-button @click="state.modify.modifyFeature()">开始修改</el-button><el-button @click="state.modify.cancelModify()">取消修改</el-button><div id="olContainer" style="height: 100vh; width: 100vw"></div></div></template><script setup>
import { reactive } from 'vue';
import ModifyTool from './ModifyTool'const state = reactive({modify: null
})
onMounted(() => {let modify = new ModifyTool({ domId_map: 'olContainer' })modify.initMap()state.modify = modify
})
</script>
<style lang="scss" scoped>
.main {position: relative;height: 100vh;width: 100vw;#olContainer {position: absolute;height: 100vh;width: 100vw;}}
</style>

先选中要素，再修改要素

核心代码：

注意：这里一定要用features属性，不要用source！！！！

    modifyFeature() {this.modify = new Modify({//注意：这里一定要用features属性，不要用source！！！！features: this.select.getFeatures(),});this.map.addInteraction(this.modify);},

完整代码：

<template><div id="map" style="height: 100vh; width: 100vw"></div>
</template><script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource, XYZ } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";import Select from "ol/interaction/Select";import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default {data() {return {map: {},lineStringLayer: {},draw: {},modify: {},select: {},};},created() {},mounted() {this.initMap();this.pointerMove();this.addLayer();this.selectFeature();this.modifyFeature();},computed: {},methods: {initMap() {this.map = new Map({target: "map",layers: [new TileLayer({source: new OSM(),}),],view: new View({projection: "EPSG:4326",center: [104.2979180563, 30.528298024],zoom: 18,}),});},pointerMove() {this.map.on("pointermove", (e) => {const isHover = this.map.hasFeatureAtPixel(e.pixel);this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";});},addLayer() {this.lineStringLayer = new VectorLayer({source: new VectorSource(),});this.lineStringLayer.getSource().addFeature(new Feature({geometry: new LineString([[104.2979180563, 30.528298024],[104.2987389704, 30.527798338],]),}));this.map.addLayer(this.lineStringLayer);},selectFeature() {this.select = new Select();this.map.addInteraction(this.select);},modifyFeature() {this.modify = new Modify({//注意：这里一定要用features属性，不要用source！！！！features: this.select.getFeatures(),});this.map.addInteraction(this.modify);},},
};
</script>

Vue2+Openlayer使用modify修改要素相关推荐

sql语句中change和modify修改语法的区别
sql语句中modify和change都有修改.改变的意思,那么在使用中,它们的区别主要在哪里呢? 1.不同点: 均可用于alter语句中,修改字段属性: 2.相同点: 主要有2点区别 (1)modi ...
c语言void modify,修改C语言（Modify the C language）.doc
修改C语言(Modify the C language) 修改C语言(Modify the C language) # includes stdio.h > < # includes st ...
ArcMap DayDreamInGIS 数据处理工具（裁剪工具/字段修改/要素合并/属性筛选/空间连接）版本更新说明
下载地址见百度网盘,请大家下载使用最新版本链接:https://pan.baidu.com/s/1ZSCxKrm3c4TReoxzJHdYOA 提取码:vwgh ----------------- ...
DayDreamInGIS ArcGIS-AddIn 数据处理工具使用说明（裁剪工具/字段修改/要素合并/属性筛选/空间连接）
基于ArcGIS-AddIn技术,利用业余时间,开发了一些数据处理过程中的常用工具集. 支持版本:ArcGIS 10.3及以上版本,直接双击安装即可.较早的版本为ArcGIS 10.1,有些细节问题, ...
开源GIS（五）——openlayers中interaction的select、draw与modify
目录一.引言二.interaction中select选取feature 三.interaction中draw与modify修改feature 四.总结一.引言 gis中最基础的就是空间查询,鼠标 ...
OpenLayer3通过wfs修改Geoserver中图层要素，并出现图层只读问题解决（is read-only/ows:ExceptionText）
最近在学习OpenLayer教程,通过OpenLayer加载geoserver中图层,其中遇到的问题并解决在此做下记录: 一.参考文件: 1.学习的教程为'扯淡大叔'的OpenLayer教程,非常好, ...
ArcMap：选择一个可编辑的要素进行修改
遇到的问题:ArcMap修改要素时,在编辑器工具条上点击开始编辑,选中要素后单击编辑折点(或双击要素)后无反应,即没有弹出折点编辑工具条,并显示需要选择一个可编辑的要素进行修改(如图). 解决办法:在 ...
【学习笔记之Openlayers3】要素绘制篇（第三篇）
直接以项目实例来进行讲解要素绘制需求(假如): 1.实现在地图上画点线面功能 2.自定义其样式 3.支持编辑功能需要用到的openlayers3中的ol.interaction.Draw 类.这是 ...
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了,现在终于可以通过ol3加载配置好的数据了.上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下: 1.加载Geoserver发布的wfs地图服 ...

Vue2+Openlayer使用modify修改要素

直接修改要素

js封装修改功能

先选中要素，再修改要素

Vue2+Openlayer使用modify修改要素相关推荐

最新文章

热门文章