[openlayers03]——Modifying features

最新推荐文章于 2024-05-21 17:34:05 发布

Sheyueyu

最新推荐文章于 2024-05-21 17:34:05 发布

阅读量166

点赞数

分类专栏： openlayers webgis 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sheyueyu/article/details/128903300

版权

openlayers 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

webgis

7 篇文章 1 订阅

订阅专栏

Modifying features

1.说明

功能：实现让用户能编辑数据，使用Modify
Modifying features

结果展示

chrome-capture-2023-1-6

2. 步骤

导入Modify

import Modify from 'ol/interaction/Modify';

创建地图、设置矢量源并加入地图

// 下面用于确定地图中心 center
const center = [114.1692, 30.494]; //EPSG:4326
const transformedCenter = transform(center, 'EPSG:4326', 'EPSG:3857');
const view = new View({
  center: transformedCenter,
  zoom: 10
});

// 创建地图
const map = new Map({
    target: 'map',
    view: view
  });

// 1.矢量源
const source = new VectorSource({
  format: new GeoJSON(),
  url:'./data/hubei.geojson'
})

// 2. 用我们的矢量源创建一个新的layer，并将其添加到地图中
const layer = new VectorLayer({
    source:source,
});
map.addLayer(layer);

关键： 创建一个连接到向量源的新交互Modify，并将其添加到 map

// 3. 创建一个连接到向量源的新交互，并将其添加到 map
map.addInteraction(
  new Modify({
    source: source,
  })
);

3 .完整代码

js：

import './style.css';
import Map from 'ol/Map.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import View from 'ol/View.js';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/Vector';
import { transform } from 'ol/proj';
import Modify from 'ol/interaction/Modify';
// 下面用于确定地图中心 center
const center = [114.1692, 30.494]; //EPSG:4326
const transformedCenter = transform(center, 'EPSG:4326', 'EPSG:3857');
const view = new View({
  center: transformedCenter,
  zoom: 10
});

// 创建地图
const map = new Map({
    target: 'map',
    view: view
  });

// 1.矢量源
const source = new VectorSource({
  format: new GeoJSON(),
  url:'./data/hubei.geojson'
})

// 2. 用我们的矢量源创建一个新的layer，并将其添加到地图中
const layer = new VectorLayer({
    source:source,
});
map.addLayer(layer);

// 3. 创建一个连接到向量源的新交互，并将其添加到 map
map.addInteraction(
  new Modify({
    source: source,
  })
);

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quick Start</title>
    <style>
      @import "node_modules/ol/ol.css";
    </style>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>

    <div id="map"></div>
    <script src="./main.js" type="module"></script>
  </body>

</html>