请问如何取消激活标绘工具?
Closed this issue · 14 comments
如题,感谢
@wuxianshi https://github.com/sakitam-fdd/ol-plot#deactivate 这个方法使用上有问题吗,我记得应该是可以的
@sakitam-fdd 我试过了,不行
@sakitam-fdd 看了源码,plotDraw.disActive这个方法可以实现
@sakitam-fdd
但是会出现这些报错
@wuxianshi 使用的 ol 版本呢?
@sakitam-fdd 6.12.0
@wuxianshi 我来看下吧,这项目好久没有维护了,ol5 之后的版本有部分核心改动
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);
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 请原谅我不太理解,我说说我的场景吧,比如我激活了标绘工具,但是这时我关闭当前组件,所以需要主动取消激活标绘工具,否则会在组件销毁后仍可以进行标绘操作
@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
区别
@sakitam-fdd 现已更新到ol-plot@4.0.0
版本,仍存在上次那个问题
不知是否与我在组件销毁前设置plot = null
有关
@sakitam-fdd 上述报错为第二次new olPlot后的第二次绘制出现,不知道该信息对你是否有帮助,感谢你的回复
用 codesandbox
@sakitam-fdd 上述报错为第二次new olPlot后的第二次绘制出现,不知道该信息对你是否有帮助,感谢你的回复
一个简单的示例,然后 Plot 实例最好不要多次创建,可以使用单例模式来创建 plot
https://stackblitz.com/edit/vitejs-vite-q2dkvk?file=src/main.ts