uniapp 整合 OpenLayers - 使用modify修改要素

最新推荐文章于 2025-02-20 11:29:57 发布

破z晓

最新推荐文章于 2025-02-20 11:29:57 发布

阅读量483

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/qq_19688207/article/details/143564508

import { Modify } from "ol/interaction";

修改点、线、面的位置和形状核心代码：

 // 修改要素核心代码
    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()获取激活状态

修改要素核心代码：

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