Skip to content

Commit

Permalink
PolygonEditorOverlay 增加事件管理 增加onInit事件 增加异步回调
Browse files Browse the repository at this point in the history
  • Loading branch information
@fengluhome
fengluhome committed Jul 17, 2019
1 parent 8f9255c commit 0988694
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 42 deletions.
16 changes: 10 additions & 6 deletions examples/PolygonEditorOverlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<button onclick="openEdit()"> 打开编辑</button>
<button onclick="closeEdit()">关闭编辑</button>
<button onclick="translation()">平移</button>
<button onclick="getpath()">获得围栏路径</button>
<button onclick="getPath()">获得围栏路径</button>
</div>
</body>

Expand All @@ -62,8 +62,8 @@
size: 6, // 半径
},
mouseOver: {
// backgroundColor: "rgba(93,158,247,1)",
backgroundColor: "rgba(184,0,0,1)",
// backgroundColor: "rgba(93,158,247,1)",
backgroundColor: "rgba(184,0,0,1)",
// borderColor: "rgba(93,158,247,1)",
// borderWidth: 1
},
Expand Down Expand Up @@ -92,7 +92,7 @@
backgroundColor: "rgba(0,184,255,0.1)"
// backgroundColor: "rgba(0,184,255,0.3)"
},
mouseOver:{
mouseOver: {
backgroundColor: "rgba(0,184,255,0.1)"
}

Expand Down Expand Up @@ -180,9 +180,13 @@
]
]
}
}, function () {
console.log('setData');
});
}

overlay.on('init', function () {
console.log('init');
});
function openEdit() {
overlay.enableEditing();
}
Expand All @@ -195,7 +199,7 @@
overlay.translationPixel(20, 20);
}

function getpath() {
function getPath() {
let data = JSON.stringify(overlay.getPath(), null, 2);
console.log(data);
alert(data);
Expand Down
6 changes: 0 additions & 6 deletions src/config/PolygonEditorConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,5 @@ export default {
},
data: null,
event: {
onMouseClick() { },
onCreated() { },
onChange() { },
onDelete() {

}
}
};
4 changes: 2 additions & 2 deletions src/overlay/PolygonEditorOverlay/PointDragOverlay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,11 +251,11 @@ export default class PointOverlay extends Parameter {
}

this._selectItem = [result.item];
console.log('_selectItem', this._selectItem);

this._drawMouseLayer();
}
_mouseupFun(event) {
console.log('_selectItem', this._selectItem);

if (this._isDragging) {
let dragEndPixel = {
x: event.offsetX,
Expand Down
85 changes: 57 additions & 28 deletions src/overlay/PolygonEditorOverlay/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import config from '../../config/PolygonEditorConfig';
import {
merge,
isPolyContains,
isFunction
} from '../../common/Util';

export default class PolygonEditorOverlay extends CanvasOverlay {
Expand All @@ -31,7 +32,17 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
this._createTempCache = null;
this._createIndex = -1;
this.isCreate = false;

this._subscriptions = {
onInit: [],
isInit: true,
onMouseClick: [],
onMouseOver: [],
onMouseLeave: [],
onCreated: [],
onChange: [],
onDelete: []
};
this._bindEmit();
}
setZIndex(zIndex) {
this._zIndex = zIndex;
Expand All @@ -41,14 +52,22 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
this._pointOverlay && this._pointOverlay.setZIndex(this._zIndex + 2);
this._virtualPointOverlay && this._virtualPointOverlay.setZIndex(this._zIndex + 4);
}
_bindEmit() {
for (const name in this._eventConfig) {
const fun = this._eventConfig[name];
if (isFunction(fun)) {
this.on(name, fun);
}
}
}
_canvasInit() {
this._polygonOverlay = new PolygonOverlay({
checkDataType: {
name: false,
count: false
},
style: this._opts.style.polygon,
data: this._opts.data ? [this. _toMultiPolygon(this._opts.data)] : [],
data: this._opts.data ? [this._toMultiPolygon(this._opts.data)] : [],
event: {
emitEvent: false,
onState: (state) => {
Expand All @@ -71,13 +90,19 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
} else {
this._clearPointOverlay();
}
this._emitInit();
}
},
onMouseClick: (event) => {
onMouseClick: (...args) => {
if (!this.isCreate) {
this._eventConfig.onMouseClick(event, this);
this._emit('onMouseClick', ...args);
}

},
onMouseOver: (...args) => {
this._emit('onMouseOver', ...args);
},
onMouseLeave: (...args) => {
this._emit('onMouseLeave', ...args);
}
},
zIndex: this._zIndex + 1
Expand Down Expand Up @@ -119,7 +144,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
this._map.addOverlay(this._virtualPointOverlay);
this._map.addEventListener('rightclick', this._rightClick);
}
setOptionStyle(opts) {
setOptionStyle(opts, callback) {

if (!opts) return;
if (opts.data === undefined) {
Expand Down Expand Up @@ -148,7 +173,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
}
});
if (opts.data !== undefined) {
this.setPath(opts.data);
this.setPath(opts.data, callback);
}
}
_workerDataClear() {
Expand Down Expand Up @@ -180,7 +205,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
}

}
setPath(data) {
setPath(data, callback) {
this.isCreate = false;
this._opts.data = data;
this._workerDataClear();
Expand All @@ -189,7 +214,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
this._draggingVirtualTemp = null;
this._createTempCache = null;
this._createIndex = -1;
this._polygonOverlay && this._polygonOverlay.setData(this._opts.data ? [this. _toMultiPolygon(data)] : []);
this._polygonOverlay && this._polygonOverlay.setData(this._opts.data ? [this._toMultiPolygon(data)] : [], callback);
}
enableEditing() {
this.isCreate = false;
Expand Down Expand Up @@ -235,7 +260,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
}
}
this._polygonOverlay && this._polygonOverlay.refresh();
this._eventConfig.onChange('translationPixel', this);
this._emit('onChange', 'translationPixel', null, this);
}
}
_removeMoveEvent() {
Expand Down Expand Up @@ -272,7 +297,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
return null;
}
}
_toMultiPolygon(data) {
_toMultiPolygon(data) {
try {
if (data && data.geometry.type == 'Polygon') {
data.geometry.type = 'MultiPolygon';
Expand Down Expand Up @@ -351,7 +376,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
geoJSON.geometry.pixels.splice(this._createIndex, 1);

this._polygonOverlay.refresh();
console.log(geoJSON);

this._createIndex--;
} else {

Expand All @@ -366,7 +391,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {

this._polygonOverlay.refresh();
}
this._eventConfig.onCreated(event, this);
this._emit('onCreated', event, this);

}

Expand Down Expand Up @@ -419,7 +444,8 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
coordinates.splice(j, 1);
this._workerData[0].geometry.pixels.splice(j, 1);
this._polygonOverlay.refresh();
this._eventConfig.onDelete(event, this);

this._emit('onDelete', event, this);
break;
}
}
Expand Down Expand Up @@ -512,7 +538,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
pointData = pointData.concat(this._pointDataGroup[i]);
}
if (!this._pointOverlay) return;

// this._pointOverlay._selectItem = [];
this._pointOverlay._setWorkerData(pointData);
this._pointOverlay.refresh();
Expand Down Expand Up @@ -590,7 +616,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
this._setPointData();
this._setVirtualPointData();
//触发 change 事件
this._eventConfig.onChange(action, event, this);
this._emit('onChange', action, event, this);
}
}
_findPointDataGroup(data, item) {
Expand Down Expand Up @@ -620,23 +646,25 @@ export default class PolygonEditorOverlay extends CanvasOverlay {

let index = this._draggingPointTemp.index,
virtualLine = [],
data = this._draggingPointTemp.points||[],
data = this._draggingPointTemp.points || [],
len = data.length;
if (data.length > 0) {
if (index == 0) {
virtualLine.push(data[len - 1]);
} else {
virtualLine.push(data[index - 1]);
}

if (index == 0) {
virtualLine.push(data[len - 1]);
} else {
virtualLine.push(data[index - 1]);
}

virtualLine.push(data[index]);
virtualLine.push(data[index]);

if (index == len - 1) {
virtualLine.push(data[0]);
} else {
virtualLine.push(data[index + 1]);
if (index == len - 1) {
virtualLine.push(data[0]);
} else {
virtualLine.push(data[index + 1]);
}
}


this._drawLine(virtualLine);
this._setVirtualPointData();
}
Expand All @@ -654,6 +682,7 @@ export default class PolygonEditorOverlay extends CanvasOverlay {
this._ctx.strokeStyle = 'red';
this._ctx.setLineDash([10, 5]);
for (let i = 0; i < data.length; i++) {

let geometry = data[i].geometry;
if (i == 0) {
this._ctx.moveTo(geometry.pixel.x, geometry.pixel.y);
Expand Down

0 comments on commit 0988694

Please sign in to comment.