请问如何取消激活标绘工具？

[wuxianshi]

如题，感谢

[sakitam-fdd]

@wuxianshi https://github.com/sakitam-fdd/ol-plot#deactivate 这个方法使用上有问题吗，我记得应该是可以的

[wuxianshi]

@sakitam-fdd 我试过了，不行

[wuxianshi]

@sakitam-fdd 看了源码，plotDraw.disActive这个方法可以实现

[wuxianshi]

@sakitam-fdd

但是会出现这些报错

[sakitam-fdd]

@wuxianshi 使用的 ol 版本呢？

[wuxianshi]

@sakitam-fdd 6.12.0

[sakitam-fdd]

@wuxianshi 我来看下吧，这项目好久没有维护了，ol5 之后的版本有部分核心改动

[sakitam-fdd]

dist.zip
先用这个试下看看：

import 'ol/ol.css';
import 'ol-plot/dist/ol-plot.css';
import { Map, View, VERSION } from 'ol';
import { Tile } from 'ol/layer';
import { OSM } from 'ol/source';

import Plot from 'ol-plot';

const map = new Map({
  layers: [
    new Tile({
      source: new OSM({
        url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
      }),
    }),
  ],
  view: new View({
    // center: [108.93, 34.27],
    center: [12095486.34146684, 4085090.6140265367],
    projection: 'EPSG:3857',
    zoom: 5,
  }),
  target: 'map',
});

/* eslint-disable-next-line */
const plot = new Plot(map, {
  zoomToExtent: true,
});

map.on('click', function (event) {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const feature = map.forEachFeatureAtPixel(event.pixel, function (feature) {
    return feature;
  });
  if (feature && feature.get('isPlot') && !plot.plotDraw.isDrawing()) {
    plot.plotEdit.activate(feature);
  } else {
    plot.plotEdit.deactivate();
  }
});

// 绘制结束后，添加到FeatureOverlay显示。
function onDrawEnd(event) {
  console.log(event);
  const feature = event.feature;
  // 开始编辑
  plot.plotEdit.activate(feature);
}

plot.plotDraw.on('drawStart', (e) => {
  console.log(e);
});
plot.plotDraw.on('drawEnd', onDrawEnd);

plot.plotEdit.on('activePlotChange', (e) => {
  console.log(e);
});
plot.plotEdit.on('deactivatePlot', (e) => {
  console.log(e);
});

plot.on('activeTextArea', function (event) {
  const style = event.overlay.getStyle();
  console.log(style);
});
plot.on('deactivateTextArea', function (event) {
  const style = event.overlay.getStyle();
  console.log(style);
});

// 指定标绘类型，开始绘制。
function activate(type) {
  plot.plotEdit.deactivate();
  plot.plotDraw.active(type);
}

function getFeatures() {
  const features = plot.plotUtils.getFeatures();
  console.log(JSON.stringify(features));
  plot.plotUtils.removeAllFeatures();
  plot.plotEdit.deactivate();
  plot.plotUtils.addFeatures(features);
}

window.plot = plot;
window.activate = activate;
window.getFeatures = getFeatures;
console.log(VERSION);

[sakitam-fdd]

dist.zip 先用这个试下看看：

import 'ol/ol.css';
import 'ol-plot/dist/ol-plot.css';
import { Map, View, VERSION } from 'ol';
import { Tile } from 'ol/layer';
import { OSM } from 'ol/source';

import Plot from 'ol-plot';

const map = new Map({
  layers: [
    new Tile({
      source: new OSM({
        url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
      }),
    }),
  ],
  view: new View({
    // center: [108.93, 34.27],
    center: [12095486.34146684, 4085090.6140265367],
    projection: 'EPSG:3857',
    zoom: 5,
  }),
  target: 'map',
});

/* eslint-disable-next-line */
const plot = new Plot(map, {
  zoomToExtent: true,
});

map.on('click', function (event) {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const feature = map.forEachFeatureAtPixel(event.pixel, function (feature) {
    return feature;
  });
  if (feature && feature.get('isPlot') && !plot.plotDraw.isDrawing()) {
    plot.plotEdit.activate(feature);
  } else {
    plot.plotEdit.deactivate();
  }
});

// 绘制结束后，添加到FeatureOverlay显示。
function onDrawEnd(event) {
  console.log(event);
  const feature = event.feature;
  // 开始编辑
  plot.plotEdit.activate(feature);
}

plot.plotDraw.on('drawStart', (e) => {
  console.log(e);
});
plot.plotDraw.on('drawEnd', onDrawEnd);

plot.plotEdit.on('activePlotChange', (e) => {
  console.log(e);
});
plot.plotEdit.on('deactivatePlot', (e) => {
  console.log(e);
});

plot.on('activeTextArea', function (event) {
  const style = event.overlay.getStyle();
  console.log(style);
});
plot.on('deactivateTextArea', function (event) {
  const style = event.overlay.getStyle();
  console.log(style);
});

// 指定标绘类型，开始绘制。
function activate(type) {
  plot.plotEdit.deactivate();
  plot.plotDraw.active(type);
}

function getFeatures() {
  const features = plot.plotUtils.getFeatures();
  console.log(JSON.stringify(features));
  plot.plotUtils.removeAllFeatures();
  plot.plotEdit.deactivate();
  plot.plotUtils.addFeatures(features);
}

window.plot = plot;
window.activate = activate;
window.getFeatures = getFeatures;
console.log(VERSION);

@wuxianshi

[wuxianshi]

@sakitam-fdd 请原谅我不太理解，我说说我的场景吧，比如我激活了标绘工具，但是这时我关闭当前组件，所以需要主动取消激活标绘工具，否则会在组件销毁后仍可以进行标绘操作

[sakitam-fdd]

@wuxianshi 使用

plot.plotDraw.deactivate();，如果是想取消 plotDraw 和 plotEdit 的激活状态，还应该将 plotEdit 也取消激活

plot.plotDraw.deactivate();
plot.plotEdit.deactivate();

你的报错不是方法失效，而是之前不支持 ol 6 的版本，现在请使用 ol-plot@4.0.0 版本， 具体原因可以看下 package.json 的dependencies/devDependencies/peerDependencies 区别

[wuxianshi]

@sakitam-fdd 现已更新到ol-plot@4.0.0版本，仍存在上次那个问题

不知是否与我在组件销毁前设置plot = null有关

[wuxianshi]

@sakitam-fdd 上述报错为第二次new olPlot后的第二次绘制出现，不知道该信息对你是否有帮助，感谢你的回复

[sakitam-fdd]

用 codesandbox

@sakitam-fdd 上述报错为第二次new olPlot后的第二次绘制出现，不知道该信息对你是否有帮助，感谢你的回复

一个简单的示例，然后 Plot 实例最好不要多次创建，可以使用单例模式来创建 plot

https://stackblitz.com/edit/vitejs-vite-q2dkvk?file=src/main.ts