OpenLayers 点击添加点功能

一个用于在OpenLayers地图上实现点击添加点功能的npm包。

安装

npm install gyynpmtest

使用方法

在Vue项目中使用（ES模块方式）

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
  <div>
    <button @click="clearPoints">清除所有点</button>
    <button @click="toggleClick">{{ isEnabled ? '禁用' : '启用' }}点击添加点</button>
  </div>
</template>

<script>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import { enableClickToAddPoint } from 'gyynpmtest';

export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
      clickPointControl: null,
      isEnabled: true
    };
  },
  mounted() {
    // 创建OpenLayers地图
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    // 方式1：自动导入（适用于CommonJS环境，Vue项目可能需要手动传入类）
    // const clickPointControl = enableClickToAddPoint(this.map, {
    //   clearOnClick: false,
    //   layerName: 'my-click-points'
    // });

    // 方式2：手动传入OpenLayers类（推荐，兼容性更好）
    const olClasses = {
      Map,
      VectorLayer,
      VectorSource,
      Feature,
      Point,
      Style,
      Circle,
      Fill,
      Stroke
    };

    this.clickPointControl = enableClickToAddPoint(
      this.map,
      {
        clearOnClick: false, // 点击时不清除之前的点
        layerName: 'my-click-points' // 图层名称
      },
      olClasses
    );

    // 如果需要自定义样式
    // const customStyle = new Style({
    //   image: new Circle({
    //     radius: 10,
    //     fill: new Fill({ color: 'red' }),
    //     stroke: new Stroke({ color: 'white', width: 2 })
    //   })
    // });
    // this.clickPointControl = enableClickToAddPoint(
    //   this.map,
    //   { pointStyle: customStyle },
    //   olClasses
    // );
  },
  beforeUnmount() {
    // 组件销毁时清理
    if (this.clickPointControl) {
      this.clickPointControl.removeLayer();
    }
  },
  methods: {
    // 清除所有点
    clearPoints() {
      if (this.clickPointControl) {
        this.clickPointControl.clear();
      }
    },
    // 切换点击添加点功能
    toggleClick() {
      if (this.clickPointControl) {
        if (this.isEnabled) {
          this.clickPointControl.disable();
        } else {
          this.clickPointControl.enable();
        }
        this.isEnabled = !this.isEnabled;
      }
    }
  }
}
</script>

在Node.js/CommonJS项目中使用

const { Map, View } = require('ol');
const TileLayer = require('ol/layer/Tile').default;
const OSM = require('ol/source/OSM').default;
const { enableClickToAddPoint } = require('gyynpmtest');

// 创建地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

// 启用点击添加点功能（自动导入OpenLayers类）
const clickPointControl = enableClickToAddPoint(map, {
  clearOnClick: false,
  layerName: 'click-points'
});

API

enableClickToAddPoint(map, options)

启用地图点击添加点功能。

参数

• map (Map): OpenLayers Map实例，必需
• options (Object): 配置选项，可选
  • pointStyle (Style): 点的样式，如果不提供则使用默认样式
  • clearOnClick (boolean): 点击时是否清除之前的点，默认 false
  • layerName (string): 图层名称，默认 'click-point-layer'

返回值

返回一个控制对象，包含以下方法：

• enable(): 启用点击添加点功能
• disable(): 禁用点击添加点功能
• clear(): 清除所有已添加的点
• getLayer(): 获取图层实例
• removeLayer(): 移除图层（包括禁用功能和从地图移除图层）

实现思路

1. 创建临时图层：使用 VectorLayer 创建一个矢量图层用于显示点
2. 监听点击事件：监听地图的 singleclick 事件
3. 添加点要素：在点击位置创建 Point 几何对象和 Feature，添加到图层的数据源中
4. 样式配置：支持自定义样式，默认使用蓝色圆点样式

注意事项

• 确保项目中已安装 ol 包（OpenLayers）
• 该包会自动创建一个临时图层并添加到地图上
• 默认情况下，点击会累积添加点，不会清除之前的点
• 可以通过 clearOnClick: true 选项实现点击时清除之前的点